React Native Parallax Swiper

A React Native component for building an impressive horizontal swiper with a parallax effect. The parallax swiper is great for creating an onboarding UI for your app or for displaying multi-screen swipeable announcements that should catch users' attention. The component utilizes the Reanimated library to achieve seamless 120fps animations.

Installation

First of all, make sure you have installed and properly configured Reanimated. Please refer to the official installation guide.

yarn

1yarn add @kolking/react-native-parallax-swiper

npm

1npm install @kolking/react-native-parallax-swiper

Create Image Layers

To achieve the parallax effect, you need to create a set of image layers, with each layer representing a different depth of the scene. A minimum of 3 layers (though 5 would be better) is required for each slide. Your scene may contain details beyond the screen that will become visible during parallax movement. In such cases, make the layers wider than the device viewport. There are many instructions on how to create layers for parallax scenes, so if you've never done it before, be sure to Google it. Below is a simple example of the layers for a single slide:

Basic Example

1import React from 'react';
2import { Swiper, SwiperView } from '@kolking/react-native-parallax-swiper';
3
4const slide1 = [
5  require('./assets/Slide1-Layer1.png'),
6  require('./assets/Slide1-Layer2.png'),
7  require('./assets/Slide1-Layer3.png'),
8];
9
10const slide2 = [
11  require('./assets/Slide2-Layer1.png'),
12  require('./assets/Slide2-Layer2.png'),
13  require('./assets/Slide2-Layer3.png'),
14];
15
16const MyComponent = () => (
17  <Swiper>
18    <SwiperView index={1} images={slide1} />
19    <SwiperView index={2} images={slide2} />
20  </Swiper>
21);
22
23export default MyComponent;

Swiper Props

The Swiper is a ScrollView component, so you can pass ScrollViewProps such as onScroll, onMomentumScrollEnd, and so on.

Prop	Type	Default	Description
current	number		The current slide index, used in controlled mode
style	ViewStyle		Style object applied to the ScrollView
onChange	(index: number) => void		The callback that return the current slide index after change

SwiperView Props

Prop	Type	Default	Description
index	number		The view number (required)
images	ImageSourcePropType[]		The array of image layers where background is the first and foreground is the last (required)
parallax	number	1	The amount of the parallax shift, where 0 means no parallax
stiffness	number	50	The stiffness of the spring animation
damping	number	50	The damping of the spring animation
mass	number	1	The mass of the spring animation
style	ViewStyle		Style object applied to the view
contentStyle	ViewStyle		Style object applied to the content wrapper

Advanced Example

In the advanced example, the slides can also be swiped using buttons, and a page indicator is added to the bottom.

1import React, { useCallback, useRef, useState } from 'react';
2import {
3  Animated,
4  ImageSourcePropType,
5  NativeScrollEvent,
6  NativeSyntheticEvent,
7  StyleSheet,
8  Text,
9  TouchableOpacity,
10  useWindowDimensions,
11  View,
12} from 'react-native';
13import { Swiper, SwiperView } from '@kolking/react-native-parallax-swiper';
14import { PageIndicator } from 'react-native-page-indicator';
15
16type Content = {
17  title: string;
18  text: string;
19  images: ImageSourcePropType[];
20};
21
22const views: Content[] = [
23  {
24    title: 'Slide 1',
25    text: 'Slide 1 description.',
26    images: [
27      require('./assets/Slide1-Layer1.png'),
28      require('./assets/Slide1-Layer2.png'),
29      require('./assets/Slide1-Layer3.png'),
30    ],
31  },
32  {
33    title: 'Slide 2',
34    text: 'Slide 2 description.',
35    images: [
36      require('./assets/Slide2-Layer1.png'),
37      require('./assets/Slide2-Layer2.png'),
38      require('./assets/Slide2-Layer3.png'),
39    ],
40  },
41];
42
43type ButtonProps = {
44  index: number;
45  onPress: (index: number) => void;
46};
47
48const Button = ({ index, onPress }: ButtonProps) => {
49  const isLast = index + 1 === views.length;
50
51  const handlePress = useCallback(() => {
52    onPress(isLast ? 0 : index + 1);
53  }, [isLast, index, onPress]);
54
55  return (
56    <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={handlePress}>
57      <Text style={styles.buttonText}>{isLast ? 'Start Over' : 'Next'}</Text>
58    </TouchableOpacity>
59  );
60};
61
62const MyComponent = () => {
63  const { width } = useWindowDimensions();
64  const [current, setCurrent] = useState(0);
65  const currentPage = useRef(new Animated.Value(0)).current;
66
67  const handleScroll = useCallback(
68    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
69      currentPage.setValue(nativeEvent.contentOffset.x / width);
70    },
71    [currentPage, width],
72  );
73
74  return (
75    <View style={styles.root}>
76      <Swiper current={current} onChange={setCurrent} onScroll={handleScroll}>
77        {views.map(({ title, text, images }, index) => (
78          <SwiperView key={index} index={index} style={styles.view} images={images}>
79            <Text style={styles.title}>{title}</Text>
80            <Text style={styles.text}>{text}</Text>
81            <Button index={index} onPress={setCurrent} />
82          </SwiperView>
83        ))}
84      </Swiper>
85      <View style={styles.pageIndicator}>
86        <PageIndicator count={views.length} current={currentPage} color="white" />
87      </View>
88    </View>
89  );
90};
91
92const styles = StyleSheet.create({
93  root: {
94    flex: 1,
95  },
96  view: {
97    paddingVertical: 70,
98    paddingHorizontal: 30,
99    justifyContent: 'flex-end',
100  },
101  title: {
102    fontSize: 22,
103    fontWeight: '700',
104    marginBottom: 10,
105  },
106  text: {
107    fontSize: 15,
108    marginBottom: 20,
109  },
110  button: {
111    padding: 12,
112    borderRadius: 5,
113    backgroundColor: 'skyblue',
114  },
115  buttonText: {
116    fontSize: 17,
117    fontWeight: '700',
118    textAlign: 'center',
119  },
120  pageIndicator: {
121    left: 0,
122    right: 0,
123    bottom: 35,
124    alignItems: 'center',
125    position: 'absolute',
126  },
127});
128
129export default MyComponent;

Feedback

I appreciate your feedback, so please star the repository if you like it. This is the best motivation for me to maintain the package and add new features. If you have any feature requests, found a bug, or have ideas for improvement, feel free to open an issue.

Also, please check out my other React Native components that might be a good fit for your project:

• React Native Avatar - Display user avatars like a pro.
• React Native Rating - An interactive rating component.
• React Native Page Indicator - Show the current page of a swiper, slideshow, carousel, etc.
• React Native Crossfade Image - Update image source with crossfade transition effect.

License

Licensed under the MIT license.