Login Custom TextInput and Pressable not working after logout - react-native

Question

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.

Answer 1

I have solved and will answer my question 😅 thanks to #Kailash
const setModalData = (data) => {
setShowModal(data.bool)
if (data.bool) {
setShowModal(false)
props.navigation.navigate('Home')
}
}
I just added
setShowModal(false)
under
if (data.bool) {
in Login
The problem is I forgot to close the modal before navigating.

Answer 2

Looks like you have opened Modal but you haven't closed. So its causing this issue.
Reason: If you have used transparent modal and then click on navigate to other screen, in this case if the Modal is still opened, then you will see the new screen but you won't be able to click it, because of transparent modal.
In your case you should be setting your showModal state to false, once click on the label 'Yes, Log Out!'. And do the same for your Login Module as well, if not closed.