I'd like to pass the values from Tab to another Tab and I follow instructions from this tutorial https://reactnavigation.org/docs/en/params.html
I got the values at the end but i don't want to change the screen suddenly.
I tried to use 'setParams' instead but it doesn't work.
Setting tab (Selection) :
onPress={() => {
console.log('Select : '+ item.code);
this.props.navigation.navigate('A-page', {adCode: item.code});
}}
First tab (A-page) :
this.setState ({
AirportCode : this.props.navigation.getParam('adCode','----')
})
Any ideas for passing values across Tab navigation or method to stop changing the screen suddenly?
This looks more like a Redux use case then a React Navigation one. If you wanna change properties that influence more than one screen in your app, you should store these properties at the redux store.
Related
I have a react native app which uses react navigation (V6.x for sure). My app has a main navigator which is a bottom-tabs navigator and contains three screens (tabs). Every one of these screens are stack navigators themselves. Let's say one of my tabs is named Wallet (others are Settings and Transactions). Inside this Wallet screen (which is a stack navigator), i have a HomePage screen, a Receive screen and a Send screen. I want to achieve the following behavior (like below screenshot from designs):
Whenever the user goes to one of Send or Receive screens, i want all the tab bar buttons become unfocused (tab bar is still visibe though). And whenever the user gets back to HomePage screen (or going to Settings or Transactions tab by pressing the corresponding tab button), I want the relevant tab button to get focused again. How can i achieve that with react navigation itself?
(My project is managed by redux, but i prefer not to use state management tools and use react navigation itself)
You can do that, but checking child navigation state inside your TabNavigator's screenOptions.
screenOptions={({ route, navigation }) => {
// get wallet stack route
const walletStack = navigation.getState().routes.find((route) => route.name === 'Wallet');
// get current wallet stack focused screen
const walletRouteName = getFocusedRouteNameFromRoute(walletStack);
const shouldBeUnfocused =
walletRouteName === 'Send' || walletRouteName === 'Receive';
{...}
}
Based on shouldBeUnfocused you can render proper icons and colors. Here is the snack with example code. You can red here about customizing tab bar's appearance.
I have a button on my header right that open up a drop down component. The component allow user to make some selection and apply it after the user hit the 'apply' button.
After the apply button pressed, it should be able to pass the value back to the 'main screen' component. How do I pass the value back to the 'main screen' ?
This is my interface , if you're wondering what I'm trying to do.
edit
I tried to pass in the useState function to the header component to update the state after the apply button pressed by passing it using the setParam from react navigation props. Is there any other better way to get the value ??
You can do it simply like:
props.navigation('Home', { state: SOME_VALUE });
Here is the react navigation doc to do this.
React navigation passing params to previous screen
Or you can use redux store.
I am using Native Base and TabNavigator to display custom tabs.
How can I change the "active" property of the Button element to reflect the custom active tab?
Solved by adding:
active={props.navigation.state.index === 0}
Here is the logged value:
Also, you can go to state.routes to get the list of the screens.
When using startTabBasedApp(params) in React Native Navigation (by Wix), all of the tabs load at once.
Is there a way to make it so that only the initial tab loads? And then only after clicking on another tab does that tab load?
I don't believe it's possible. See this comment for more information, it seems like they intended this behaviour.
A possible workaround is to use the following within the component:
onNavigatorEvent(event) {
switch (event.id) {
case "bottomTabSelected":
this.setState({ didPressTab: true })
break
case "willAppear":
ApplicationScreensManager.getInstance().registerCurrentActiveScreen(ApplicationScreens.WebViewContainerScreen)
}
break
}
}
while this case "bottomTabSelected": is fired only when selecting a tab, then you can set the state raising a flag and only then do whatever you intended on when pressing the tab.
good luck
I am getting an object undefined exception during a transition from one screen to another. I have a pretty good idea what is happening, I am just not sure if there is a clean way of handling it without just checking for undefined everywhere.
Here is my scenario:
Source screen references a user object in a Redux store
Navigation is initiated from the source screen to the destination screen.
The destination screen componentDidMount() is called where I clear the user object from the Redux store.
The source screen render() gets called again and the undefined error occurs because I cleared user from the store.
I am assuming that the source and destination screens have some overlap due to the transition. I have tried adding listeners with no luck. I can only get listener handlers to fire for type = action,
I am probably making this more complicated than it is, but I would like to find out if there is a standard way of dealing with this or if I am going about it in a completely wrong way.
Also, my react-navigation is integrated with Redux as per the instructions on React Navigation's website and the Redux React Navigation sample code.
Here is the basic code.
Screen 1
componentDidMount() {
// This is a Redux action that sets an object called user to null
clearUser();
{
Screen 2
render() {
return (
// Other code here
// user is null here because render gets called after Screen1#componentDidMount() gets called
<Text>{user.firstName + ' ' + user.lastName}</Text>
<TouchableOpacity
onPress={() => navigation.dispatch({ type:'NAV_SCREEN_1' })}
>
// button code here
</TouchableOpacity>
// Other code here
)
}
The type of error is "TypeError: Cannot read property 'firstName' of null"
I understand the error and why I am getting it. The user object has been set to null by my Redux action in componentDidMount() of Screen 1 and then Redux causes render of Screen 2 to get called which is referencing a user object which is null.
My question is, is there a special way to accommodate this behavior without having to check if the user object is null every place I need to use it ? Should I call clearUser() somewhere else ?
For the newest version of react-navigation, you can use either addListener, withNavigationFocus or isFocused to detect transition state of the screens.
Another unofficial way is to catch action type NavigationActions.COMPLETE_TRANSITION, in case of using middleware like redux-saga.
As an alternative, you can simply make your Redux-connected screen handle undefined or null state. I had a similar problem and I ended up rendering a loader instead of the screen content when user state is undefined. When I log out, the screen shows a loader for a fraction of a second, then the app navigates away.