Skip to content

Latest commit

 

History

History
60 lines (45 loc) · 2.21 KB

README.md

File metadata and controls

60 lines (45 loc) · 2.21 KB

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