Repository: sundayhd/react-native-display
Branch: master
Commit: 6a1f769e17d5
Files: 4
Total size: 7.3 KB

Directory structure:
gitextract_jz6hjijs/

├── LICENSE
├── README.md
├── _config.yml
└── display.js

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2015 Joel Arvidsson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



================================================
FILE: README.md
================================================
# react-native-display
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.

![intro](https://cloud.githubusercontent.com/assets/9949238/22396351/f1452940-e55f-11e6-8e9b-ae26396c2051.gif)

## Installation

`$ npm install react-native-display --save`

## Dependencies
[`react-native-animatable`](https://github.com/oblador/react-native-animatable)

## Usage
```js
import Display from 'react-native-display';
```
### Then, easy as:
```js
<Display enable={this.state.enable}>
  <Text> My custom components </Text>
</Display>
```

## Properties
#### ***`enter/exit`***  props using [react-native-animatable](https://github.com/oblador/react-native-animatable) for animation name.
| Prop | Description | Default |
|---|---|---|
|**`enable`**|`true` to render. `false` to not render. |`true`|
|**`defaultDuration`**|Default duration for enter and exit animations. |`250`|
|**`enterDuration`**|Duration for enter animation. |`250`|
|**`exitDuration`**|Duration for exit animation. |`250`|
|**`enter`**|Animation name to run when render (***enable=true***).<br/>Example: ***enter='fadeIn'*** |None|
|**`exit`**|Animation name to run when not render (***enable=false***).<br/>Example: ***exit='fadeOut'*** |None|
|**`style`**|Same *react-native* style for `View`. |None|
|**`keepAlive`**|When ***enable=false*** <br /> If `true` components will hide only ([`componentWillUnmount()`](https://facebook.github.io/react/docs/react-component.html#componentwillunmount) will not fire). <br />If `false` components will not render at all. Use it on complex components or on modules that required init on everytime that they are mount (for example: [react-native-camera](https://github.com/lwansbrough/react-native-camera)).  |`false`|

### Using inspector to validate that after exit animation component will not render: 

![demo2](https://cloud.githubusercontent.com/assets/9949238/22395957/8bde370e-e555-11e6-8440-38b85c7c284c.gif)

## Full example:
```js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
} from 'react-native';

import Display from 'react-native-display';

export default class testdisplay extends Component {
  constructor(props) {
    super(props);

    this.state = {enable: true};
  }

  toggleDisplay() {
    let toggle = !this.state.enable;
    this.setState({enable: toggle});
  }

  render() {
    return (
      <View>
        <View style={styles.button}>
          <Button
            onPress={this.toggleDisplay.bind(this)}
            title="Toggle display"
            color="#34495e"
            accessibilityLabel="Toggle display for show/hide circles"
          />
        </View>
        <View style={styles.center}>
          <Display 
            enable={this.state.enable} 
            enterDuration={500} 
            exitDuration={250}
            exit="fadeOutLeft"
            enter="fadeInLeft"
          >
            <View style={[styles.circle, {backgroundColor: '#2ecc71'}]} />
          </Display>
          <Display 
            enable={this.state.enable} 
            enterDuration={500} 
            exitDuration={250}
            exit="fadeOutDown"
            enter="fadeInUp"
          >
            <View style={[styles.circle, {backgroundColor: '#9b59b6'}]} />
          </Display>
          <Display 
            enable={this.state.enable} 
            enterDuration={500} 
            exitDuration={250}
            exit="fadeOutRight"
            enter="fadeInRight"
          >
            <View style={[styles.circle, {backgroundColor: '#3498db'}]} />
          </Display>
        </View>
      </View>
    );
  }
}

const styles = {
  button: {
    padding: 10,
    margin: 15,
  },
  center: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  circle: {
    borderRadius: 50,
    height: 100,
    width: 100,
    margin: 15
  },
}

AppRegistry.registerComponent('testdisplay', () => testdisplay);
```

### Result:

![demo](https://cloud.githubusercontent.com/assets/9949238/22395868/50f73278-e553-11e6-8081-f253db9d8e22.gif)

### TODO:
* On start animation done event
* On exit animation done event


================================================
FILE: _config.yml
================================================
theme: jekyll-theme-cayman

================================================
FILE: display.js
================================================
import React, { Component } from 'react';
import { 
  View, 
  Text, 
  StyleSheet,
  Dimensions,
} from 'react-native';

import * as Animatable from 'react-native-animatable';
const screen = Dimensions.get('window');
const WIDTH = screen.width;
const HEIGHT = screen.height;

const DEFAULT_DURATION = 250;

export default class Display extends Component {

  constructor(props) {
    super(props);
    
    this.state = { enable: this.props.enable };
  }

  onEndAnimation(endState) {
    if (endState.finished == true) 
      this.setState({enable: false});
  }

  shouldComponentUpdate(nextProps) {
    return true;
  }

  componentWillUpdate(nextProps, nextState) {

    if (nextProps.enable != this.props.enable) {
      if (nextProps.enable == false) {

        let duration = nextProps.exitDuration || nextProps.defaultDuration || DEFAULT_DURATION;

        if (nextProps.exit != null) {
          this.refs.display[nextProps.exit](duration).then((endState) => this.onEndAnimation(endState));
        }
        else
          nextState.enable = false;
      }
      else
        nextState.enable = true;
    }
  }

  enableStyle() {
    if (this.state.enable)
      return {};

    return {
      position: 'absolute',
      top: HEIGHT,
      left: WIDTH,
      height: 0,
      width: 0,
    };
  }

  render() {
    
    if (this.state.enable == false && this.props.keepAlive != true)
      return null;

    return (
      <Animatable.View ref="display" style={[this.props.style, this.enableStyle.bind(this)()]}>
        {this.props.children}
      </Animatable.View>
    );
  }

  componentDidUpdate(prevProps, prevState) {

    if (prevProps.enable != this.props.enable)
      if (this.props.enable == true) {

        this.refs.display.stopAnimation();

        let duration = this.props.enterDuration || this.props.defaultDuration || DEFAULT_DURATION;

        if (this.props.enter != null) {
          this.refs.display[this.props.enter](duration).then((endState) => {  });
        }
      }
  }

}