6.5.1.1 서서히 나타나고, 서서히 사라지기

자, CalendarScreen에서 간단한 애니메이션 연습을 진행해봅시다. 먼저 컴포넌트가 서서히 나타나고, 사라지는 Fade In, Fade Out 효과입니다.

screens/CalendarScreen.js

import React, {useRef} from 'react';
import {Animated, Button, StyleSheet, View} from 'react-native';

function FadeInAndOut() {
  const animation = useRef(new Animated.Value(1)).current;

  return (
    <View>
      <Animated.View
        style={[
          styles.rectangle,
          {
            opacity: animation,
          },
        ]}
      />
      <Button
        title="FadeIn"
        onPress={() => {
          Animated.timing(animation, {
            toValue: 1,
            useNativeDriver: true,
          }).start();
        }}
      />
      <Button
        title="FadeOut"
        onPress={() => {
          Animated.timing(animation, {
            toValue: 0,
            useNativeDriver: true,
          }).start();
        }}
      />
    </View>
  );
}

function CalendarScreen() {
  return (
    <View style={styles.block}>
      <FadeInAndOut />
        </View>
  );
}

const styles = StyleSheet.create({
  block: {},
    rectangle: {width: 100, height: 100, backgroundColor: 'black'},
});

export default CalendarScreen;