react-native-fade-in-out

A React Native component that uses a boolean prop to fade children in and out

Installation

Install with yarn or npm:

$ yarn add react-native-fade-in-out

$ npm i react-native-fade-in-out

Example usage

Example snack

import React, { useState } from "react";
import {Button, Text, StyleSheet, View} from 'react-native';
import FadeInOut from 'react-native-fade-in-out';

const App = () => {
  const [visible, setVisible] = useState(true);

  const toggleVisible = () => {
    setVisible(!visible);
  }

  return (
    <View style={styles.container}>
      <FadeInOut visible={visible}>
        <Text>Default duration</Text>
      </FadeInOut>
      <FadeInOut visible={visible} duration={1000}>
        <Text>Duration = 100</Text>
      </FadeInOut>
      <FadeInOut visible={visible} rotate={true}>
        <Text>Rotate</Text>
      </FadeInOut>
      <FadeInOut visible={visible} scale={true}>
        <Text>Scale</Text>
      </FadeInOut>
      <Button onPress={toggleVisible} title="Start Fade" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
});

export default App;

For an example that uses the optional props, see the FadeInOutExample project in this repository.

$ cd FadeInOutExample
$ yarn start

Props

visible

Determines whether the child fades in or out. The child will fade in when true and out when false.

| Type | Required | |:-----------|----------| | Function | Yes |

duration

Sets the duration of animation in milliseconds. The default duration is 300 ms.

| Type | Required | |:-----------|----------| | Number | No |

rotate

Adds a 360° rotation to the fade, clockwise on fade in and counterclockwise on fade out.

| Type | Required | |:-----------|----------| | Boolean | No |

scale

Adds scaling from %0 to %100 on fade in and %100 to %0 on fade out.

| Type | Required | |:-----------|----------| | Boolean | No |

style

| Type | Required | |:------------------------------|----------| | View styles| No |

useNativeDriver

Sets useNativeDriver for the animation. The default value is true. See React Native blog post for more details.

| Type | Required | |:-----------|----------| | Boolean | No |

Typescript

This package contains built-in TypeScript declarations.

License

MIT © Courtney Pattison