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