In my react native app I upgraded react navigation 3 to react navigation 5. But after upgrading when I run the application I always get this warning several times whenever I do any kind of navigation:
Accessing child navigation state for a route is not safe and won't work correctly
For example I navigate between screens of the StackNavigator using the command this.props.navigation.push as in the following code:
<Screen header={<Header
centerComponent={
<CustomText style={{ color: colors.primaryText, marginLeft: 15, marginRight: 15 }}>
{shop && shop.name}
</CustomText>
}
leftComponent={
<HeaderIcon
onPress={() => this.props.navigation.push("SelectShop", { pop: true })}
type="material-community"
name="store" />
}
rightComponent={
<HeaderIcon
onPress={() => this.props.setProductLayout()}
image={numColumns == 1 ? GridIcon : ListIcon} />
}
/>}>....</Screen>
If I click on every header icon I get this warning. These navigation commands all used to be working before upgrade. After upgrade they still work but throw this warning. I searched through Internet and found the only place that this warning is happening:
react-navigation/navigation-ex/packages/compat/src/createCompatNavigationProp.tsx
This is a compatibility layer that handles various API differences between React Navigation 4 and 5. I use the library because i need navigation props in some child components. But I didn't figured out why they have put the warning there! Maybe I get the warning because I'm not using typescript! If it is the case, could I ignore this warning safely? Thanks for any help.
