react-native-reanimatedライブラリを利用する⑦

withSpringを使用する

App.js

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, Button } from 'react-native';

import Animated, { useSharedValue, useAnimatedStyle, withSpring} from 'react-native-reanimated';

export default function App() {

  const translateX = useSharedValue(0);

  const handlePress = () => {

    translateX.value = withSpring(translateX.value + 50);

  }

  const animatedStyle = useAnimatedStyle*1

  return (

    <View style={styles.container}>

      <Animated.View style={[styles.box, animatedStyle]}/>

      <Button

         title='PUSH'

         onPress={handlePress}/>

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

  box: {

    width: 100,

    height: 100,

    backgroundColor: 'violet',

  }

});

*1:) => ({

    transform: [{translateX:translateX.value}],

  }