Skip to content

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

License

Notifications You must be signed in to change notification settings

abdullahIsa/react-native-fade

 
 

Repository files navigation

react-native-fade

runs with expo

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 37.1%
  • Ruby 20.9%
  • Objective-C 18.9%
  • TypeScript 13.8%
  • JavaScript 8.4%
  • C 0.6%
  • Swift 0.3%