react-native-fade

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

!Fade example gif

Installation

``bash


yarn

yarn add react-native-fade

npm

npm install react-native-fade --save
`

Then, import with:

`js
import Fade from 'react-native-fade';
`

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

Usage

Example:

`js
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 (

onPress={() => setVisible(!visible)}
title={visible ? 'Hide text' : 'Show text'}
/>

I fade in


);
}
`

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

Props

| Prop | Required? | Type | Description |
| ----------- | --------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | false | boolean | Show the children of . |
| 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 |