diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock index eba9bd8fd6d3..82a9a7c21752 100644 --- a/Example/ios/Podfile.lock +++ b/Example/ios/Podfile.lock @@ -478,7 +478,7 @@ SPEC CHECKSUMS: FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716 FBReactNativeSpec: f09bd7507ef9f78c89868600d5f1df26b62878f3 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85 + glog: 476ee3e89abb49e07f822b48323c51c57124b572 RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685 RCTRequired: 1e4605513e7b6a2871bdb8ae5b162b239ad18602 RCTTypeSafety: 0ed8525a159a736981e1aa308e729d83f2fb6926 diff --git a/Example/src/AnimatedSharedStyleExample.tsx b/Example/src/AnimatedSharedStyleExample.tsx new file mode 100644 index 000000000000..14a77e98520f --- /dev/null +++ b/Example/src/AnimatedSharedStyleExample.tsx @@ -0,0 +1,106 @@ +import Animated, { + useSharedValue, + withTiming, + useAnimatedStyle, + Easing, +} from 'react-native-reanimated'; +import { View, Button, StyleSheet } from 'react-native'; +import React, { useState } from 'react'; + +export default function AnimatedSharedStyleExample() { + const randomWidth = useSharedValue(100); + + const [blueCounter, setBlueCounter] = useState(0); + const [greenCounter, setGreenCounter] = useState(0); + const [itemList, setItemList] = useState([]); + const [toggleState, setToggleState] = useState(false); + + const config = { + duration: 500, + easing: Easing.bezier(0.5, 0.01, 0, 1), + }; + + const style = useAnimatedStyle(() => { + return { + width: withTiming(randomWidth.value, config), + }; + }); + + const scopeObject = ( + + ); + + const renderItems = () => { + const output = []; + for (let i = 0; i < blueCounter; i++) { + output.push( + + ); + } + return output; + }; + + return ( + +