React-native-z-view NPM

react-native-z-view

Show a view on top of all the views (including native modals). It can be used like an overlay view.

Installation

npm install react-native-z-view react-native-screens

Note: react-native-screens is required for iOS.

Usage

import { ZView } from 'react-native-z-view'

<ZView>
  <View>
    <Text>This will be shown on top of all the views!<Text>
  </View>
</ZView>

Props

top - To adjust top value. Similar to top in position fixed. Accepts percentage and point values.
left - To adjust left value. Similar to left in position fixed. Accepts percentage and point values.
bottom - To adjust bottom value. Similar to bottom in position fixed. Accepts percentage and point values.
right - To adjust right value. Similar to right in position fixed. Accepts percentage and point values.
touchable - Make the entire ZView non-touchable. Allows passing touch events to the behind view of ZView itself.

Examples

Adjust Position

<ZView top={10} left={40}>
  <View>
    <Text>This will be shown on top of all the views!<Text>
  </View>
</ZView>

Full Size Overlay

import { Dimensions } from 'react-native'

const { width, height } = Dimensions.get('window')

<ZView>
  <View
    style={{
      width,
      height,
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    }}
  >
    <Text>Full size overlay view</Text>
  </View>
</ZView>

Why?

React Native's Modal is great for modal usecases. It blocks the touch of behind views (which is expected from a Modal), so it is not a great solution for custom Toast, ToolTip or Popover that allow behind view touches.
Multiple Modals don't work unless nested on iOS in react native. I have made a PR for the same.
This component solves the above issues but it is not a replacement for RN's Modal component. Use this component when you face above issues.
This component makes sure to appear on top of Native Modal on Android and iOS so it can be used in place of a custom Portal like solution.