React Native Plant App UI #4 : Illustration Slider and Animated Steps

This tutorial is the fourth part of our React Native Plant App tutorial series. In the , 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. previous part 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 React Native Plant App UI #2: Implementing Custom Components Building 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 Theme 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 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. React UI Kit 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 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 section below the . Then, we will set animation for the active as per the sliding of Illustration images. Steps(Delimiter Dots) Steps Image Illustrations Delimiter dots So, let us begin!! Importing Images as Props Here, we are going to import the images for the illustration slider section. We are going to import the illustrations as props using module. In order to do this, we need to use the code from the following code snippet: defaultProps Welcome.defaultProps = { : [ { : , : ( ) }, { : , : ( ) }, { : , : ( ) }, ], }; illustrations id 1 source require '../assets/images/illustration_1.png' id 2 source require '../assets/images/illustration_2.png' id 3 source require '../assets/images/illustration_3.png' Here, we have defined an array called illustrations which holds objects with image id and image source. Now, we can use the illustrations variable as a prop in our Welcome screen. Implementing Illustrations Section Now, we are going to implement for illustration section that we sectioned out in our previous tutorial in the form of the function called . In this illustration section, we are going to display the images as a horizontal slider. For that, we need to use the code from the following code snippet: renderIllustrations() state = { } renderIllustrations(){ { illustrations } = .props; const this Here, we have initialized the state variable. Also, we have defined the constant from props. Now, we are going to display the images in the illustration section as a horizontal slider. illustrations Using FlatList component Here, we are going to use the component in order to render the images. Then, we are going to configure the with different prop configurations in order to display the horizontal image slider properly. For that, we need to use the code from the following code snippet in the function: FlatList FlatList renderIllustrations() } renderItem={({ item }) => ( false 16 "center" this ` ` ${item.id} )} /> Image source {item.source} resizeMode "contain" Here, we have a with different prop configurations which are explained below: FlatList : When its value is true, the scroll view stops on multiples of the scroll view’s size when scrolling. The default value is false. pagingEnabled : When its value is false, the view cannot be scrolled via touch interaction. The default value is true. scrollEnabled : When its value is false, the horizontal scroll bar at the bottom does not show up. showsHorizontalScrollIndicator : This prop is used to controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number corresponds to better accuracy for code that is tracking the scroll position. scrollEventThrottle : This prop will define the relationship of the snapping to the scroll view. snapToAlignment Here, we also have the prop which is used to identify each item in the list uniquely. Then, we have the renderItem prop which enables us to return the template of each item in the list. In this case, it returns the Image component that has its source from the illustrations array. keyExtractor Hence, we will get the following result in our emulator screen: As we can see, we have got the illustration section with a horizontal image slider. But, the images and sliding action does not seem appealing. Hence, we are going to use some styling properties to our and its Image component. FlatList Configuring Illustration styles Here, we are going to configure some styles to the and its Image component. For that, we are going to use the component from the package. This component allows us to get the full height and width of the app screen so that we can configure the styles using these size variables. For that, we need to import the component first as shown in the code snippet below: FlatList Dimensions react-native Dimensions Dimensions { StyleSheet, FlatList, Image, Dimensions } ; import from 'react-native' Now, we need to use the function provided by the component as shown in the code snippet below: get() Dimensions { , } = Dimensions. ( ); const width height get 'window' Now, we are going to use these width and height constants to style our illustrations in the function: renderIllustrations() } renderItem={({ item }) => ( false 16 "center" this ` ` ${item.id} )} /> Image source {item.source} resizeMode "contain" style {{ width height: height 2 overflow: visible Hence, we will get the following result in our emulator screen: As we can see, we have got the Illustrations section with a proper image slider now. And, the sliding action looks smooth and appealing. Implementing Steps Section In this step, we are going to implement the section which will include the delimiter dots as per the number of Illustration section images. Since there are three images, there will be three delimiter dots. We have section out this section as function in our last tutorial part. Now, we are going to add the to this function. For that, we need to use the code from the following code snippet: Steps renderSteps() Delimiter dots renderSteps(){ { illustrations } = .props ( ) })} const this return {illustrations.map((item, index) => { return ( Block row center middle style {styles.stepsContainer} ) } Here, in the function, we have defined the illustrations constant from props as in the function. renderSteps() renderIllustration() Then, we have returned the template with a parent component as with some style props. The template wraps the template for the delimiter dots. Here in order to make the number of delimiter dots equal to the number of illustration images, we have used the array function in the illustrations array. The function iterates through each of the items in the illustrations array and returns the template for each item. In this case, we have used the function only to make the number of delimiter dots equal to illustration images number. Then, inside the function, we have returned the component with props and styles. Block Block map() map() map() map() Block The required styles are provided in the code snippet below: styles = StyleSheet.create({ : { : , : theme.sizes.base * , : , : , }, : { : , : , : , : , }, }); const stepsContainer position 'absolute' bottom 3 right 0 left 0 steps width 5 height 5 borderRadius 5 marginHorizontal 2.5 Hence, we will get the following result in our emulator screen: As we can see, we have got the Delimiter dots at the bottom of the Illustration images. As of now, these dots will just appear lifeless as style. But we are going to add the active style with animation to these dots on the basis of the sliding of images. Adding Active Style Animation Here, we are going to add the to our Delimiter Dots in our section. For that, we need to import the component from the react-native package as shown in the code snippet below: Animation Steps Animated { StyleSheet, FlatList, Image, Dimensions, Animated } ; import from 'react-native' Now, we need to define a variable called that is initialized to value. This variable will store our animation value for horizontal animation. In order to do this, we need to use the code from the following code snippet: scrollX Animated { scrollX = Animated.Value( ); state = { } ....................... export default . class Welcome extends React Component new 0 Here, the . Value configuration enables us to bind to style properties or other props and can be interpolated as well. Animated Now, we need to configure this value into the event of the component of function as shown in the code snippet below: scrollX onScroll FlatList renderIllustrations() } renderItem={({ item }) => ( false 16 "center" this ` ` ${item.id} )} onScroll={ Animated.event([{ nativeEvent: { contentOffset: { x: this.scrollX } } }]) } /> Image source {item.source} resizeMode "contain" style {{ width height: height 2 overflow: visible Here, we have used the event function of the component which takes the as a parameter. Then, we have defined the value according to the variable inside the config. Animated nativeEvent contentOffset scrollX nativeEvent Configuring Animation in Delimiter dots in accordance with the Sliding Images Here, we are going to add animation to the which will depend on the event of the component of function. For that, we need to first initialize the step position using the divide function of the component. The divide function creates a new value composed by dividing the first value by the second value. And, its use is shown in the code snippet below: Delimiter dots onScroll FlatList renderIllustrations() Animated Animated Animated Animated stepPosition = Animated.divide( .scrollX, ); const this width Now, we are going to make some configuration in the function in order to add animation properties to the . For that, we need to use the code from the code snippet below in the function: renderSteps() Delimiter dots renderSteps() {illustrations.map( { opacity = stepPosition.interpolate({ : [index - , index, index + ], : [ , , ], : , }); ( ( ) => item, index const inputRange 1 1 outputRange 0.4 1 0.4 extrapolate 'clamp' return ) })} Block animated flex {false} key { step- index color "gray" style {[styles.steps, opacity Block Here, we have defined a constant called opacity which is initialized to the function of the constant initlized to . The function takes , and extrapolate as parameter values. The function permits input ranges to map to different output ranges. Then, we have added opacity constant to the style prop of the component. interpolate() stepPosition Animated.divide interpolate() inputRange outputRange interpolate() Block Hence, we will get the following result in our emulator screen: As we can see, we have got the active style animation in the of the section when sliding the images of the Illustrations section. On top of that, the animation looks pretty smooth and appealing. With this, we have come to the end of this part of our tutorial. Delimiter dots Steps Finally, we have successfully implemented the Illustratrations section with the image slider and Steps section with animated Delimiter dots in our Welcome screen of Plant App UI. Conclusion This tutorial is the fourth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the third part of this tutorial series. In this part of the tutorial, we got stepwise guidance on how to add an image slider using the component into our Illustrations section. We also learned how to add a beautiful active style animation to the Delimiter dots of the Steps section. Hence, we made the active animation of Delimeter dots in accordance with the sliding of images in the Illustrations section. FlatList In the next part of this tutorial series, we are going to implement the Terms of Service section using a Modal view on our Welcome screen.