Skip to content

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.

License

Notifications You must be signed in to change notification settings

sundayhd/react-native-display

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

Result:

demo

TODO:

  • On start animation done event
  • On exit animation done event

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published