Create a custom App Intro Slider in React Native

Source: Pinterest

One great way to give users a feel of what your application is about is to have a couple of screens displayed to them the first time they open the application. These screens, together with the signup screens (sometimes), are called onboarding screens. There exist a couple of handy libraries in the React Native ecosystem that enable developers to create sleek and amazing intro screens. An example is react-native-app-intro. There are times, however, that you might need something entirely different from what these libraries provide, like custom animations, ease of customization, etc. The aim of this write-up is to create a simple intro-slider, equipping you with the knowledge required to create even more complex sliders.

Here’s a preview of what we will be building

Ready, set? Let’s Go! 🚀

First, let’s bootstrap our React Native application. You can use Expo or the React Native CLI. I will be using the CLI to create my app. Run the following command:

npx react-native init IntroSliderApp

This creates a starter React Native project for us. Open up your App.tsx file (App.jsx if you aren’t using Typescript) and modify it to look like this

A quick walk-through of our code:

• On line 2, we get the width and height of the device. This is crucial, as we want only one screen in our slider to be visible at every swipe.
• On line 7, we make use of the ScrollView component. This component provides certain features like scrolling (as its name implies), rendering a list of items, etc. Here, we render a list of items within the ScrollView and set its orientation to horizontal. This changes the direction in which items are rendered. The default behavior is vertical(top-bottom); horizontal changes it to left-right.
• Lines 13–27 contains our various screens, each having a height and width set to the height and width of the device.

Running the above code should give you the following output.

Now we have a couple of screens in our slider. Let’s add more life to it. Modify the contents of your App.tsx to look like the following:

Here, we are adding some Images and custom styles to make our app a little bit more presentable. It should now look like the gif below. Images were sourced from Pexels.

Our slider looks to be coming together nicely. Next, we want to add pagination indicators to convey to our users what page we are on, and how many screens there are. Also, if you look closely, you’d see a scroll indicator at the bottom of the screen as we swipe. We want to remove that as well. Go ahead and update your App.tsx to look like the code below:

A quick walk-through of the changes introduced:

• On line 5, we create a function named sliderPage. This function helps us set the index of the current screen to state. We do this by accessing the x value in thecontentOffset object. By dividing x by the width of the screen, we get the index of the next screen. This function is then passed to the onScroll prop of the ScrollView on line 30.
• On line 28, we set theshowsHorizontalScrollIndicator prop to false to remove the scroll indicator.
• On line 81, we create our pagination dots wrapper view, which has an absolute position. This lets us overlay it seamlessly over the slider pages.
• On line 82, we create an Array with five items and we loop over the keys. We then create a View for each item in the array. Each View is styled depending on whether its index is equal to the value of currentPage in our state.

Okay! If all that made sense to you, and you have updated your code to look like mine, then your app should look something like this:

And that’s it! A simple, highly customizable Intro Slider screen. You can build off of this to create even more awesome things, like animating the images, having separate background colors for each screen, etc. You are only limited by your imagination (or by your UI/UX designer 😀). Feel free to leave a comment, and some claps 👏🏽 if this has been helpful. I do look forward to what you build from this.

Happy hacking!