useSharedValue
from react-native-reanimated
JS側とNative側で同期される状態を作る
これをShared Valueと呼ぶ
docs
#WIP
code:ts
const width = useSharedValue(100);
const handlePress = () => {
width.value = width.value + 50;
};
.valueで値にアクセスできる
.valueをmutableに更新する
useRefと同じイメージだmrsekut.icon
値はrnr: Animatedのstyleにそのまま渡す
code:ts
import Animated from 'react-native-reanimated';
<Animated.View
style={{
width,
height: 100,
backgroundColor: 'violet',
}}
/>
インラインで計算はできない
code:NG(ts)
<Animated.View style={{ width: width * 5 }} />
こういうのがしたい場合は、
上記のように関数を用意するか、
useAnimatedStyleを使う