4

The objective is to reuse the same screen ui with different content and still be able to handle back navigation(like how reddit app can show multiple user/feed screens as you click on them but still handle custom back navigation) using react native navigation v2?

trying to use dynamic screen id's and use them in state variables. I haven't come very far with this approach.

The inbuilt back button handles back navigation but consider the scenario as follows:

I am working on a form and I open another form, work on it, save it and have to return to the existing form. custom handlers do not allow it.

CODE:

HomeScreen: 

Navigation.push(this.props.componentId, {
  component: {
    name: 'example.formScreen',
    passProps: {
      data: some props
    },
    options: {
      topBar: {
        title: {
          text: 'form Screen'
        }
      }
    }
  }
});

in form screen:

<View>
<Button 
title="save form"
onpress = ()=>{
Navigation.push(this.props.componentId, {
      component: {
        name: 'example.formScreen',
        passProps: {
          data: some other props
        },
        options: {
          topBar: {
            title: {
              text: 'form Screen'
            }
          }
        }
      }
    });
}/>
<Button
title="go back"
onPress={()=>Navigation.pop(this.props.componentID)}
/>
</View>
Shreevatsa Acharya
  • 133
  • 1
  • 10

2 Answers2

4

You can push instead of navigating to the screen in this way you can use same component with different data and can use the same screen. You have to pass params along with navigation route while navigating to the screen and these params will have the data that will help to fill the container on the new screen. The above Example is used when we are using react-navigation but in this example, I will explain about both(react-native-navigation, react-navigation) to pass params and the back button functionality will be the same as you can pop the previous route will navigating back.

react-native-navigation

Navigation.push(this.props.componentId, {
  component: {
    name: "ShowAnotherScreen",
    passProps: {
     data: item
    }
  }
})

react-navigation

this.props.navigation.push('YourScreenName', { YourParams })
Waheed Akhtar
  • 3,110
  • 1
  • 16
  • 30
  • custom back handle does not work in this case i.e Navigation.pop(); – Shreevatsa Acharya Sep 30 '19 at 08:54
  • @ShreevatsaAcharya are you trying to override back button functionality or you just want to navigate to back screen ? – Waheed Akhtar Sep 30 '19 at 09:11
  • for some cases i ma trying to handle back functionality, i have updated the issue, I hope you can guide me better. – Shreevatsa Acharya Sep 30 '19 at 09:20
  • Can you please share your code, i got the understanding but i like to see the code what you have implemented and where you are facing the problem so i can guide you better. – Waheed Akhtar Sep 30 '19 at 09:25
  • @ShreevatsaAcharya I have also seen the issue that you reported https://github.com/wix/react-native-navigation/issues/5532 and as per my understanding you are opening the the same Screen two or three times with different data like you want to open the nested screens if this is the case then you just need to need to define one route and instead of opening it multiple times make a static UI component for the part of the screen that you want to fill with data that is different on each screen open that view with different data. – Waheed Akhtar Sep 30 '19 at 14:58
  • i am able to achieve this but on back press from the toolbar or navigation.pop() for the 2nd iteration of the screen crashes the app without any error logs. P.S: I am using my own custom screen id instead of default id's of RNN for some other functionalities. – Shreevatsa Acharya Sep 30 '19 at 16:43
3

If you want to go to the same screen and pass on the parameters, try rendering the current screen again on the current screen.

this.props.navigation.push('currentscreen',{param: "params"})
hong developer
  • 13,291
  • 4
  • 38
  • 68