navigation native stacknavigator

 import { StatusBar } from 'expo-status-bar';

import { Pressable, StyleSheet, Text, View } from 'react-native';

import First from './componetns/screens/First';

import Fourth from './componetns/screens/Fourth';

import Second from './componetns/screens/Second';

import Thired from './componetns/screens/Thired';

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function ScreenA({navigation}){

  const onPressFunction=()=>{

    navigation.navigate("Screen_B");

  }

  return(

    <View>

      <Text>

        Hello

      </Text>

      <Pressable

      onPress={onPressFunction}

      style={({pressed})=>({backgroundColor:pressed?'red':'green'})}

      >

        <Text >next</Text>

      </Pressable>

    </View>

  )

}

function ScreenB(){

  return(

    <View>

      <Text>

        Hello

      </Text>

    </View>

  )

}

export default function App() {

  

  return (

    // <View>

    //   <Text>good morning</Text>

    // </View>

    <NavigationContainer>

     <Stack.Navigator>

        <Stack.Screen name="Screen_A"

        component={ScreenA}

        />

        <Stack.Screen name="Screen_B"

        component={ScreenB}

        />

      </Stack.Navigator>

    </NavigationContainer>

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

      // {/* <Fourth/> */}

      // {/* <Thired/> */}

      // {/* <Second/> */}

      // {/* <First/> */}

      // {/* <Text style={styles.item}>hello student</Text> */}

      // {/* <Text style={styles.item}> good morning</Text>

      // <StatusBar style="auto" /> */}

    // </View>

  );

}

const styles = StyleSheet.create({

  container: {

  // justifyContent:'flex-end',//vertical direction

//alignContent:'flex-end',

    flex: 1,

    // width:300,

    // height:300,

    backgroundColor: 'gray',

    marginTop:30,

    marginLeft:2,

    // paddingLeft:10,

    borderWidth: 5,

    // alignItems: 'center',

    // justifyContent: 'center',

  },

  item:{

    color:'blue',

    fontStyle:'italic',

    fontWeight:'bold'

  }

});