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

円を表示し、拡大する

App.js

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

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

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

import Svg, {Circle} from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {

  const r = useSharedValue(20);

  const handlePress = () => {

    r.value = r.value + 20;

  }

  const animatedProps = useAnimatedProps*1

  return (

    <View style={styles.container}>

      <Svg>

        <AnimatedCircle cx="200" cy="200" fill="blue" animatedProps={animatedProps}/>

      </Svg>

      <View style={{marginBottom:100}}>

        <Button onPress={handlePress} title="PUSH"/>

      </View>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

*1:) => ({

    r: r.value,

  }