Getting a modal to be behind tabNavigator using Modlize alwaysOpen

Question

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?

my app.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Header from './components/Header';
import RootStack from './components/RootStack';




const App = () => {
  return (
    <>
      <Header />
      <NavigationContainer>
          <RootStack />
      </NavigationContainer>
    </>
  );
};

export default App;

RootStack:

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import CarrinhoModal from '../CarrinhoModal'
import TabNavigator from '../TabNavigator';

const StackNavigation = createStackNavigator();
const RootStack = () => {
  return (
    <>
        <StackNavigation.Navigator headerMode='none' >
          <StackNavigation.Screen name='Tab' component={TabNavigator} />
          <StackNavigation.Screen name='Carrinho' getComponent={CarrinhoModal} />
        </StackNavigation.Navigator>
    </>
  )
}

export default RootStack;

TabNavigator:

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 }) => {
  return (
    <>
      <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          activeTintColor: 'white',
          inactiveTintColor: 'gray',
          activeBackgroundColor: '#1E4B75',
          inactiveBackgroundColor: '#1E4B75'
        }}
      >
        {/* <Tab.Screen
          name='Carrinho'
          component={CarrinhoModal}
          listeners={( navigation ) => ({
            tabPress: e => {
              e.preventDefault();
              navigation.navigate(CarrinhoModal)
            }
          })}
        /> */}
        <Tab.Screen name='Home' component={Home} />
        <Tab.Screen name='Perfil' component={Perfil} />
      </Tab.Navigator>
      <CarrinhoModal />
    </>
  )
}



export default TabNavigator;

CarrinhoModal:

import React, { useRef } from 'react'
import { Modalize } from 'react-native-modalize';
import Carrinho from '../../pages/Carrinho';


const CarrinhoModal = (props) => {



  return (
    <>
      <Modalize
      ref={props.modalRef}
        alwaysOpen={75}
        modalHeight={400}
        handlePosition='inside'
      >
        <Carrinho />
      </Modalize>
    </>
  )
}

export default CarrinhoModal;

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!

Getting a modal to be behind tabNavigator using Modlize alwaysOpen

0 Answers0