react-native-reanimatedライブラリを学ぶ③

図形を徐々に拡大

App.js

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

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

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

export default function App() {

  const width = useSharedValue(100);

  const handlePress = () => {

  width.value += 50;

  }

  return (

    <View style={styles.container}>

      <Animated.View style={{...styles.box, width:width}} />

      <Button onPress={handlePress} title="Click me"/>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

  box: {

    height:100,

    backgroundColor: 'violet'

  }

});