This is my Navigation

import React from 'react'

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import { Login } from '../views/Login'
import { Home } from '../views/modules/Home'


const Stack = createNativeStackNavigator();

const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export { Navigation }

This is my Login

import React, { useState, useRef, } from 'react'
import { View, StyleSheet, Alert } from 'react-native'
import FormData from 'form-data'
import { CustomInput } from '../components/CustomInput'
import { CustomButton } from '../components/CustomButton'
import { CustomModalAlert } from '../components/CustomModalAlert'
import { useNavigation } from '@react-navigation/native'

const Login = () => {
    const navigation = useNavigation() 
    const [showModal, setShowModal] = useState(false) 
    const [code, setCode] = useState("") 
    const setModalData = (data) => { 
        setShowModal(data.bool) 
        if (data.bool) { 
            navigation.navigate('Home') 
        } 
    }

    const submitLoginForm = () => {
        var data = new FormData();
        data.append("code", code);
        fetch("http://192.168.3.200/mobile_login/api", { 
            method  : 'POST', 
            headers : { 
                'Accept': 'application/json', 
                'Content-Type': 'multipart/form-data', 
            }, 
            body    : data, 
        }) 
        .then((res)=>res.json()) 
        .then((res)=>{ 
            if (res.success == 1) { 
                setShowModal(true)
            } else { 
                Alert.alert(
                    "Opps!",
                    res.message,
                    [{ text: "OK" }]
                )
            } 
        }) 
        .catch((err) => {
            Alert.alert(
                "Network Error!",
                "Please check your internet connection",
                [{ text: "OK" }]
            )
        })

    }

    return (
        <View style={styles.container}> 
            <CustomInput 
                placeholder='Code'
                autoFocus={true} 
                value={code} 
                onChangeText={(code) => setCode(code)}
            />
            <CustomButton 
                text={'LOG IN'} 
                onPress={() => submitLoginForm()}
            />
            <CustomModalAlert 
                setData={setModalData} 
                showModal={showModal} 
                title={'Confirmation'}
                text={'Go to Home?'}
                cancelButtonLabel={'Cancel'}
                confirmButtonLabel={'Confirm'}
            /> 
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        justifyContent: 'center', 
        alignItems: 'center', 
    }, 
})

export { Login }

This is Home

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'
import { useNavigation } from '@react-navigation/native'
import { CustomModalAlert } from '../../components/CustomModalAlert'
import { CustomFloatingLogout } from '../../components/CustomFloatingLogout'

const Home = () => {

    const [showModal, setShowModal] = useState(false) 
    const navigation = useNavigation() 
    const logout = () => {
        setShowModal(true)
    }
    const setModalData = (data) => { 
        setShowModal(data.bool) 
        if (data.bool) { 
            navigation.navigate('Login') 
        } 
    }

    return (
        <View style={styles.container}>
            <Text><Icon name="person" size={30} /></Text>
            <Text>Home</Text>
            <CustomFloatingLogout onPress={() => logout()} />
            <CustomModalAlert 
                setData={setModalData} 
                showModal={showModal} 
                title={'Logout?'}
                text={'Go to Home?'}
                cancelButtonLabel={'Cancel'}
                confirmButtonLabel={'Yes, Log Out!'}
            /> 
        </View>
    )
}

const styles = StyleSheet.create({ container: { flex: 1, }, })

export { Home }

Login View Home View

When I click the login button in Login View then Ok the popup modal, it goes to the Home View and the homes floating button is working then when I click the Home View floating button to logout it goes to Login View but the TextInput and Button is not working

The question is how can I make TextInput and Button work?

Sorry, I'm new in react-native. Thanks for help.

CodePudding user response：

I have solved and will answer my question