React-Native bottomTabNavigation with big Button in the middle

user_13817191 0
Viewed 1076

I want to create a bottomTabNavigation like this: enter image description here

I managed to create a tabNavigation like this by putting an image in position:'absolute' but the image is overflowing the tab and the part that overflows is not clickable.

enter image description here

My code at this moment :

    <Tab.Navigator initialRouteName="Activity" tabBarOptions={{
        showIcon: true,
        showLabel: false,
        activeTintColor: 'blue',
      }}>

      <Tab.Screen name="Theme" component={Themes} options={{
        tabBarIcon: () => (<Image source={require('../Images/list_blue.png')} style={styles.icon}/>)
      }}/>

      <Tab.Screen name="Activity" component={Activity} options={{
        tabBarIcon: () => (<Image source={require('../Images/idea_blue.png')} style={styles.main_icon}/>)
      }}/>

      <Tab.Screen name="Add" component={Add} options={{
        tabBarIcon: () => (<Image source={require('../Images/plus_blue.png') style={styles.icon}/>)
      }}/>

  </Tab.Navigator>

    //Styles
    icon: {
      width: 40,
      height: 40,
    },
    main_icon: {
      position: 'absolute',
      bottom: -30,
      width: 115,
      height: 115,
    }

Then I created a cust tabNavigation with the prop tabBar={props => <CustomTabBar {...props} />} but I still have the same problem :

enter image description here

enter image description here

the red square is a touchableOpacity but only the green part in clickable, the part above the tab is still not clickable and I don't understand why...

Do you have an idea how to make such a big button in the middle of the bottomTabNavigation ?

react-navigation react-native navigation
1 Answers

I think I've gotten it to work by creating a custom tab bar and passing that component to the tabBar prop of the tab navigator:

function CustomTabBar({ state, descriptors, navigation, position }) {
  return (
    <View
      style={{
        flexDirection: 'row',
        height: 50,
        alignItems: 'center',
        justifyContent: 'space-around',
      }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        const inputRange = state.routes.map((_, i) => i);

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}>
            {route.name === 'Screen 2' ? (
              <Image
                style={styles.logo}
                source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
              />
            ) : (
              <Image
                style={styles.logo_tiny}
                source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
              />
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  logo: {
    width: 80,
    height: 80,
    bottom: 0,
  },
  logo_tiny: {
    width: 30,
    height: 30,
  },
});

Then you can pass the CustomTabBar to the tab navigator like this:

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Activity"
        tabBarOptions={{
          showIcon: true,
          showLabel: false,
          activeTintColor: 'blue',
        }}
        tabBar={(props) => <CustomTabBar {...props} />}>
        <Tab.Screen name="Screen 1" component={Screen1} />
        <Tab.Screen name="Screen 2" component={Screen2} />
        <Tab.Screen name="Screen 3" component={Screen3} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};
user_90983500
Related