React-native-display NPM

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

Installation

$ npm install react-native-display --save

Dependencies

react-native-animatable

Usage

import Display from 'react-native-display';

Then, easy as:

<Display enable={this.state.enable}>
  <Text> My custom components </Text>
</Display>

Properties

`enter/exit` props using 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).Example: enter='fadeIn'*	None
`exit`	Animation name to run when not render (*enable=false).Example: exit='fadeOut'*	None
`style`	Same react-native style for `View`.	None
`keepAlive`	When *enable=false* If `true` components will hide only (`componentWillUnmount()` will not fire). 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).	`false`

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

demo2

Full example:

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