tabnavigation3

 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';

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

import Ionicons from 'react-native-vector-icons/Ionicons';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//const Stack = createNativeStackNavigator();

const Tab = createBottomTabNavigator();

function ScreenA({navigation}){

  const onPressFunction=()=>{

navigation.navigate("Screen_B");

  }

  return(

    <View>

      <Text>

        Hello

      </Text>

      <Pressable onPress={onPressFunction}

      

      style={({ pressed }) => (

        {

          backgroundColor: pressed

            ? 'red'

            : 'white'

      })}>

        <Text>Next</Text>

      </Pressable>

    </View>

  )

}

function ScreenB({navigation}){

  const onPressFunction1=()=>{

    // navigation.navigate("Screen_A");

    navigation.goBack();

      }

  return(

    <View>

      <Text>

        good morning

      </Text>

      <Pressable onPress={onPressFunction1}

      

      style={({ pressed }) => (

        {

          backgroundColor: pressed

            ? 'red'

            : 'white'

      })}>

        <Text>Back</Text>

      </Pressable>

    </View>

  )

}

export default function App() {

  

  return (

    // <View>

    //   <Text>good morning</Text>

    // </View>

    <NavigationContainer>

     <Tab.Navigator

    screenOptions={({ route }) => ({

      tabBarIcon: ({ focused, color, size }) => {

        let iconName;

        

        if (route.name === 'Screen_A') {

          iconName = focused

            ? 'arrow-forward-circle'

            : 'arrow-back-circle';

            size=focused?45:20;

            color=focused?'red':'blue';

        } else if (route.name === 'Screen_B') {

          iconName = focused ? 'ios-list' : 'ios-list-outline';

          size=focused?55:40;

          color=focused?'red':'blue';

        }

        // You can return any component that you like here!

        return <Ionicons name={iconName} size={size} color={color} />;

      },

      tabBarActiveTintColor: 'tomato',

      tabBarInactiveTintColor: 'gray',

    })}

    tabBarOptions={{

      showLabel:false

    }}>

    

     {/* screenOptions={{ */}

     {/* header:()=>null */}

     {/* }}> */}

        <Tab.Screen name="Screen_A"

        component={ScreenA}

        options={{ tabBarBadge: 3 }}

        />

    

        <Tab.Screen name="Screen_B"

        component={ScreenB}

        />

      </Tab.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'

  }

});