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

円を表示する

react-native-svgライブラリを合わせて使用します。

App.js

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

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

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

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

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {

  const r = useSharedValue(10);

  return (

    <View style={styles.container}>

      <Svg>

        <AnimatedCircle cx="50" cy="50" r={r} fill="blue"/>

      </Svg>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});