React Native Display

By Utkarsh Lubal

Published in Others

May 06, 2023

1 min read

Introduction

React Native Display is a library that allows you to easily control the visibility of your React Native components based on the screen size or orientation. It provides a simple API that allows you to show or hide a component based on the device’s width or height, as well as the orientation of the device. The library provides a Display component that you can wrap around your existing components, along with a set of props that control when the wrapped component should be displayed. These props include: • if: A boolean that determines whether the wrapped component should be displayed or hidden. • width: A number or string representing the minimum width of the device for the wrapped component to be displayed. • height: A number or string representing the minimum height of the device for the wrapped component to be displayed. • orientation: A string representing the orientation of the device for the wrapped component to be displayed. Valid values are “portrait”, “landscape”, and “any”. By using these props, you can easily control the visibility of your components based on the size or orientation of the device, without the need for complex conditional rendering logic.

Properties

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`

Installation

npm install react-native-display --save

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