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.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library