I have a problem in navigation lifecycle, which when I navigate from screen to other the last one doesn't stay focus and quickly re navigate to the previous screen. Please if anyone can help me.
This is my AuthStack.tsx file :
import React, { useState, useEffect, useContext } from 'react'
import { createStackNavigator } from "@react-navigation/stack";
import { Text, Button } from 'react-native';
import { Center } from './Center';
import { AuthParamList, AuthNavProps } from "./AuthParamList.ts";
import { AuthContext } from "./AuthProvider";
import { SplashScreen } from "./splashes/SplashScreen";
import {LoginScreen} from './authentificationScreens/LoginScreen'
import {RegisterScreen} from './authentificationScreens/RegisterScreen'
interface AuthStackProps {
}
const Stack = createStackNavigator<AuthParamList>();
export const AuthStack: React.FC<AuthStackProps> = ({}) => {
return (
<Stack.Navigator
screenOptions={{
header: () => {null}
}}
initialRouteName="SplashScreen"
>
<Stack.Screen
options={{ headerShown: false }}
name='SplashScreen'
component={SplashScreen}
/>
<Stack.Screen
name='LoginScreen'
component={LoginScreen}
/>
<Stack.Screen
name='RegisterScreen'
component={RegisterScreen}
/>
</Stack.Navigator>
);
}
and this is the Login Screen :
import React, { useState, useContext, useEffect } from 'react'
import { View, Text, ScrollView, ImageBackground , Dimensions, StyleSheet, Pressable } from 'react-native';
import { Input, ListItem, CheckBox, Button, Switch } from 'react-native-elements';
import { LinearGradient } from 'expo-linear-gradient';
import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";
import { AuthContext } from "../AuthProvider";
import Ionicons from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';
import { EventRegister } from "react-native-event-listeners";
import BgGigaFit from "../../assets/background.jpg";
import GigaFitLogo from '../../assets/GigaFitLogo1.png'
interface LoginScreenProps {}
export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation, route }: AuthNavProps<"LoginScreen">) => {
const {login} = useContext(AuthContext);
const [darkMode, setDarkMode] = useState(false);
return (
<ScrollView
style={{flex: 1, backgroundColor: 'darkgray'}}
showsVerticalScrollIndicator={false}
>
<ImageBackground
source={BgGigaFit}
style={{
height: Dimensions.get('window').height / 2.5,
}}
>
{/* <View style={styles.SwitchDarkTheme}>
<ListItem style={styles.SwitchDarkTheme}>
<Switch value={false} color="#52c234"/>
</ListItem>
</View> */}
<View style={styles.brandView}>
{/* <Icon type="FontAwesome" name="home" style={{color: '#ffffff', fontSize: 100}} /> */}
<Ionicons name="md-barbell-outline" size={50} color="#52c234" />
<Animatable.Image
animation="fadeIn"
duration= {4000}
source={GigaFitLogo}
style={styles.logo}
resizeMode="stretch"
/>
</View>
</ImageBackground>
{/*Bottom View*/}
<View style={styles.bottomView}>
{/*Welcome View */}
{/* <View style={styles.SwitchDarkTheme}>
<ListItem>
<Switch value={darkMode} color="#52c234"
onValueChange= {(val) => {
setDarkMode(val);
EventRegister.emit('changeThemeEvent', val)
}}
/>
</ListItem>
</View> */}
<View style={{padding: 40}}>
<Text style={{color: '#52c234', fontSize: 34}}>Welcome</Text>
<Text>Don't have an account yet !!!
<Text onPress={()=> navigation.navigate('RegisterScreen')} style={{color: '#52c234', fontStyle: 'italic'}}>Register Now</Text>
</Text>
{/**Form Inputs View */}
<View style={{marginTop: 50}}>
<Input
placeholder="Email"
rightIcon={<Ionicons name="md-checkmark-done-sharp" size={20} color="#52c234" />}
/>
<Input
placeholder="Password"
rightIcon={<Ionicons name="ios-eye" size={20} color="#52c234" />}
/>
{/**Forgot Password and create new view */}
<View style={styles.forgotPasswordView}>
<View style={{flex: 1, marginTop:-10, marginLeft: -30}}>
<ListItem noBorder>
<CheckBox checked={true} checkedColor="#52c234"/>
<ListItem.Content style={{marginLeft: -35}}>
<Text style={{color: "#52c234"}}>
Remember Me
</Text>
</ListItem.Content>
</ListItem>
</View>
<View style={{flex: 1, marginTop:-3, marginRight: -150}}>
<ListItem noBorder>
<ListItem.Content style={{marginLeft: -40}}>
<Text style={{color: "#52c234"}}>
Forgot Password
</Text>
</ListItem.Content>
</ListItem>
</View>
</View>
{/**Login Button */}
<View style={{height: 100, justifyContent: 'center', alignItems: 'center'}}>
{/* <Button type="Solid" rounded buttonStyle={styles.loginButton}>
<Text style={{color: "#ffffff"}}>Login</Text>
</Button> */}
<Button
icon={
<Ionicons name="md-checkmark-circle-outline" size={20} color="#ffffff" />
}
// title="Login"
type="Outline"
buttonStyle={styles.loginButton}
onPress={() => login()}
/>
</View>
</View>
</View>
</View>
</ScrollView>
);
}
and this is the Register Screen :
import React, { useContext, useEffect } from 'react'
import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";
import { Center } from './../Center';
import { Text, Button } from 'react-native';
interface RegisterScreenProps {}
export const RegisterScreen: React.FC<RegisterScreenProps> = ({ navigation, route }: AuthNavProps<"RegisterScreen">) => {
// useEffect(() => {
// const unsubscribe = navigation.addListener('focus', () => {
// --------------------------------------
// });
// return unsubscribe;
// }, [navigation]);
return (
<Center>
<Text>I am a Register Screen</Text>
<Button title="go to login" onPress={() => {
navigation.navigate('LoginScreen');
// navigation.goBack()
}} />
</Center>
);
}
My Problem is when I navigate from the Login Screen to the Register Screen it just show for a moment and re navigate it self quickly to the login Screen.
