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

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

• javascript
• react-native
• button
• onpress

• Did you follow the react-navigation docs when setting up your app? You have to wrap your app in the app container and create a stack that includes both screens. If you have done that elsewhere please include that code. Otherwise you can refer to the docs to get your project set up – Abe Commented Nov 18, 2021 at 19:29
• What is the problem that you get? – jted95 Commented Nov 18, 2021 at 19:31
• you whole implementation is wrong some of your imports are from react native navigation versions 5 and 4 --- please read more about it and follow it reactnavigation/docs/getting-started – Abd Commented Nov 18, 2021 at 20:01

1 Answer 1

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" ponent={ScreenOne} />
        <Stack.Screen name="ScreenTwo" ponent={ScreenTwo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;