Tabnavigationnative

Material Bottom Tabs Navigator | React Navigation

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

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

import React from 'react'

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

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

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

import A1 from './A1';

import B1 from './B1';

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

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

export default function Nav() {

  

  //const Stack = createNativeStackNavigator();

  const Tab = createBottomTabNavigator();

  //  const navigation = useNavigation();

  

  // FIRST COMPONENT

  function A({navigation}){

    const onPressFunction=()=>{

      // alert('clicked');

      // console.log(navigation);

       navigation.navigate("About");

// navigation.push("About");

      //replace//push

    }

    return(

      <View>

        <Text>my home page is this</Text>

 <Pressable 

onPress={onPressFunction}

//  onPress={() => navigation.navigate("About")} 

      style={({ pressed }) => (

        {

          backgroundColor: pressed

            ? 'red'

            : 'white'

      })}

      >

  <Text style={styles.text} >Go To Next</Text>

</Pressable> 

      </View>

    )

  }

  

  //END OF fIRST COMPONENT

  function B({navigation}){

    const onPressFunction1=()=>{

      // alert('clicked');

      // console.log(navigation);

      //  navigation.navigate("Home");

navigation.goBack();

      //replace

    }

    return(

      <View>

        <Text>my about page </Text>

        <Pressable 

onPress={onPressFunction1}

//  onPress={() => navigation.navigate("About")} 

      style={({ pressed }) => (

        {

          backgroundColor: pressed

            ? 'red'

            : 'white'

      })}

      >

  <Text style={styles.text} >Go To previous</Text>

</Pressable>

      </View>

    )

  }

 

  return (

    <NavigationContainer>

      <Tab.Navigator

     // screenOptions={{ title: 'MyAPP' }}

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

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

        let iconName;

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

          iconName = focused

            ? 'ios-information-circle'

            : 'ios-information-circle-outline';

           size=focused?25:30; 

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

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

          size=focused?25:30; 

        }

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

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

      },

      tabBarActiveTintColor: 'tomato',

      tabBarInactiveTintColor: 'gray',

    })}

      >

      <Tab.Screen

          name="Home"

          component={A}

          // options={{ title: 'Home' }}

        />

        <Tab.Screen

          name="About"

          component={B}

          // options={{ title: 'About' }}

        />

      </Tab.Navigator>

          </NavigationContainer>

  )

}

const styles = StyleSheet.create({

  text:{

    fontSize:20,

    backgroundColor:'green',

    width:'40%',

    position: 'absolute', zIndex: 1 

  }

})