FluidTransitions
FluidTransitions copied to clipboard
Cannot read property 'state' of undefined. using createFluidNavigator
I am converting my existing createStackNavigator code to start using fluid navigator but can't figure out how to pass the navigation prop.
My old render code looks like
const routeConfig = ngData.tabs.reduce((routes, tab) => {
routes[nodeId + '/' + tab.tabId] = {
screen: (screenProps) => (<ConnectedNode ..... navigation={navProp} />),
navigationOptions: ({ navigation }) => {
navProp = navigation;
.
.
.
}
}
return routes;
}, {});
const StackNav = new createStackNavigator(routeConfig, {
initialRouteName: this.defaultRoute,
onTransitionEnd: (props) => (
navigatorMgr.onTransitionEnd(nodeId, props)
),
transitionConfig: () => ({
containerStyle: {
backgroundColor: backgroundColor,
flexGrow: 1
}
})
});
return (
<View style={css} onLayout={layoutFn}>
<StackNav />
</View>
)
I am changing the createStackStackNav to createFluidNavigator
const StackNav = createFluidNavigator(routeConfig, {
initialRouteName: this.defaultRoute,
onTransitionEnd: (props) => (
navigatorMgr.onTransitionEnd(nodeId, props)
),
transitionConfig: () => ({
containerStyle: {
backgroundColor: backgroundColor,
flexGrow: 1
}
})
});
const { navigation } = this.props;
return (
<View style={css} onLayout={layoutFn}>
<StackNav />
</View>
)
but this fails because the navigation prop is not set properly when it gets to createNavigator.js. Where and how does the navigation prop get set? what am i missing ?
I also just tried the example at https://medium.com/@christian.falch/fluid-transitions-with-react-navigation-a049d2f71494 and I get the following error
ExceptionsManager.js:76 TypeError: Cannot read property ‘state’ of undefined
This error is located at: in Navigator (at App.js:122) in RCTView (at View.js:44) in App (at renderApplication.js:34) in RCTView (at View.js:44) in RCTView (at View.js:44) in AppContainer (at renderApplication.js:33)
Any ideas ?