Go to a page on another file in React Navigation (React Native)

Question

I have two files. App.js and newPage.js. I'm trying to get to a page on newPage.js from App.js. I'm completely new to React native so I'm having a bit of trouble getting this to work.

App.js

import React from 'react';
import { StyleSheet, Text, FlatList, View, Button, TextInput, TouchableOpacity } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import NewPage from './src/newPage';

export default class App extends React.Component {
   navigateToNew = () => {
       this.props.navigation.navigate('NewPage');
   }
   render() {
     const { navigate } = this.props.navigation;
     return (
      <View>
         <Text>Home Screen</Text>
         <Button
            title="New Page"
            onPress={ this.navigateToNew }
         />
      </View>
   );
 }
}

newPage.js

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

export default class NewPage extends React.Component {
   render() {
      return (
        <View>
            <Text>New Screen</Text>
        </View>
      );
    }
 }

I'm not sure why this isn't working. Any help would be awesome!

EDIT: I am using React Navigation

Possible duplicate of [redirect using react router](https://stackoverflow.com/questions/44118263/redirect-using-react-router) — michaelitoh, Sep 01 '18 at 00:30
Unless i'm missing something. I'm pretty sure im using React Navigation instead of react router. If react router could achieve the same result in React Native i would be open to check it out however. — Frost Zone, Sep 01 '18 at 00:39

score 1 · Accepted Answer · answered Sep 01 '18 at 00:44

1

You need to set the alternatives you can go first.

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    newscreen: newPage
  },
});

and return RootStack in App class. The code that provides navigation is

this.props.navigation.navigate('ComponentName')

If you run this code with onClick, the navigation process happens. But dont forget, RootStack must be created.

answered Sep 01 '18 at 00:44

Cem Bakca

26
1

Thank you! I can't believe i made such a mistake! Thanks for the help! – Frost Zone Sep 01 '18 at 02:01

score 0 · Answer 2 · answered Jan 28 '20 at 12:33

App.js

import React from 'react'; import { StyleSheet } from 'react-native'; import {createAppContainer } from 'react-navigation'; import SafeAreaView from 'react-native-safe-area-view'; import { createStackNavigator } from 'react-navigation-stack'; import ThankPage from './ThankPage';

const RootStack = createStackNavigator({ Home: { Home: HomeScreen, Thank: ThankPage }, });
 const AppContainer = createAppContainer(RootStack);
 const [username, setUsername] = React.useState('');
 const [password, setPassword] = React.useState('');

  class HomeScreen extends React.Component {   navigateToNew = () => {
this.props.navigation.navigate('ThankPage'); }  render() {
 const onbtnPress = () =>{
alert("Thank you")  }
return (
<SafeAreaView>
<View style={styles.container}>

  <Image
  source = {require('./login_img.png')}
  style = {{ width: 350, height: 150 }} />

      <ImageBackground style={styles.imgback}
        source = {require('./login_back.png')}
        style = {{ width: 340, height: 250 }}>

          <View style={styles.SectionStyle}>
          <TextInput
            style={{ height: 20,borderColor: 'gray' }}
            value={username}
            onChangeText={username =>setUsername(username)}
            placeholder={"Username"}
            underlineColorAndroid="transparent"
            />
            </View>
            <View style={styles.SectionStyle}>
          <TextInput
            style={{ height: 20,borderColor: 'gray' }}
            onChangeText={password => setPassword(password)}
            value={password}
            placeholder={"Password"}
            underlineColorAndroid="transparent"
            secureTextEntry={true}
            inlineImageLeft="./eye_close_icon.imageset/eye_close_icon.png"
            />
            <Image source={require('./eye_close_icon.imageset/eye_close_icon.png')}
style={styles.ImageStyle} />
   <TouchableOpacity 

   onPress={ this.navigateToNew }
   >
      <Image source={require('./btn_back.png')} style={styles.imgbtnok} />
      <Text style={styles.white }>Submit & SYNC</Text>
    </TouchableOpacity>

</View>
</SafeAreaView>   ); }   }
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'grey', alignItems: 'center', justifyContent: 'center', margin:10, }, SectionStyle: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: .5, borderColor: '#000', height: 40, borderRadius: 5 , margin: 25 }, imgback: { opacity:1, }, ImageStyle: { height: 25, width: 25, resizeMode : 'stretch', }, white: { // Define your HEX color code here. color: '#FFFFFF', marginLeft:135, marginTop:-55, }, imgbtnok: { height: 80, width: 130, marginLeft: 120, position: 'relative', resizeMode : 'stretch', }, });

export default class App extends React.Component {

render() {
return ; } }

I tried to understand a lot but getting errors.myError

Go to a page on another file in React Navigation (React Native)

2 Answers2