React Native — Image Slider

Recently, I dive deep into React Native because of the new request from my company. As a native Android developer, it had been a tough 1 month for me to learn about JS, ES6, Hooks, Redux, etc as a beginner in JS concept.

I found that Fast Refresh of React Native is pretty impressive as it save most of my time by instantly viewing how the UI had been changed in our app, which is hardly be archived in traditional Android XML pattern.

Today, I want to share about a small project on React Native that is related to Image Slider.

When we talk about Image Slider in Android, we will firstly think about ViewPager/RecyclerView, which is really troublesome to setup if you had deal with these kind of UI elements.

But, how React Native does? Let’s find out!

Installation

Make sure you have React Native installed in your devices. Follow this link to setup.

Then, create a new project named ImageSlider with this command:

npx react-native init ImageSlider

After the project had been setup successfully, you can run the following command to start either Android/IOS project:

yarn android OR yarn ios

Refactor App.js

App.js is the entry point of React Native application, there are startup code in there and we can directly refactor it with the following code snippets:

For this project, we will stick to functional component due to its simplicity and for state management will be using React Hooks.

First, we have a image list that contain urls from Lorem Picsum photo. Then, for UI, we will have SafeAreaView that cater for IOS’s safeArea, followed by our custom ImageSlider component that receive images as its props.

ImageSlider.js

Here is the whole ImageSlider.js. I know it is a bit tough for those who just started in React Native, so let’s dive deep by parts!

1. Declare a StyleSheet styles . In styles , there is 3 styles, pagination is used for dot’s pagination, which dot and actionDot is pretty self-explanatory.
2. In UI, we wrap ScrollView and View (dot) in a general View .
3. In ScrollView , all the images is loaded in here. It is wrapped with Image and image’s source is from the Urls. Meanwhile, the image’s width and height is pre-defined to follow screen’s width and 70% of screen’s width respectively.
4. In View (dot) , we wrapped a Text component with dot. Then, by setting dot’s color, we defined active dot and inactive dot based on scrolling of ScrollView

Get Dot by copying dot from google

5. Then, we use useState() to define the initial state of our ScrollView which will takes 1st position (index = 0) when it first loaded.

6. We created a onScrollChange to listen on the scroll event. nativeEvent.contentOffset.x will return the X offset of the ScrollView , while nativeEvent.layoutMeasurement.width will return the screen width of the device. Since our image will fill full of screen’s width, we can use X offset to divide by actual screen’s width in order to get the position of the active images.

7. After getting the active position, we will setActive() with the latest position so that component that accept active props (which is View (dot))will auto re-render themselves.

8. Finally, we will set onScrollChange function into ScrollView ‘s onScroll props.

9. Wolla! We had done our simple Image slider! Here is the outcomes. 🍷

Image Slider shown in IOS simulator

Conclusion

Compared to native Android, React Native have a much simpler way because of declarative UI pattern. However, when comes to performance, I do notice that first launch of React Native app takes more time than native. However, there is always pros and cons. Since I am now learning React Native for entreprise level project, let’s make the code more professional and elegant! 😃

Github: https://github.com/WenLonG12345/RNImageSlider