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.

Overview

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
Issues
  • Wait for image to load

    Wait for image to load

    Hi,

    I'm trying to show an of an image loaded online. the thing is it takes a little bit to show the image, so i think that the animation takes place on a transparent image that hasn't been loaded yet, and only then it shows up.

    I tried to use it like this: <Display enable={this.state.popImage}> <Image onLoad={() => this.setState({ uri: this.state.uri, popImage: true })} style={{ width: 200, height: 200 }} source={{ uri: this.state.uri }} /> </Display>

    but then nothing happens at all i think it's some kind of a recursive problem when i set the image at the first time the popImage is false, and then when i load the image it calls setState() that reset the uri and bool, but then the image is reloaded again :-)

    do you have a suggestion of how to initiate the animation only after the image is fully loaded?

    Thanks

    opened by ArielS1 5
  • Android nothing appear when enable

    Android nothing appear when enable

    I have an issue on Android (it's work very well on iOS) when I tried to show the view inside the display nothing appear any ideas how I can fix it ?

    opened by yelkamel 2
  • Fix issue with virtual actionbar on Android

    Fix issue with virtual actionbar on Android

    When using new devices such as the Galaxy S8, the call to Dimensions.get('window') doesn't return the real height due to Virtual Buttons, see https://github.com/facebook/react-native/issues/14887.

    opened by chreble 0
  • After view exits I get a blank screen on Android

    After view exits I get a blank screen on Android

    I'm using Display in a lot of places in my app. It works really well on iOS, however, on Android when the exit animation fires it'll often leave me with a blanked out display (meaning I just see the background color of the view and nothing else that was there previously). I was able to fix it in one scenario by moving the Display and child components to the top of their container, but that doesn't always seem to work. Have you seen this issue before? Thanks in advance!

    opened by mleung 1
  • Second render doesn't trigger animation

    Second render doesn't trigger animation

    I'm trying to use 2 animations.

    1. An animation of a photo that appears first time when a specific event happens (poppedPhoto)
    2. An animation of a photo that appears at the beginning without animation and when a specific event happens it shakes (first).

    The first animation i described works. The second doesn't even that it was configured the same as the first, the only difference is that it occurs not at the first render.

    Another problem i found is that enabled prop is not default configured to true when i create a display and even when i set it to true it only appears when i set it from a this.state.var

    render() {
        let firstImage;
        if (this.state.first) {
          console.log('first');
          firstImage =
            (<Display
              enable={this.state.first}
              enterDuration={3000}
              enter='wobble'
            >
              <Image
                source={src}
                style={{ width: 140, height: 140 }}
              />
            </Display>);
        } else {
          console.log('second');
          firstImage =
            (<Image
              source={src}
              style={{ width: 140, height: 140 }}
            />);
        }`
    
        const poppedPhoto = this.state.uri !== '' ?
          (
            <View>
              <Display
                enable={this.state.poppedPhoto}
                enterDuration={10000}
                keepAlive
                enter="zoomInDown"
              >
                <Image
                  onLoad={() => this.setState({
                    uri: this.state.uri,
                    poppedPhoto: true,
                    first: true
                  })}
                  style={{ width: 200, height: 200 }}
                  source={{ uri: this.state.uri }}
                />
              </Display>
            </View>
          ) : null;
    
        return (
          <View style={styles.container}>
            <View style={{ flexDirection: 'row' }}>
              {firstImage}
            </View>
            {poppedPhoto}
          </View>
        );
      }
    
    opened by ArielS1 4
Simple and lightweight What's New style component that shows your React Native app new features

React Native New Feature ☀️ Simple and lightweight What's New style component that shows your React Native app new features ☀️ If you like this projec

Duc Trung Mai 12 Sep 20, 2021
:computer: :dash: Make your component visible with animations and a set of rules or simple props

Make your component visible with animations and a set of rules or simple props Content Installation Display content with simple props Display content

Marvin Frachet 16 Apr 24, 2020
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Marco Cesarato 281 Jan 18, 2022
High-performance React Native Graphics using Skia

@shopify/react-native-skia Checkout the full documentation here. React Native Skia brings the Skia Graphics Library to React Native. Skia serves as th

Shopify 1.9k Jan 16, 2022
✈️ 🚀 React native progress-bar, give your progress-bar some brand style

React Native Air Progress Bar Pretty customizable and animated progress-bar component for React Native. We often need to customize our mobile applicat

Kirill Stepkin 54 Apr 10, 2021
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Halil Bilir 2.8k Jan 8, 2022
High performance listview for React Native and web!

RecyclerListView If this project has helped you out, please support us with a star ?? . This is a high performance listview for React Native and Web w

Flipkart 4.1k Jan 21, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 678 Jan 14, 2022
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

react-native-curved-bottom-bar A high performance, beautiful and fully customizable curved bottom navigation bar for React Native. Getting started

Hoà Phan 130 Jan 15, 2022
:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.

react-native-masonry ?? An easy to use, pure JS react-native component to render a masonry~ish layout for remote images react-native-masonry is built

Brandon Him 1.2k Jan 20, 2022
🚀 Organize your games easily. Create groups to play your favorite games with your friends.

?? Introduction ?? Technologies This project was developed using the following technologies: React Native Expo ??️ Features OAuth2 Social Authenticati

Tundê Cavalcante 3 Sep 10, 2021
A Native Picker with high performance.

react-native-picker Documentation Params Key Type Default Support Description isLoop Boolean false Android pickerTextEllipsisLen number 6 Android pick

beefe 1.7k Jan 20, 2022
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
A button React Native component supporting showing different states with animations

React Native Awesome Button An <AwesomeButton /> component that creates a button depicting different states in terms of e.g. color and label text. Whe

Lars Vinter 234 Dec 3, 2021
:lollipop: A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.

React Native Animated Loader Read more about this package here. A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animat

Vikrant Negi 138 Jan 17, 2022
Create declarative animations for React Native

AnimationWrapperView is a collection of a well defined set of component level animations, that a developer can utilize just by providing some configur

Flipkart Incubator 49 Jan 10, 2022
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations

react-native-customizable-toast yet another toast library based on reanimated 2 layout animations Features Imperative API Fully Customizable Custom to

kubilay 77 Jan 14, 2022
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.3k Jan 10, 2022