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:
Dont know what is wrong with this yet, does anyone know the solution? thx