Introduction
Parallax scrolling is a popular animation technique that creates an illusion of depth by making background images move slower than foreground images. In this tutorial, we will build a beautiful Parallax Scroll Effect in React Native using react-native-reanimated. This effect is great for enhancing the user experience, especially in image carousels, onboarding screens, or feature showcases.
import {Dimensions, StyleSheet, View} from 'react-native';
import React from 'react';
import {metaData} from '../../screens/CarouselBackgroundAnimation/data';
import Animated, {
interpolate,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated';
const {width} = Dimensions.get('screen');
const _imageWidth = width * 0.7;
const _imageHeight = _imageWidth * 1.76;
const _spacing = 12;
const ParallaxView = () => {
const scrollX = useSharedValue(0);
const onScroll = useAnimatedScrollHandler(e => {
scrollX.value = e.contentOffset.x / (_imageWidth + _spacing);
});
return (
<View style={styles.container}>
<Animated.FlatList
data={metaData}
renderItem={({item, index}) => (
<Photo item={item} index={index} scrollX={scrollX} />
)}
horizontal
style={{flexGrow: 0}}
pagingEnabled
snapToInterval={_imageWidth + _spacing}
decelerationRate={'fast'}
contentContainerStyle={{
gap: _spacing,
paddingHorizontal: (width - _imageWidth) / 2,
}}
showsHorizontalScrollIndicator={false}
onScroll={onScroll}
scrollEventThrottle={1000 / 60}
/>
</View>
);
};
export default ParallaxView;
const Photo = ({item, index, scrollX}) => {
const styleZ = useAnimatedStyle(() => {
return {
transform: [
{
scale: interpolate(
scrollX.value,
[index - 1, index, index + 1],
[1.4, 1, 1.4],
),
},
{
rotate: `${interpolate(
scrollX.value,
[index - 1, index, index + 1],
[5, 0, 5],
)}deg`,
},
],
};
});
return (
<View
style={{
width: _imageWidth,
height: _imageHeight,
overflow: 'hidden',
borderRadius: 16,
}}>
<Animated.Image source={{uri: item}} style={[{flex: 1}, styleZ]} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Conclusion
In this tutorial, we built a Parallax Scroll Effect in React Native using react-native-reanimated. This technique enhances the visual appeal of image carousels, making the user experience more immersive.
Key Takeaways:
- Used useSharedValue to track the scroll position.
- Created an animated transformation using interpolate.
- Applied smooth scaling and rotation effects.
This is just the beginning! You can further customize this effect by adding more animations like opacity changes, blur effects, or background parallax layers.
Happy coding! 🚀
Top comments (0)