I want to go to the next page after logging in to my react-native project, but I'm doing it wrong somewhere. Formcomponent does not function as onPress in any way. What is the reason?

import React, {useState} from 'react';
import {View, Text, TextInput, TouchableOpacity, Image} from 'react-native';

import {login_screen} from '../styles/page_style';


import Home from 'healthyrace/src/pages/Home.js';

function FormComponent({setEmail, setPassword, onButtonText,props,onPress}){
  
  const [isShowing, setShowing] = useState(false) ;
  

  return (
    <View>
      <Image source={require('../assets/healthyrace.png')} style={login_screen.logo}/>
      <TextInput
        style={login_screen.TextInputStyle}
        placeholder="E-Posta"
        keyboardType="email-address"
        placeholderTextColor="black"
        onChangeText={(email) => setEmail(email)}></TextInput>

      <View style={login_screen.TextInputStyle}>
        <TextInput
          placeholder="Şifre"
          placeholderTextColor="black"
          secureTextEntry={isShowing ? false : true}
          onChangeText={(password) => setPassword(password)}
          style={{flex: 1}}></TextInput>
        
      </View>

      <TouchableOpacity  style={login_screen.button} onPress={() => props.navigation.navigate('Home')}
>
        <Text style={login_screen.buttonText}>{onButtonText}</Text>
      </TouchableOpacity>
        
    </View>
  );
  }

export {FormComponent};

this page is my SignIn page

import React, {useState, useEffect} from 'react';
import {
  ScrollView,
  View,
  KeyboardAvoidingView,
  TouchableOpacity,
  Text,
  Alert,
} from 'react-native';
import {login_screen} from '../styles/page_style';
import {FormComponent} from '../components';


import Home from 'healthyrace/src/pages/Home.js';


import auth from '@react-native-firebase/auth';

function SignIn(props) {
  const [UserEmail, setUserEmail] = useState('');
  const [UserPassword, setUserPassword] = useState('');

  const __signIn = async () => {
    try {
      let response = await auth().signInWithEmailAndPassword(
        UserEmail,
        UserPassword,
      );
      if (response) {
        console.log(response);
        Alert.alert('Başarıyla giriş yaptınız');
      }
    } catch (e) {
      console.error(e.message);
    }
  };

  return (
    <ScrollView>
      <KeyboardAvoidingView
        style={login_screen.keyboard_view}
        keyboardVerticalOffset={10}
        behavior={'position'}>
        <View style={login_screen.container}>
          <View style={login_screen.box}>
            <FormComponent
              setEmail={(email) => setUserEmail(email)}
              setPassword={(password) => setUserPassword(password)}
              onButtonText="Giriş Yap"
              onPress={() => props.navigation.navigate('Home')}
               
            />

            <TouchableOpacity
              style={login_screen.navButton}
              onPress={() => props.navigation.navigate('SignUp')}>
              <Text style={login_screen.navButtonText}>
                Yeni Hesap Oluştur
              </Text>
            </TouchableOpacity>
            
          </View>
        </View>
      </KeyboardAvoidingView>
    </ScrollView>
  );
}
export  {SignIn};

and Routes.js,

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {SignUp, SignIn} from './pages';
import Home from '/Users/Cans/Desktop/healthy_race/healthyrace/src/pages/Home.js';

const Stack = createStackNavigator();

function Routes() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName ={"SignIn"}>
        <Stack.Screen name="SignIn" component={SignIn} />
        <Stack.Screen name="SignUp" component={SignUp} />
        <Stack.Screen name="Home" component={Home}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Routes;

What is the way for me to switch from home page to home page? SignIn, SignUp and Home are in the same folder. Thank you in advance

CodePudding user response：

You just need to attach onPress callback in FormComponent. Currently you have onPress as prop but you are not using it anywhere. Edit your FormComponent's TouchableOpacity Component as below

<TouchableOpacity  style={login_screen.button} onPress={onPress}>
    <Text style={login_screen.buttonText}>{onButtonText}</Text>
  </TouchableOpacity>