React native Navigation bottom bar with plus bottom

Question

can you please give me a hint how to achieve this kind of menu on react native ImageOne ImageTwo

react native bottom navigation

Answer 1

This isnt exactly what is in image but could help Link

Answer 2

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,
  },
});