0

I'm trying using react-navigation/native version 6.0.13, I have installed all the packages required to make it work and when implemented the code for navigation, simply doesn't work

here's the code:

./App.js

import type {Node} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Home from './src/routes/Home';
import {
    View, Text
} from 'react-native';
import Stacknav from './src/navigation/Stacknav';


const App: () => Node = () => {
    return (
        <NavigationContainer>
            <Stacknav/>
        </NavigationContainer>
    );
}

export default App;

./src/navigation/Stacknav.js

import React, { Component } from 'react';
import { create } from '@react-navigation/native-stack';
import Home from '../routes/Home';
import SecondHome from '../routes/SecondHome';

const Stack = createStackNavigator()

export default class Stacknav extends Component {
    render() {
        return (
            <Stack.Navigator>
                <Stack.Screen name="Home" component={Home} />
                <Stack.Screen name="SecondHome" component={SecondHome} />
            </Stack.Navigator>
        )
    }
}

./src/routes/Home.js

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

class Home extends Component {

  render() {
    return (
      <View>
        <Text>Screen 1</Text>
        <Button onPress={() => this.props.navigation.navigate('SecondHome') } title="Navigate to other window"></Button>
      </View>
    )
  }
}

export default Home;

./src/routes/SecondHome.js

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

class SecondHome extends Component {

  render() {
    return (
      <View>
        <Text>Screen 2{'\n'}DONE!!!</Text>
      </View>
    )
  }
}

export default SecondHome;

Yet, the app only shows a blank screen, as follows:

enter image description here

Dont know what is wrong with this yet, does anyone know the solution? thx

0 Answers0