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 }
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.
2
Answers
I have solved and will answer my question 😅 thanks to @Kailash
I just added
under
in Login
The problem is I forgot to close the modal before navigating.
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.