react-native-absolute

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