My React native app is going back to splash screen whenever i press a button with navigation function

Question

I have made a splash screen by just placing an image and a setInterval() function, after that interval i have added the statement to navigate to login screen(navigation.navigate('loginScreen'), on login screen on a button(Signup button) i have added the fonPress() to navigate to signup screen(navigation.navigate('SignupScreen'). it works and the app goes to signup screen but the same setinterval function runs again and screen automatically navigates to login page again. ///////////////////////// App.js /////////////////////////////////

import 'react-native-gesture-handler';
import React from 'react';
import  SplashScreen  from './app/screens/splash.screen';
import  LoginScreen  from './app/screens/login.screen';  
import  SignupScreen  from './app/screens/signup.screen';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  ImageBackground,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Header } from 'react-native/Libraries/NewAppScreen';

const Stack = createStackNavigator();




const App = () => {
  return (
    <NavigationContainer>

        <Stack.Navigator initialRouteName="SplashScreen" headerMode='none'  >
        
            <Stack.Screen name="SplashScreen" component={SplashScreen}  />
            <Stack.Screen name="LoginScreen" component={LoginScreen} />
            <Stack.Screen name="SignupScreen" component={SignupScreen}/>
        
        </Stack.Navigator>

    </NavigationContainer>
  );
};
const styles = StyleSheet.create({


});

export default App;

//////////////////////splash screen code///////////////////

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image,
    ImageBackground,
    Button,
  } from 'react-native';





  function SplashScreen({ navigation }) {
      //method to give splash screen effect ,screen navigates to next screen after 9000 milliseconds
      
        setInterval(() => { navigation.navigate('LoginScreen')}, 9000);} 
    
     
    
    return (
        <View style={styles.bod} >
    
         <Text>{kaka}</Text>
        <Image source={require("../../Images/ss1.jpg")}  style={{flex:1,width:null, height: null}}/> 
        
       </View>
    );
  }



//   const SplashScreen = () => {
//     return (
//       <View style={styles.bod}>
      
      
//        <Image source={require("../../Images/ss1.jpg")}  style={{width: '100%', height: '100%'}}/> 
//   <Button 
//           title="Go to Details"
//           onPress={() => navigation.navigate('LoginScreen')}
//         />
//       </View>
//     );
//   };
  const styles = StyleSheet.create({
  
    bod : {
        flex:1,
    },
  
    img:{
    
    
    }
  
  });
  export default SplashScreen;

///////////Login Screen code//////////////////////

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image,
    ImageBackground,
    Button,
  } from 'react-native';
import { greaterThan } from 'react-native-reanimated';
import { TextInput } from 'react-native-gesture-handler';



  function LoginScreen({ navigation }) {
    return (
  
    <View style={styles.grandparent}>

            <View style={styles.welcom} >
                <Text style={{color:'white',fontSize:35,fontFamily: "sans-serif-thin"}}>Welcome to CAWN!</Text>
         
            </View>

            <View style={styles.logo}>
               <Image source={require("../../Images/logo2.png")}  style={{width:'100%',height:'100%'}}/>
            </View>

            <View style={styles.mainlogin}>
                    <View style={styles.loginChild1}>
                        <Text style={{color:'white',fontSize:28,fontFamily:"sans-serif",paddingTop:4,}}>Member Sign In!</Text>
                        {/* <Image source={require("../../Images/user.png")}  style={{width:'100%',height:'100%'}}/>  */}
                    </View>
                <View style={styles.fieldsMain}>
                    <View style={styles.userDiv}>
                        
                            <View style={{flex: 1.5,width: 100,height: 53}}>
                                 <Image source={require("../../Images/user.png")}  style={{width:'100%',height:'100%'}}/> 
                            </View>
                            <View style={{ flex: 5, width: 100,paddingLeft:4,}}>
                                <TextInput style={{ height: 48,backgroundColor:'white' }}></TextInput>
                            </View>

                    </View>
                    <View style={styles.psDiv}>

                            <View style={{flex: 1.5,width: 100,height: 53}}>
                                 <Image source={require("../../Images/password1.png")}  style={{width:'100%',height:'100%'}}/> 
                            </View>
                            <View style={{ flex: 5, width: 100,paddingLeft:4,}}>
                                <TextInput style={{ height: 48,backgroundColor:'white', }}></TextInput>
                            </View>

                    </View>
                    <View style={{flex:0.3,}}></View>
                </View>
                <View style={styles.loginLastRow}>
                    <View style={styles.loginLastRowChild1}>
                        <Button title="Log in" color="#31b9eb" onPress={() => Alert.alert('Simple Button pressed')} />
                    </View>
                    <View style={styles.loginLastRowChild2}>
                        <View style={{paddingBottom:4,}}>
                            <Text style={{color:'white',fontSize:25,fontFamily: "sans-serif-thin",}}>Not a Member yet?</Text>
                        </View>
                      
                          <Button title="Sign Up" color="#31b9eb" onPress={() =>  navigation.navigate('SignupScreen')} />
                        
                    </View>
                </View>
            </View>
        <View style={styles.lastSpace} />
      </View>
    
    );
  }




  const styles = StyleSheet.create({
  
    grandparent : {
        flex: 1,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center',
        paddingHorizontal: 20,
        paddingBottom: 30,
        flexWrap: 'wrap',

        //added by MFU
        paddingTop:10,
        backgroundColor:'#c3c8ed',
        // borderWidth:1,
        // borderColor:'red',
    },
    welcom : {
        flex: 0.6,
        width: '100%',
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        alignContent: 'center',

         // added by mfu
        
        // borderWidth:1,
        // borderColor:'green',
    },
    logo : {
        flex: 1.9,
         width: 250,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        alignContent: 'center',

        // added by mfu
        paddingTop:6,

        // borderWidth:1,
        // borderColor:'blue',
    },
    mainlogin : {
        flex: 3.5,
        width: 300,
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        alignContent: 'center',

        // borderWidth:3,
        // borderColor:'black',
    },
    loginChild1 : {
        flex: 0.4,
        width: '100%',
        height: 100,
        flexWrap: 'wrap',
        
        //added by MFU
        alignItems: 'center',
        alignContent: 'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    fieldsMain : {
        flex: 1.2,
        width: '100%',
        height: 100,

        //added by mfu
        alignItems: 'center',   
        // borderWidth:1,
        // borderColor:'blue',
    },
    userDiv : {
        flex: 1,
        width: '80%',
        // height: '100%',
  //added by mfu
        // borderWidth:1,
        // borderColor:'green',
        flexDirection: 'row',
       
    },
    psDiv : {
        flex: 1,
        width: '80%',
        
        // height: 100,
//added by mfu
        // borderWidth:1,
        // borderColor:'pink',
        flexDirection: 'row',
      

    },
    loginLastRow : {
        flex: 1,
        width: '80%',
        height: 100,

           //added by mfu
        // borderWidth:1,
        // borderColor:'purple',
    },
    loginLastRowChild1 : {
        flex: 1,
        width: 100,
        height: 100,

        // borderWidth:1,
        // borderColor:'red',
    },
    loginLastRowChild2 : {
        flex: 1,
        width: '100%',
        height: 100,

        // borderWidth:1,
        // borderColor:'green',
        
    },
    lastSpace : {
        flex: 0.5,
        width: 250,
        height: 100,

        // borderWidth:1,
        // borderColor:'green',
    },
  });

  export default LoginScreen;

Answer 1

setInterval runs the code repeatedly at the interval provided. I think you might want setTimeout (which will run just once)