CODEWITHSUNDEEP
iosreact-nativereact-navigation
Mayur Prajapati - MeProgrammer
Mayur Prajapati - MeProgrammer

Reputation: 5602

React Navigation from 1 page to another not working

I am using React native for Developing multi page application for iOS & Android.

I have used React Navigation for navigating from 1 page to another. But somehow its not working & give error message.

Here is what I have done so far.

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';

const AppNavigator = StackNavigator({
  SettingScreen: { screen: Settings },
  HomeScreen: { screen: Home }
});

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

Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export class Home extends Component {
  render() {
    return (
      <View>
        <Text>This is the home screen</Text>
      </View>
    )
  }
}

export default Home

Settings.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>
        <Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
      </View>
    )
  }
};

export default Settings;

Here is how I am getting error message :

enter image description here

Any help or hints will be highly appreciated.

Note :

Upvotes: 0

Views: 247

Answers (1)

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

for version > 3 of react navigation, you can confige router like this:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';

const AppNavigator = createStackNavigator({
  SettingScreen: { screen: Settings },
  HomeScreen: { screen: Home }
});

export default createAppContainer(AppNavigator);

Also you can read the documentation here I hope this can help you.

Upvotes: 2

Related Questions