bdhcode / react-native-fade

Fade components in and out in React Native with just a boolean.

react-native-fade

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

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