FluidTransitions icon indicating copy to clipboard operation
FluidTransitions copied to clipboard

Cannot read property 'state' of undefined. using createFluidNavigator

Open manujbahl opened this issue 6 years ago • 1 comments

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 ?

manujbahl avatar Mar 29 '19 07:03 manujbahl

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 ?

manujbahl avatar Mar 29 '19 16:03 manujbahl