CODEWITHSUNDEEP
reactjsreact-native
Tamas Farago
Tamas Farago

Reputation: 139

How can I create a layer over React Native navigation tabs?

I would like to create a navigation dropdown menu. Outside of that menu, I want to create a layer that closes the menu when the user clicks on it. When I create this layer the color of it doesn't cover the bottom navigation tabs and I can't find any way to do it.

The layer doesn't cover the bottom tabs image

Upvotes: 0

Views: 1096

Answers (2)

Ric
Ric

Reputation: 8805

You could navigate to a modal screen with a header and the menu list and set a transparent card style so you can have a overlay that can navigate back, and a different animation than the default slide:

Upvotes: 2

Ric
Ric

Reputation: 8805

Have you looked at using the React Native Modal component? https://reactnative.dev/docs/modal

It could be used to render the menu above other components and supports an onRequestClose prop.

<Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        }}
      >

Upvotes: 1

Related Questions