CODEWITHSUNDEEP
react-native
NHT
NHT

Reputation: 13

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

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/>
    );
  }
}

Upvotes: 0

Views: 247

Answers (2)

Nerdragen
Nerdragen

Reputation: 3174

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!

Upvotes: 0

Ravi Raj
Ravi Raj

Reputation: 6677

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.

Upvotes: 2

Related Questions