1

I am in a situation within my project where it would be convenient to "prohibit the user from interacting with the app". I would like to do this, by rendering an invisible screen that is covering the entire display.

I notice that once the bottom tab is rendered, I cannot seem to force a view over it. Is there a way I can give my view priority over everything? I have tried zIndex but no luck, I just want my view to cover the entire screen.

I have an example demo here on snack expo where you can replicate my issue exactly. I have also included some code below that gives you the gist.

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen name="ScreenA" component={ScreenA} />
      <Tab.Screen name="ScreenB" component={ScreenB} />
    </Tab.Navigator>
    </NavigationContainer>
  );
}

export default function ScreenA() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Screen A. 
      </Text>
      <View style={{justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', height: 500}}>
        <Text style={styles.paragraph}>Is it possible to make this view cover the entire screen? Including the bottom tab and top?</Text>
      </View>
    </View>
  );
}
MouseWarrior
  • 391
  • 4
  • 19
  • A quick, dirty, and easy solution would be to just render a blank modal that you remove whenever you want the interactions to be available. I think you may have to configure to the modal to not be canceled on presses outside of it boundaries – PhantomSpooks Nov 04 '22 at 02:01
  • Im not quite sure what you mean by this. How could I ensure the modal would cover the bottom tab? Do you mind editing my snack expo post to clarify? – MouseWarrior Nov 04 '22 at 03:46

1 Answers1

2

After taking a look at this stackoverflow answer I've come up with a solution that hides/show the tab bar buttons base on the state of a variable:

const [showTabBar, setShowTabBar] = useState(false);
  useEffect(() => {
    props.navigation.setOptions({
      tabBarStyle: { display: showTabBar ? 'flex' : 'none' },
    });
  }, [showTabBar, props.navigation]);

A demo

While it removes the tab bar entirely, it does ensure that the tab bar is non-interactable. If you find it necessary to have the tab bars visible, but unpressable, you could first create a custom tab bar component, add some variable that will make the buttons do nothing when active, use it in Tab.Navigator and then render it at the bottom of the screen in ScreenA when showTabBar is false (make sure to set the unpressable variable to true)

PhantomSpooks
  • 2,877
  • 2
  • 8
  • 13