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 |