React Native Navigation: navigate between screen (really need help)

Question

I'm new react native and i have a problem with react navigation. I don't know how to navigate to Screen1 from Home. Home includes 2 components from 2 js files. When run app, we start at Home with 2 components and from Home, we click on TouchableOpacity, then navigate to Screen1, but it's not working with my code below

file Home.js

import React, { Component } from 'react';
import { View } from 'react-native';
import Component1 from './Component1';
import Component2 from './Component2';

export default class Home extends Component {
render() {
    return (
        <View style={{flex: 1,justifyContent:'center', alignItems:'center'}}>
            <Component1 />
            <Component2 />
        </View>
    );
}
}

file Route.js

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';

import Home from './Home';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

export const HomeStack = createStackNavigator(
{
    Home_Screen: {
        screen: Home,
    },
    Screen_1: {
        screen: Screen1
    },
    Screen_2: {
        screen: Screen2
    }
}
)

file Component1.js

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

export default class Component1 extends Component {
render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <TouchableOpacity style={{ backgroundColor: 'blue' }}
               onPress={() => {this.props.navigation.navigate('Screen_1')}}> // it's not working
                <Text style={{ color: '#fff', padding: 10, fontSize: 15 }}>Go to Screen 1</Text>
            </TouchableOpacity>
        </View>
    );
}
}

file App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { HomeStack } from './Test/Route';


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

Ravi Raj · Accepted Answer · 2018-12-01 13:01:40Z

2

The issue is navigation prop is only available inside the screen components, not the sub/child components of the screen.

In your case this.props.navigation.navigate('Screen_1') will work from the Home screen. But not inside Component1 or Component2. If you want to use navigation prop inside them, you have to send it as a prop,

<Component1 navigation={this.props.navigation} />

Now you can access the navigation prop inside Component1

Hope it helps.

answered Dec 1, 2018 at 13:01

Ravi Raj

6,7672 gold badges32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nerdragen · Accepted Answer · 2018-12-02 02:32:07Z

0

To add to @RaviRaj answered, you can also use the withNavigation wrapper if your Screen is deeply nested. But in this case, if your screen component is only 1 or 2 layers deep, pass navigation as a prop!

answered Dec 2, 2018 at 2:32

Nerdragen

3,2102 gold badges15 silver badges25 bronze badges

1 Comment

NHT Over a year ago

thanks you for your advice. i want to ask about it too

Collectives™ on Stack Overflow

React Native Navigation: navigate between screen (really need help)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related