I'm new to React Native. I need that if I click on a button, a new page appears. I already tried a few things but maybe the problem is somewhere else. I will paste my code underneath. Please help me :)
Further explanation: I want to click on the button and then it should go to another page.
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
Linking,
Button
} from "react-native";
import { useNavigation } from '@react-navigation/native';
import "react-native-gesture-handler";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<View style={styles.container}>
<Image style={styles.image} source={require("./assets/logo.png")} />
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Benutzername"
onChangeText={(email) => setEmail(email)}
/>
</View>
<Button
style={styles.loginBtn}
title="Go to Profile"
onPress={() => this.props.navigation.navigate('Profile')}
/>
</View>
);
}
```
Might be this helpful to you:
MyNavigation Version
@react-navigation/native": "^5.9.8"
@react-navigation/stack": "^5.14.9"
Example
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
//Navigation import
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
//Screen One
const ScreenOne = props => {
//onPress To Navigate
const onPress = () => {
props.navigation.navigate('ScreenTwo');
};
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity onPress={onPress}>
<Text>Hello From Screen One</Text>
</TouchableOpacity>
</View>
);
};
//Screen Two
const ScreenTwo = () => {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Screen Two</Text>
</View>
);
};
const App = () => {
//const
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="ScreenOne" component={ScreenOne} />
<Stack.Screen name="ScreenTwo" component={ScreenTwo} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;