Package Exports

react-native-absolute

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-absolute) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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