title: React-Native bottomTabNavigation with big Button in the middle
body: <p>I want to create a bottomTabNavigation like this:
  <a href="https://i.stack.imgur.com/xbTUH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xbTUH.png" alt="enter image description here" /></a></p>
  <p>I managed to create a tabNavigation like this by putting an image in <code>position:'absolute'</code> but the image is overflowing the tab and the part that overflows is not clickable.</p>
  <p><a href="https://i.stack.imgur.com/pDFHI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pDFHI.png" alt="enter image description here" /></a></p>
  <p>My code at this moment :</p>
  <pre class="lang-js prettyprint-override"><code>    &lt;Tab.Navigator initialRouteName=&quot;Activity&quot; tabBarOptions={{
          showIcon: true,
          showLabel: false,
          activeTintColor: 'blue',
        }}&gt;
  
        &lt;Tab.Screen name=&quot;Theme&quot; component={Themes} options={{
          tabBarIcon: () =&gt; (&lt;Image source={require('../Images/list_blue.png')} style={styles.icon}/&gt;)
        }}/&gt;
  
        &lt;Tab.Screen name=&quot;Activity&quot; component={Activity} options={{
          tabBarIcon: () =&gt; (&lt;Image source={require('../Images/idea_blue.png')} style={styles.main_icon}/&gt;)
        }}/&gt;
  
        &lt;Tab.Screen name=&quot;Add&quot; component={Add} options={{
          tabBarIcon: () =&gt; (&lt;Image source={require('../Images/plus_blue.png') style={styles.icon}/&gt;)
        }}/&gt;
  
    &lt;/Tab.Navigator&gt;
  
      //Styles
      icon: {
        width: 40,
        height: 40,
      },
      main_icon: {
        position: 'absolute',
        bottom: -30,
        width: 115,
        height: 115,
      }
  </code></pre>
  <p>Then I created a cust tabNavigation with the prop <code>tabBar={props =&gt; &lt;CustomTabBar {...props} /&gt;}</code>
  but I still have the same problem :</p>
  <p><a href="https://i.stack.imgur.com/NbAGf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NbAGf.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/KLPHx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KLPHx.png" alt="enter image description here" /></a></p>
  <p>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...</p>
  <p>Do you have an idea how to make such a big button in the middle of the bottomTabNavigation ?</p>