react-native-absolute

React Native Global Absolute View Manager.

Usage no npm install needed!

<script type="module">
  import reactNativeAbsolute from 'https://cdn.skypack.dev/react-native-absolute';
</script>

README

react-native-absolute

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

Installation

$ 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> {
  ...
  render(){
    return (
      <Absolute>
        {...app content }
      </Absolute>
    )
  }
}

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}}>
    {...}		
  </View>
);
  • Destroy absolute view.
ref.destroy();

All it does.

Methods

  • 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;
    }} />
  )