CODEWITHSUNDEEP
reactjsreact-native
Allen
Allen

Reputation: 712

React navigation - followed the docs but get an error

I'm very new to learning react and was simply following this example: https://facebook.github.io/react-native/docs/navigation.html

import { StackNavigator, } from 'react-navigation';
const App = StackNavigator(
 { Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen }, });


class HomeScreen extends React.Component { 
   static navigationOptions = { title: 'Welcome', }; 
    render() { 
         const { navigate } = this.props.navigation; 
        return ( <Button title="Go to Jane's profile" onPress={() => navigate('Profile', { name: 'Jane' }) } /> ); } 
}

But when I run this I get an error that says

"ProfileScreen is not defined"

I can't see what to do here since this wasn't on the documents page I linked to.

Upvotes: 0

Views: 77

Answers (1)

whs.bsmith
whs.bsmith

Reputation: 406

You are simply missing a React component called ProfileScreen. You have a HomeScreen:

    class HomeScreen extends React.Component { 
       static navigationOptions = { title: 'Welcome', }; 
        render() { 
            const { navigate } = this.props.navigation; 
            return ( 
                <Button 
                    title="Go to Jane's profile" 
                    onPress={() => navigate('Profile', { name: 'Jane' }) } 
                /> 
            ); 
        } 
     }

Now just define some kind of ProfileScreen:

const ProfileScreen = () => (
    <View>
        <Text>ProfileScreen</Text>
    </View>
);

Upvotes: 1

Related Questions