expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

Router not found in different component js file #385

Closed Benjamin5050 closed 7 years ago

Benjamin5050 commented 7 years ago

I am using ExNavigation in my react-native App. I have a very simple app, where ExNavigationDemo is the main app.

index.android.js:

const Router = createRouter(() => ({
    home: () => HomeScreen,
    about: () => AboutScreen,
}));

export default class ExNavigationDemo extends Component {
    render() {
        return (
            <NavigationProvider router={Router}>
                <StackNavigation initialRoute={Router.getRoute('home')}/>
            </NavigationProvider>
        );
    }
}

HomeScreen.js:

export default class HomeScreen extends React.Component {    
    static route = {
        navigationBar: {
            title: 'Home',
        }
    }

    goToAboutScreen = () => {
        this.props.navigator.push(Router.getRoute('about'));
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>Home Screen!</Text>
                <Text style={styles.button} onPress={this.goToAboutScreen}>Go to AboutScreen</Text>
            </View>
        )
    }
}

AboutScreen.js:

export default class AboutScreen extends React.Component {    
    static route = {
        navigationBar: {
            title: 'About',
        }
    }

    goBack = () => {
        this.props.navigator.pop();
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>About Screen!</Text>
                <Text style={styles.button} onPress={this.goBack}>Go back</Text>
            </View>
        )
    }
}

The app loads without any problem. However, when I press on the Go to About Screen, I get an error:

Can't find variable: Router

But, if I don't import Router and just code in this way this.props.navigator.push('about'); it works fine.

Also please keep in mind that all these components (ExNavigationDemo, HomeScreen, AboutScreen) are in separate files. So, if place all these components in the same file (index.android.js), then its working fine. But I want to keep them in separate files. What am I missing here?