react-native-z-view
TypeScript icon, indicating that this package has built-in type declarations

0.2.4 • Public • Published

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

Package Sidebar

Install

npm i react-native-z-view

Weekly Downloads

446

Version

0.2.4

License

MIT

Unpacked Size

48.6 kB

Total Files

35

Last publish

Collaborators

  • nishanbende