Closed jbarasa closed 1 month ago
example from Reanimated 3
import React, { useRef } from 'react'; import { StyleSheet, View, Button, ViewProps } from 'react-native'; import Animated, { useSharedValue, withSpring } from 'react-native-reanimated'; const MyView = React.forwardRef( (props: ViewProps, ref: React.LegacyRef<View>) => { // some additional logic return <View ref={ref} {...props} />; } ); // highlight-next-line const MyAnimatedView = Animated.createAnimatedComponent(MyView); export default function App() { const ref = useRef<View | null>(null); const width = useSharedValue(100); const handlePress = () => { width.value = withSpring(width.value + 50); }; return ( <View style={styles.container}> <MyAnimatedView style={{ ...styles.box, width }} /> <Button onPress={handlePress} title="Click me" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', }, box: { height: 100, backgroundColor: '#b58df1', borderRadius: 20, marginVertical: 64, }, });
You can create your custom Icon component with version 2.0.0
example from Reanimated 3