React Native Plant App UI #4 : Illustration Slider and Animated Steps
Tags: programming, reactnativelayout, mobileappdevelopme, reactnativeplanta
Published: 2019-11-11 19:18:35

---
title: React Native Plant App UI #4 : Illustration Slider and Animated Steps
published: true
date: 2019-11-11 19:18:35 UTC
tags: programming,react-native-layout,mobile-app-developme,react-native-plant-a
canonical_url: https://kriss.io/react-native-plant-app-ui-4-illustration-slider-and-animated-steps/
series:  React Native Plant App UI
cover_image: https://cdn-images-1.medium.com/max/1024/0*_D3LTpDfp5Ryn-80.png
---

This tutorial is the fourth part of our React Native Plant App tutorial series.
In the [previous part](https://kriss.io/react-native-plant-app-ui-3-implementing-welcome-screen/),
we successfully implemented as well as sectioned out some of the UI sections of
the Welcome screen. This tutorial is the continuation of the same tutorial from
where we left off in the last part. So, it is recommended to go through the
previous part in order to get insight and knowledge of the overall project.

In case of wanting to learn from the beginning, all the previous parts for this
tutorial series are available below:

* [React Native Plant App UI #1: Getting
Started](https://kriss.io/react-native-plant-app-ui-1-getting-started/)
* [React Native Plant App UI #2: Implementing Custom
Components](https://kriss.io/react-native-plant-app-ui-2-implementing-custom-components/)
* [Building React Native Plant App UI #3: Implementing Welcome
Screen](https://kriss.io/react-native-plant-app-ui-3-implementing-welcome-screen/)

As stated in the previous parts, the motivation to work on this tutorial series
came from [React Native App Templates](https://www.instamobile.io/?ref=4094&campaign=dev.to) that provide a wide variety of mobile application templates written in React Native and powered
by universal features and design. These app templates allow us to implement our
own apps and even start our own startups. And, this fourth part is also the
continuation of coding implementations and designs from the Youtube video
tutorial by [React UI Kit
](https://www.youtube.com/watch?v=gyiwFcrVRCM&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=2)for
the Plant App. The video tutorial seems to deliver the coding implementation of
the overall app very thoroughly. However, there is no verbal guidance for coding
and implementation. This tutorial series is the implementation of the same
coding style and designs in the form of the article. Thus, the learners can go
through each step and take their time understanding the implementations.

#### Overview

In this fourth part of this tutorial series, we are going to implement the UI
sections that we separated out in our last tutorial part. The UI sections that
we separated were Illustration section and Steps(Delimiter Dots) section. The
idea is to start by implementing the Illustration section with a horizontal
image slider on the Welcome screen. Then, we are going to add the Delimiter Dots
known as Steps section below the Image Illustrations. Then, we will set
animation for the active Delimiter dots as per the sliding of Illustration
images.

[read more](https://kriss.io/react-native-plant-app-ui-3-implementing-welcome-screen/)