Photo by @donramxn.

How to use Reanimated 2 (a beginners guide)

import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';

export default () => {
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#7CA1B4',
}}
>
<TouchableOpacity
onPress={() => {
alert('todo!');
}}
>
<Image
source={require('./rns.png')}
resizeMode="contain"
style={{ width: 100, height: 100 }}
/>
</TouchableOpacity>
</View>
);
};
import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import Animated, { useSharedValue } from 'react-native-reanimated';

export default () => {
const randomNumber = useSharedValue(100);

return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#7CA1B4',
}}
>
<TouchableOpacity
onPress={() => {
alert('todo!');
}}
>
<Animated.Image
source={require('./rns.png')}
resizeMode="contain"
style={{ width: randomNumber.value, height: randomNumber.value }}
/>
</TouchableOpacity>
</View>
);
};
import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import Animated, { useSharedValue } from 'react-native-reanimated';

export default () => {
const randomNumber = useSharedValue(100);

return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#7CA1B4',
}}
>
<TouchableOpacity
onPress={() => {
randomNumber.value = Math.random() * 350;
}}
>
<Animated.Image
source={require('./rns.png')}
resizeMode="contain"
style={{ width: randomNumber.value, height: randomNumber.value }}
/>
</TouchableOpacity>
</View>
);
};
import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
} from 'react-native-reanimated';

export default () => {
const randomNumber = useSharedValue(100);

const style = useAnimatedStyle(() => {
return { width: randomNumber.value, height: randomNumber.value };
});

return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#7CA1B4',
}}
>
<TouchableOpacity
onPress={() => {
randomNumber.value = Math.random() * 350;
}}
>
<Animated.Image
source={require('./rns.png')}
resizeMode="contain"
style={style}
/>
</TouchableOpacity>
</View>
);
};
import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
} from 'react-native-reanimated';

export default () => {
const randomNumber = useSharedValue(100);

const style = useAnimatedStyle(() => {
return {
width: randomNumber.value,
height: randomNumber.value,
};
});

return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#7CA1B4',
}}
>
<TouchableOpacity
onPress={() => {
randomNumber.value = withSpring(Math.random() * 350);
}}
>
<Animated.Image
source={require('./rns.png')}
resizeMode="contain"
style={style}
/>
</TouchableOpacity>
</View>
);
};
import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
} from 'react-native-reanimated';

export default () => {
const randomNumber = useSharedValue(100);

const style = useAnimatedStyle(() => {
return {
width: withSpring(randomNumber.value),
height: withSpring(randomNumber.value, { stiffness: 10 }),
};
});

return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#7CA1B4',
}}
>
<TouchableOpacity
onPress={() => {
randomNumber.value = Math.random() * 350;
}}
>
<Animated.Image
source={require('./rns.png')}
resizeMode="contain"
style={style}
/>
</TouchableOpacity>
</View>
);
};

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store