title: Getting a modal to be behind tabNavigator using Modlize alwaysOpen
body: <p>So I'm pretty new to programming and while making my first React Native project I got stuck trying to create a modal that's always open behind the bottom nav (The reason I want it that way is for it to be like a cart where whenever the user adds something it'll slightly nudge up to show something new was added), I did manage to get the modal behind the tab but now the bottom tab is unresponsive, does anyone have a fix for this?</p>
  <p>my app.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import Header from './components/Header';
  import RootStack from './components/RootStack';
  
  
  
  
  const App = () =&gt; {
    return (
      &lt;&gt;
        &lt;Header /&gt;
        &lt;NavigationContainer&gt;
            &lt;RootStack /&gt;
        &lt;/NavigationContainer&gt;
      &lt;/&gt;
    );
  };
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>RootStack:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { createStackNavigator } from '@react-navigation/stack'
  import CarrinhoModal from '../CarrinhoModal'
  import TabNavigator from '../TabNavigator';
  
  const StackNavigation = createStackNavigator();
  const RootStack = () =&gt; {
    return (
      &lt;&gt;
          &lt;StackNavigation.Navigator headerMode='none' &gt;
            &lt;StackNavigation.Screen name='Tab' component={TabNavigator} /&gt;
            &lt;StackNavigation.Screen name='Carrinho' getComponent={CarrinhoModal} /&gt;
          &lt;/StackNavigation.Navigator&gt;
      &lt;/&gt;
    )
  }
  
  export default RootStack;</code></pre>
  </div>
  </div>
  </p>
  <p>TabNavigator:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import Home from '../../pages/Home'
  import Perfil from '../../pages/Perfil'
  import CarrinhoModal from '../CarrinhoModal';
  
  
  
  
  
  const Tab = createBottomTabNavigator();
  const TabNavigator = ({ navigation }) =&gt; {
    return (
      &lt;&gt;
        &lt;Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeTintColor: 'white',
            inactiveTintColor: 'gray',
            activeBackgroundColor: '#1E4B75',
            inactiveBackgroundColor: '#1E4B75'
          }}
        &gt;
          {/* &lt;Tab.Screen
            name='Carrinho'
            component={CarrinhoModal}
            listeners={( navigation ) =&gt; ({
              tabPress: e =&gt; {
                e.preventDefault();
                navigation.navigate(CarrinhoModal)
              }
            })}
          /&gt; */}
          &lt;Tab.Screen name='Home' component={Home} /&gt;
          &lt;Tab.Screen name='Perfil' component={Perfil} /&gt;
        &lt;/Tab.Navigator&gt;
        &lt;CarrinhoModal /&gt;
      &lt;/&gt;
    )
  }
  
  
  
  export default TabNavigator;</code></pre>
  </div>
  </div>
  </p>
  <p>CarrinhoModal:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useRef } from 'react'
  import { Modalize } from 'react-native-modalize';
  import Carrinho from '../../pages/Carrinho';
  
  
  const CarrinhoModal = (props) =&gt; {
  
  
  
    return (
      &lt;&gt;
        &lt;Modalize
        ref={props.modalRef}
          alwaysOpen={75}
          modalHeight={400}
          handlePosition='inside'
        &gt;
          &lt;Carrinho /&gt;
        &lt;/Modalize&gt;
      &lt;/&gt;
    )
  }
  
  export default CarrinhoModal;</code></pre>
  </div>
  </div>
  </p>
  <p>As I said I'm pretty new in all this so if you could point me in the right direction it would be much apreciated!</p>