How to make the overflow of tab bar icon clickable in react native?

Question

I'm creating a custom tab bar using React Navigation 5 and createBottomTabNavigator of @react-navigation/bottom-tabs,

The Problem: The Red icon is only clickable within the tab bar range, once i have crossed the grey line of the tab bar i can not click the icon.

And i have created it using the following code for the tab screen

<Tab.Screen
    name="Scan"
    component={Scan}
    options={({ navigation }) => {
      return {
        tabBarIcon: () => <MiddleIcon navigation={navigation} />,
      };
    }}
  />

I've tried wrapping the whole view in touchable opacity but it still only touchable within the range of the tab bar

MiddleIcon Component:

const MiddleIcon = ({ navigation }) => {
  return (
    <TouchableOpacity
      onPress={() => navigation.navigate('Scan')}
      style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          source={require('../../../assets/images/shared/scan_icon.png')}
        />
      </View>
    </TouchableOpacity>
  );
};

export default MiddleIcon;

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 20,
    height: 58,
    width: 58,
    borderRadius: 58,
    backgroundColor: colors.primaryColor,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,

    flex: 1,
  },
  icon: {
    width: 40,
    height: 40,
    tintColor: '#fff',
    alignContent: 'center',
  },
  imageContainer: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,
    width: 30,
    height: 30,
  },
});

Question: How to make it clickable outside the boundaries of the bottom tab bar?

I try custom tab bar, and with React.fragment wrapper you can do it. because The fragment put the element in parent container. see here https://gist.github.com/abuinitski/5c805972f40e0e5e47c352bc1390dab3 — Ali Akbar Azizi, May 20 '21 at 07:38

score 0 · Answer 1 · answered Dec 27 '21 at 14:50

0

Use zIndex on the imageContainer style

answered Dec 27 '21 at 14:50

Ahmed Sbai

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 27 '21 at 21:00
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30682548) – CodeChanger Jan 03 '22 at 11:50

score -1 · Answer 2 · answered Oct 22 '20 at 09:26

-1

Use TouchableOpacity on the Icons to make it Clickable from react-native-gesture-handler

answered Oct 22 '20 at 09:26

Rover

661
2
18
39

How to make the overflow of tab bar icon clickable in react native?

2 Answers2