I use react-navigation with StackNavigatior to navigate through screens. I navigate from the screen A to screen B where I can select one option from a list of options.
After I press Done, I want to go back to screen A and see what option I selected in screen B.
How can I do that ?
I tried to pass the option selected to goBack() method, but it doesn't work.
If screen A is a parent of screen B, you can pass something like:
setScreenBOption: function (option) {
this.setState({screenBOption:option});
}
to screen B.
Then from screen B whenever the option is selected, you can call
this.props.setScreenBOption(thingThatWasClicked);
On screen A, you'd display this.state.screenBOption.
If screen A and screen B are siblings, you'd add the setScreenBOption function onto the parent of screen A and screen B and pass this.setScreenBOption down to screen B and this.state.screenBOption to screen A. On screen A, you'd display this.props.screenBOption.
Related
I am using react navigation v6. I use navigation.navigate() to move to another screen and navigation.jumpTo() for my custom tabs. The issue I am facing is, after I navigate to a different screen and go back to the previous screen with a new params passed, the navigation is unable to read the jumpTo() anymore as it becomes undefined.
Example:
The screen navigation below is working fine without any params get passed
Screen A > Screen B > Screen A > Screen Tab 1
This 2nd example is when there is a params get passed back to Screen A and jumpTo() Screen Tab 1 will throw error undefined
Screen A > Screen B > Screen A (username: john) > Screen Tab 1
Based on the React Navigation Navigate documentation, it will push a new screen if it has a different params, in my case is Screen A (username: john). So I guess that is what causing the error to appear.
Is there a way to keep the jumpTo() function or any similar method I can use? I don't want to use redux if possible.
I need help in React Navigation when I create a tab bar like I have button home and I want to access another screen in the Home with show tab bar inside it to keep selected on the Home icon.
First Screen
Second Screen
I want show tabBar with continue select Home button.
This solved my problem by A stack navigator for each tab.
https://reactnavigation.org/docs/tab-based-navigation/?fbclid=IwAR071_HAYPP9NYGbVHq88j1ZssyBn8226Qnne_PzUdGdIM56XrVD5shU10c#a-stack-navigator-for-each-tab
I think you should have a variable that would keep track of the home page and when you are on it and thus provide the styling you need on the homepage icon....and when you are in the second screen it should be still be set to true so nothing changes
I having problem when I push to next screen.
Lets say from screen A(product details screen) -> screen B(product details screen)
Currently I am successfully move from screen A to screen B. But the problems is when i navigate back to screen A, the data in screen A already updated which is same as screen B.
Below is how i update my screen data by using componentDidMount() and navigate to next screen using push.
componentDidMount() {
this.props.getDetails(id);
}
this.props.navigator.push({
screen:'myapp.productDetailsScreen'
})
Is it something i missed that accidentally update screen a data when i navigate to screen b?
Screen A and Screen B share the same component (they just render different value based on the id given).
I am using this library
react-native-navigation v1 (wix)
Any help is appreciated! Thanks.
if you are using redux you the redux state between both of the screens is shared. that is why it is updated on both screens.
I am using react-redux and react-native's navigation in my app. My goal is of navigate after successful API call from Screen A -> Screen B -> Screen C and so on.
This is what I'm doing in the app.
On Screen A, button is pressed, and an redux action is generated.
Action is internally calling an API and getting result and dispatching event to reducer state.
After reducer's state gets updated (Success cases), I wanted to navigate to Screen B.
Again same 1-3 steps for Screen B to Screen C.
I did tried following approaches:
Adding navigation code in componentWillReceiveProps:
Problem with this approach is, its calling all the componentWillReceiveProps of navigation stack. This is rendering current screen multiple times before navigating to next screen (I observed this behaviour from Screen B -> Screen C)
Adding navigation code render method itself and returning null.
Again problem here is, what if I have multiple reducer mapped in one screen. Again I will be navigating more than once if both reducer changes.
I thought of using EventListener's, but than I have to keep track of adding and removing them.
Any ideas on how can I achieve this.
Thanks
I am taking a bottom tab navigator which is having five screens. At third screen which is home screen I want to open modal which contain 2 buttons. When user click on home button show modal and hide tab navigator and when user click anywhere at screen it gets out from modal .
I want functionality like this issue on GitHub presented :
https://github.com/react-navigation/react-navigation/issues/1059.
You can handle click on tab using next https://reactnavigation.org/docs/navigators/tab#tabBarOnPress
So in tabBarOnPress you can implement your custom logic ( open modal, trigger redux action, etc... )