React Native animated fade-in and fade-out

animated-fade.tsx

import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import * as Animatable from 'react-native-animatable';

type Props = {
    isVisible: boolean,
    children: React.ReactNode,
    style?: StyleProp<ViewStyle>,
};

export default function AnimatableFade({isVisible, children, style}: Props) {
    return (
        <Animatable.View
            transition={['opacity']}
            style={[
                {opacity: isVisible ? 1 : 0},
                style,
            ]}
            useNativeDriver
        >
            {children}
        </Animatable.View>
    );
}


// How to use
function App() {
    const [isVisible, setVisibility] = useState(false);
  
    return (
        <>
            <Button onPress={() => setVisibility(!isVisible)}>Toggle</Button>
            <AnimatedFade isVisible={isVisible}><Text>HEY LOOK!</Text></AnimatedFade>
        </>
    );
}