React-native-fade NPM

react-native-fade

A wrapper component to fade its children in and out based on a boolean.

Fade example gif

Installation

# yarn
yarn add react-native-fade

# npm
npm install react-native-fade --save

Then, import with:

import Fade from 'react-native-fade';

Note: You may also need to install react-native-reanimated.

Usage

Example:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Fade from 'react-native-fade';

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <View>
      <Button
        onPress={() => setVisible(!visible)}
        title={visible ? 'Hide text' : 'Show text'}
      />
      <Fade visible={visible} direction="up">
        <Text>I fade in</Text>
      </Fade>
    </View>
  );
}

You can see a full example app inside the /example folder!

Props

Prop	Required?	Type	Description
`visible`	false	boolean	Show the children of `<Fade>`.
`direction`	false	string	Can be `"up"` or `"down"`. When the child component fades in there's an optional subtle translation that you can apply with `"up"` or `"down"`.
`duration`	false	number	The amount of time in milliseconds the fade transition should take.
`style`	false	React Native Style or Object	Applies style a view around the faded child components