React native Navigation bottom bar with plus bottom

you make custom bottom navigation bar
take one view and inside that you take touchableOpacity buttons in row
and use tool tip for pop on button
like here showing

i share you sample not exactly your deign but this give idea

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

export default function BottomNav(props) {
  return (
    <View style={styles.bottom_nav}>
      <BottomItem
        selected={props.selected == 1}
        name={'Home'}
        image={
          props.selected == 1
            ? require('../assets/img/nav_home_sel.png')
            : require('../assets/img/nav_home_un_sel.png')
        }
        onPress={() => {
              //  console.log('click here 4',props.selected);
              
               if(props.selected != 1){
                props.navigation.navigate('HomeScreen');
               }
              }}
      />
      <BottomItem
        selected={props.selected == 2}
        name={'Profile'}
        image={
          props.selected == 2
            ? require('../assets/img/nav_profile_sel.png')
            : require('../assets/img/nav_profile_un_sel.png')
        }
        onPress={() => {
          //  console.log('click here 4',props.selected);
          if(props.selected != 2){
                props.navigation.navigate('ProfileScreen');
               }
              }}
      />
     
    </View>
  );
}

export function BottomItem(props) {
  return (
    <TouchableOpacity style={styles.bottom_item}
    onPress={props.onPress}
    >
      {/* <View style={styles.divider_view2}></View> */}
      <Image
        source={props.image}
        style={{
          height: 24,
          width: 24,
          resizeMode: 'contain',
         
        }}
      />
      {/* <View style={styles.divider_view2}></View> */}
      <Text style={styles.bottom_txt}>{props.name}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  bottom_nav: {
    height: '8%',
    backgroundColor: '#0AADEB',
    borderTopEndRadius: 16,
    borderTopStartRadius: 16,
    flexDirection: 'row',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'space-around',
  },
  bottom_item: {
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
  },
  bottom_txt: {
    color: 'white',
    fontWeight: '300',
    fontSize: 14,
  },
});