React Native Global Absolute View Manager.

Usage no npm install needed!

<script type="module">
  import reactNativeAbsolute from '';



React native global Absolute View. Inspired react-native-root-sibling.


$ npm install react-native-absolute --save

or simply

$ npm i react-native-absoltue --save

Add wrapping Absolute component inside App render at App.js ( or registered by AppRegistry Object renderer ). If imported once then Absolute instance made value for global using.

import Absolute from 'react-native-absolute'; // import absolute. Just once.

class App extends Component<Props> {
    return (
        { content }

Rendering Absolute makes Global.Absolute to using globally.

Basic Usage

  • Create absolute view.
let ref = Absolute.add( 
  <View style={{position:'absolute', top:0, left:0, right:0, bottom:0}}>
  • Destroy absolute view.

All it does.


  • add
  • removeAll

Advance Usage

Z index

  • Make sure difference z-index to avoid another absoluted view blocked current view when call add.
  let ref = Absolute.add(
    <View style={{...absolute position style property...}}>...</View>
  , 1024 /**z-index**/ )

Self Destory

(Actually, It is not functionality, just a example pattern. )

  • Custom Component to self destroy. So you should use it some time hide animation or detroy to component it self.
  let ref = Absolute.add( 
    <CustomComponent onClose{()={
      iF( ref ) ref.destory()
      ref = null;
    }} />