screens/CalendarScreen.js

    import React, {useRef, useState, useEffect} from 'react';
    import {Animated, Button, StyleSheet, View} from 'react-native';
    
    function SlideLeftAndRight() {
      const animation = useRef(new Animated.Value(0)).current;
      const [enabled, setEnabled] = useState(false);
    
      useEffect(() => {
        Animated.timing(animation, {
          toValue: enabled ? 1 : 0,
          useNativeDriver: true,
        }).start();
      }, [enabled, animation]);
    
      return (
        <View>
          <Animated.View
            style={[
              styles.rectangle,
              {
                transform: [
                  {
                    translateX: animation.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0, 150],
                    }),
                  },
                ],
                opacity: animation.interpolate({
                  inputRange: [0, 1],
                  outputRange: [1, 0],
                }),
              },
            ]}
          />
          <Button
            title="Toggle"
            onPress={() => {
              setEnabled(!enabled);
            }}
          />
        </View>
      );
    }
    
    (...)
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.