React Native - how to navigate between pages - Error: undefined is not a function(near, '…(0,...












0















I am learning React Native and I am trying to implement page navigation, when I click the Explore button , I want to go to the About page. I followed a few guides but nothing so far.
The error I get is undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')*.



Here is the code:



index.js



/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);


App.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createStackNavigator, StackNavigator } from "react-navigation";
import HomeScreen from './pages/home_screen.js';
import AboutPage from './pages/about_me.js';



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });



const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
About: {
screen: AboutPage,
},
},
{
initialRouteName: 'Home',
}
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
render() {
return <AppContainer />;
}
}


home_screen.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import LocationIcon from 'react-native-vector-icons/Entypo';
import SocMediaIcons from 'react-native-vector-icons/AntDesign';
import { createStackNavigator, createAppContainer } from "react-navigation";




const locationIcon = (<LocationIcon name="location" size={30} color="#6600cc" />);
const linkedInIcon = (<SocMediaIcons name="linkedin-square" size={30} color="#6600cc" />);
const instagramIcon = (<SocMediaIcons name="instagram" size={30} color="#6600cc" />);
const facebookIcon = (<SocMediaIcons name="facebook-square" size={30} color="#6600cc" />);



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });

class HomeScreen extends Component{
render() {
return (
<LinearGradient
colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
style={styles.container}
>
<View style={styles.iconGrid}>
<View style={{width: 195}}>
<Text>{locationIcon} Mordor</Text>

</View>
<View style={{width: 70}} />
<View style={{width: 30}} >
{facebookIcon}
</View>
<View style={{width: 30 }} >
{instagramIcon}
</View>
<View style={{width: 30}} >
{linkedInIcon}
</View>
</View>

<TouchableHighlight
style ={{
height: 50,
shadowColor: 'red',
width:260,
borderRadius:30,
backgroundColor : "rgba(255, 255, 255, 0.3)",
marginLeft :50,
marginRight:50,
marginTop : 250
}}>
<Button onPress={()=> this.props.navigation.navigate('About')}
title="Explore"
accessibilityLabel="Explore Beautox"
/>
</TouchableHighlight>


</LinearGradient>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',

},
button : {
borderColor: 'red',
backgroundColor: 'rgba(255, 255, 255, 1.0)'
},
iconGrid: {
flexDirection: 'row',
marginTop: 350,
width: 350,
marginRight: 10
}
});

export default HomeScreen;


about_me.js



import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';

class AboutMe extends Component {
render() {
return(
<View>
<Text>Hello</Text>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
};

export default AboutMe;


Any help would be appreciated.










share|improve this question

























  • react-navigation version?

    – Wainage
    Nov 19 '18 at 18:36











  • @Wainage it is 3x

    – squeekyDave
    Nov 19 '18 at 19:51
















0















I am learning React Native and I am trying to implement page navigation, when I click the Explore button , I want to go to the About page. I followed a few guides but nothing so far.
The error I get is undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')*.



Here is the code:



index.js



/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);


App.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createStackNavigator, StackNavigator } from "react-navigation";
import HomeScreen from './pages/home_screen.js';
import AboutPage from './pages/about_me.js';



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });



const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
About: {
screen: AboutPage,
},
},
{
initialRouteName: 'Home',
}
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
render() {
return <AppContainer />;
}
}


home_screen.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import LocationIcon from 'react-native-vector-icons/Entypo';
import SocMediaIcons from 'react-native-vector-icons/AntDesign';
import { createStackNavigator, createAppContainer } from "react-navigation";




const locationIcon = (<LocationIcon name="location" size={30} color="#6600cc" />);
const linkedInIcon = (<SocMediaIcons name="linkedin-square" size={30} color="#6600cc" />);
const instagramIcon = (<SocMediaIcons name="instagram" size={30} color="#6600cc" />);
const facebookIcon = (<SocMediaIcons name="facebook-square" size={30} color="#6600cc" />);



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });

class HomeScreen extends Component{
render() {
return (
<LinearGradient
colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
style={styles.container}
>
<View style={styles.iconGrid}>
<View style={{width: 195}}>
<Text>{locationIcon} Mordor</Text>

</View>
<View style={{width: 70}} />
<View style={{width: 30}} >
{facebookIcon}
</View>
<View style={{width: 30 }} >
{instagramIcon}
</View>
<View style={{width: 30}} >
{linkedInIcon}
</View>
</View>

<TouchableHighlight
style ={{
height: 50,
shadowColor: 'red',
width:260,
borderRadius:30,
backgroundColor : "rgba(255, 255, 255, 0.3)",
marginLeft :50,
marginRight:50,
marginTop : 250
}}>
<Button onPress={()=> this.props.navigation.navigate('About')}
title="Explore"
accessibilityLabel="Explore Beautox"
/>
</TouchableHighlight>


</LinearGradient>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',

},
button : {
borderColor: 'red',
backgroundColor: 'rgba(255, 255, 255, 1.0)'
},
iconGrid: {
flexDirection: 'row',
marginTop: 350,
width: 350,
marginRight: 10
}
});

export default HomeScreen;


about_me.js



import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';

class AboutMe extends Component {
render() {
return(
<View>
<Text>Hello</Text>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
};

export default AboutMe;


Any help would be appreciated.










share|improve this question

























  • react-navigation version?

    – Wainage
    Nov 19 '18 at 18:36











  • @Wainage it is 3x

    – squeekyDave
    Nov 19 '18 at 19:51














0












0








0








I am learning React Native and I am trying to implement page navigation, when I click the Explore button , I want to go to the About page. I followed a few guides but nothing so far.
The error I get is undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')*.



Here is the code:



index.js



/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);


App.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createStackNavigator, StackNavigator } from "react-navigation";
import HomeScreen from './pages/home_screen.js';
import AboutPage from './pages/about_me.js';



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });



const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
About: {
screen: AboutPage,
},
},
{
initialRouteName: 'Home',
}
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
render() {
return <AppContainer />;
}
}


home_screen.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import LocationIcon from 'react-native-vector-icons/Entypo';
import SocMediaIcons from 'react-native-vector-icons/AntDesign';
import { createStackNavigator, createAppContainer } from "react-navigation";




const locationIcon = (<LocationIcon name="location" size={30} color="#6600cc" />);
const linkedInIcon = (<SocMediaIcons name="linkedin-square" size={30} color="#6600cc" />);
const instagramIcon = (<SocMediaIcons name="instagram" size={30} color="#6600cc" />);
const facebookIcon = (<SocMediaIcons name="facebook-square" size={30} color="#6600cc" />);



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });

class HomeScreen extends Component{
render() {
return (
<LinearGradient
colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
style={styles.container}
>
<View style={styles.iconGrid}>
<View style={{width: 195}}>
<Text>{locationIcon} Mordor</Text>

</View>
<View style={{width: 70}} />
<View style={{width: 30}} >
{facebookIcon}
</View>
<View style={{width: 30 }} >
{instagramIcon}
</View>
<View style={{width: 30}} >
{linkedInIcon}
</View>
</View>

<TouchableHighlight
style ={{
height: 50,
shadowColor: 'red',
width:260,
borderRadius:30,
backgroundColor : "rgba(255, 255, 255, 0.3)",
marginLeft :50,
marginRight:50,
marginTop : 250
}}>
<Button onPress={()=> this.props.navigation.navigate('About')}
title="Explore"
accessibilityLabel="Explore Beautox"
/>
</TouchableHighlight>


</LinearGradient>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',

},
button : {
borderColor: 'red',
backgroundColor: 'rgba(255, 255, 255, 1.0)'
},
iconGrid: {
flexDirection: 'row',
marginTop: 350,
width: 350,
marginRight: 10
}
});

export default HomeScreen;


about_me.js



import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';

class AboutMe extends Component {
render() {
return(
<View>
<Text>Hello</Text>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
};

export default AboutMe;


Any help would be appreciated.










share|improve this question
















I am learning React Native and I am trying to implement page navigation, when I click the Explore button , I want to go to the About page. I followed a few guides but nothing so far.
The error I get is undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')*.



Here is the code:



index.js



/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);


App.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createStackNavigator, StackNavigator } from "react-navigation";
import HomeScreen from './pages/home_screen.js';
import AboutPage from './pages/about_me.js';



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });



const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
About: {
screen: AboutPage,
},
},
{
initialRouteName: 'Home',
}
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
render() {
return <AppContainer />;
}
}


home_screen.js



/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import LocationIcon from 'react-native-vector-icons/Entypo';
import SocMediaIcons from 'react-native-vector-icons/AntDesign';
import { createStackNavigator, createAppContainer } from "react-navigation";




const locationIcon = (<LocationIcon name="location" size={30} color="#6600cc" />);
const linkedInIcon = (<SocMediaIcons name="linkedin-square" size={30} color="#6600cc" />);
const instagramIcon = (<SocMediaIcons name="instagram" size={30} color="#6600cc" />);
const facebookIcon = (<SocMediaIcons name="facebook-square" size={30} color="#6600cc" />);



// const instructions = Platform.select({
// ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',
// android:
// 'Double tap R on your keyboard to reload,n' +
// 'Shake or press menu button for dev menu',
// });

class HomeScreen extends Component{
render() {
return (
<LinearGradient
colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
style={styles.container}
>
<View style={styles.iconGrid}>
<View style={{width: 195}}>
<Text>{locationIcon} Mordor</Text>

</View>
<View style={{width: 70}} />
<View style={{width: 30}} >
{facebookIcon}
</View>
<View style={{width: 30 }} >
{instagramIcon}
</View>
<View style={{width: 30}} >
{linkedInIcon}
</View>
</View>

<TouchableHighlight
style ={{
height: 50,
shadowColor: 'red',
width:260,
borderRadius:30,
backgroundColor : "rgba(255, 255, 255, 0.3)",
marginLeft :50,
marginRight:50,
marginTop : 250
}}>
<Button onPress={()=> this.props.navigation.navigate('About')}
title="Explore"
accessibilityLabel="Explore Beautox"
/>
</TouchableHighlight>


</LinearGradient>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',

},
button : {
borderColor: 'red',
backgroundColor: 'rgba(255, 255, 255, 1.0)'
},
iconGrid: {
flexDirection: 'row',
marginTop: 350,
width: 350,
marginRight: 10
}
});

export default HomeScreen;


about_me.js



import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';

class AboutMe extends Component {
render() {
return(
<View>
<Text>Hello</Text>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
};

export default AboutMe;


Any help would be appreciated.







javascript node.js react-native navigation react-native-navigation






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 19 '18 at 20:14







squeekyDave

















asked Nov 19 '18 at 17:06









squeekyDavesqueekyDave

416215




416215













  • react-navigation version?

    – Wainage
    Nov 19 '18 at 18:36











  • @Wainage it is 3x

    – squeekyDave
    Nov 19 '18 at 19:51



















  • react-navigation version?

    – Wainage
    Nov 19 '18 at 18:36











  • @Wainage it is 3x

    – squeekyDave
    Nov 19 '18 at 19:51

















react-navigation version?

– Wainage
Nov 19 '18 at 18:36





react-navigation version?

– Wainage
Nov 19 '18 at 18:36













@Wainage it is 3x

– squeekyDave
Nov 19 '18 at 19:51





@Wainage it is 3x

– squeekyDave
Nov 19 '18 at 19:51












2 Answers
2






active

oldest

votes


















0














Here's a minimalist 2 page v3 app. Check it out as an Expo Snack for all the code.



class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}

class AboutMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}

const AppScreens = createStackNavigator({
Home: Home,
About: AboutMe,
})

const App = createAppContainer(AppScreens);

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;





share|improve this answer
























  • I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

    – squeekyDave
    Nov 19 '18 at 20:35











  • Just create new files and export the component. I added an Info page in the snack

    – Wainage
    Nov 19 '18 at 20:41



















-1














I'm considering you're using react-navigation v3. And in the documentation, it is clearly mentioned that




Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.




So all you have to do is use the appContainer.



Example:



import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;





share|improve this answer
























  • After refactoring I am still getting an error.

    – squeekyDave
    Nov 19 '18 at 19:51











  • What changes have you made?

    – Siraj
    Nov 19 '18 at 19:52











  • I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

    – squeekyDave
    Nov 19 '18 at 20:05











  • Can you please edit your question with the updated codes?

    – Siraj
    Nov 19 '18 at 20:07











  • Edit made, please have a look, I am following the official docs and it doesn't make any sense.

    – squeekyDave
    Nov 19 '18 at 20:16











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379509%2freact-native-how-to-navigate-between-pages-error-undefined-is-not-a-functio%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Here's a minimalist 2 page v3 app. Check it out as an Expo Snack for all the code.



class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}

class AboutMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}

const AppScreens = createStackNavigator({
Home: Home,
About: AboutMe,
})

const App = createAppContainer(AppScreens);

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;





share|improve this answer
























  • I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

    – squeekyDave
    Nov 19 '18 at 20:35











  • Just create new files and export the component. I added an Info page in the snack

    – Wainage
    Nov 19 '18 at 20:41
















0














Here's a minimalist 2 page v3 app. Check it out as an Expo Snack for all the code.



class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}

class AboutMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}

const AppScreens = createStackNavigator({
Home: Home,
About: AboutMe,
})

const App = createAppContainer(AppScreens);

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;





share|improve this answer
























  • I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

    – squeekyDave
    Nov 19 '18 at 20:35











  • Just create new files and export the component. I added an Info page in the snack

    – Wainage
    Nov 19 '18 at 20:41














0












0








0







Here's a minimalist 2 page v3 app. Check it out as an Expo Snack for all the code.



class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}

class AboutMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}

const AppScreens = createStackNavigator({
Home: Home,
About: AboutMe,
})

const App = createAppContainer(AppScreens);

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;





share|improve this answer













Here's a minimalist 2 page v3 app. Check it out as an Expo Snack for all the code.



class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}

class AboutMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}

const AppScreens = createStackNavigator({
Home: Home,
About: AboutMe,
})

const App = createAppContainer(AppScreens);

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 19 '18 at 20:25









WainageWainage

1,4671517




1,4671517













  • I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

    – squeekyDave
    Nov 19 '18 at 20:35











  • Just create new files and export the component. I added an Info page in the snack

    – Wainage
    Nov 19 '18 at 20:41



















  • I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

    – squeekyDave
    Nov 19 '18 at 20:35











  • Just create new files and export the component. I added an Info page in the snack

    – Wainage
    Nov 19 '18 at 20:41

















I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

– squeekyDave
Nov 19 '18 at 20:35





I am trying to do the same, but I want my components to be in different files. Can you please refactor and show me how to do it? Kinda stuck, thank you.

– squeekyDave
Nov 19 '18 at 20:35













Just create new files and export the component. I added an Info page in the snack

– Wainage
Nov 19 '18 at 20:41





Just create new files and export the component. I added an Info page in the snack

– Wainage
Nov 19 '18 at 20:41













-1














I'm considering you're using react-navigation v3. And in the documentation, it is clearly mentioned that




Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.




So all you have to do is use the appContainer.



Example:



import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;





share|improve this answer
























  • After refactoring I am still getting an error.

    – squeekyDave
    Nov 19 '18 at 19:51











  • What changes have you made?

    – Siraj
    Nov 19 '18 at 19:52











  • I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

    – squeekyDave
    Nov 19 '18 at 20:05











  • Can you please edit your question with the updated codes?

    – Siraj
    Nov 19 '18 at 20:07











  • Edit made, please have a look, I am following the official docs and it doesn't make any sense.

    – squeekyDave
    Nov 19 '18 at 20:16
















-1














I'm considering you're using react-navigation v3. And in the documentation, it is clearly mentioned that




Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.




So all you have to do is use the appContainer.



Example:



import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;





share|improve this answer
























  • After refactoring I am still getting an error.

    – squeekyDave
    Nov 19 '18 at 19:51











  • What changes have you made?

    – Siraj
    Nov 19 '18 at 19:52











  • I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

    – squeekyDave
    Nov 19 '18 at 20:05











  • Can you please edit your question with the updated codes?

    – Siraj
    Nov 19 '18 at 20:07











  • Edit made, please have a look, I am following the official docs and it doesn't make any sense.

    – squeekyDave
    Nov 19 '18 at 20:16














-1












-1








-1







I'm considering you're using react-navigation v3. And in the documentation, it is clearly mentioned that




Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.




So all you have to do is use the appContainer.



Example:



import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;





share|improve this answer













I'm considering you're using react-navigation v3. And in the documentation, it is clearly mentioned that




Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.




So all you have to do is use the appContainer.



Example:



import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 19 '18 at 18:43









SirajSiraj

1,61311631




1,61311631













  • After refactoring I am still getting an error.

    – squeekyDave
    Nov 19 '18 at 19:51











  • What changes have you made?

    – Siraj
    Nov 19 '18 at 19:52











  • I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

    – squeekyDave
    Nov 19 '18 at 20:05











  • Can you please edit your question with the updated codes?

    – Siraj
    Nov 19 '18 at 20:07











  • Edit made, please have a look, I am following the official docs and it doesn't make any sense.

    – squeekyDave
    Nov 19 '18 at 20:16



















  • After refactoring I am still getting an error.

    – squeekyDave
    Nov 19 '18 at 19:51











  • What changes have you made?

    – Siraj
    Nov 19 '18 at 19:52











  • I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

    – squeekyDave
    Nov 19 '18 at 20:05











  • Can you please edit your question with the updated codes?

    – Siraj
    Nov 19 '18 at 20:07











  • Edit made, please have a look, I am following the official docs and it doesn't make any sense.

    – squeekyDave
    Nov 19 '18 at 20:16

















After refactoring I am still getting an error.

– squeekyDave
Nov 19 '18 at 19:51





After refactoring I am still getting an error.

– squeekyDave
Nov 19 '18 at 19:51













What changes have you made?

– Siraj
Nov 19 '18 at 19:52





What changes have you made?

– Siraj
Nov 19 '18 at 19:52













I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

– squeekyDave
Nov 19 '18 at 20:05





I did not downvote you, the change I mage was I have implemented in App.js I have replaced the code with the StackNavigator with your code and it still does not work.

– squeekyDave
Nov 19 '18 at 20:05













Can you please edit your question with the updated codes?

– Siraj
Nov 19 '18 at 20:07





Can you please edit your question with the updated codes?

– Siraj
Nov 19 '18 at 20:07













Edit made, please have a look, I am following the official docs and it doesn't make any sense.

– squeekyDave
Nov 19 '18 at 20:16





Edit made, please have a look, I am following the official docs and it doesn't make any sense.

– squeekyDave
Nov 19 '18 at 20:16


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379509%2freact-native-how-to-navigate-between-pages-error-undefined-is-not-a-functio%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()