skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    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.


  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search