Learn React Native State Management and Horizontal Scroll by Making a Color Palette App
By: Madhav Bahl
Tags: Mobile App Development, JavaScript, React, React Native, Programming

The most fun way to learn new technologies is to actually implement them.

A little bit of a lecture here…

Alright, if you don’t want to read it, feel free to skip to the next section.

Yes, I will feel bad if you skip, but alright, I’ll hold no grudges :(

If I could put forward all my tech experience in one sentence, it would probably be the above statement, “The most fun way to learn new technologies is to actually implement them”, and if you follow me, I guess you must have read this same statement thousands of times.

The reason why I put so much stress on this one single statement always is because, I get this question almost daily, how do I learn this, how do I learn that? And most of the time my answer is, go through docs or see some youtube videos, and make side projects.

By following the video tutorials or documentation, you can get the knowledge, but if you want that knowledge to stay in your mind for a long period, you must understand what is actually happening, and to understand that, the best way is to make side projects and actually see what is happening.

So yeah, enough side talks, let’s get to the point.

P.S. This blog is going to be a little long, I’ll try to make it “not so boring”, plus you will learn a lot, so LET’S START!

Let’s see what are we going to make today

From the title, you might have already noticed that we are going to make a color palette app today, and in the process, we will be learning many things, including —

State Management Component Lifecycle RN Toast RN Clipboard Horizontal Scrolling FlatList

and much more… (probably since I am tired to write everything, and I don’t want to exaggerate)

In case you are interested in the code only, you can visit this GitHub repo —

Alrighttt, excited about the app? Well, I am! So let’s start. (Do note that in this blog, I am assuming that you already have NodeJS installed on your system, if you don’t, just go on to this website: nodejs.org/ and download it)

(Also, I will try to make this blog very concise, so we will directly jump on to the steps, if you get any doubts in between, feel completely free to contact me)

1. Setting up our project

We will be setting up our project with expo, if you don’t know what expo is, I will tell you a little bit, but you can always read more about it on the official website: https://expo.io/

Just a random GIF :)

So yeah, as you might have guessed, expo is a tool using which we can create our react native apps faster. Basically, if you use expo, you don’t have to set up the development environment, just one command, and you are good to go.

It’s very simple to use, just go to play store or app store, download its mobile app, and on your desktop, we will do the things from expo-cli. When you run it, it will show you a QRCode which you will have to scan through the mobile app, and voila!

So, open your project directory, and type this command —

npx expo-cli init <project_name>

You can give any name to your project, but I will give it the name colorPalette . So my command would look something like —

npx expo-cli init colorPalette

Wait for a couple of seconds as it starts the process, then you will be asked about which template you want to choose. Since this is (mostly) a single page application, I will go with the minimal app

> blank a minimal app as clean as an empty canvas

Then, you will be asked a name for your app, I’ll again go with the colorPalette

{

"expo": {

"name": "colorPatette",

"slug": "colorPalette"

}

}

Then you will be prompted to install the dependencies, press ‘Y’ and done. That’s basically it!

2. Let’s run our expo app, and have a look at the existing code

If you followed the above steps correctly, you should have got this message —

To get started, you can type:

cd colorPalette

yarn start

So go into the colorPalette directory and run the command npm start or yarn start

By doing so, you will see, expo shows a QR Code on your browser, open the expo app on mobile and scan the QR Code, and the app will open.

Celebrate small victories as well :3

As of now, it’s just a minimal app having some text in the center.

Your project directory should look somewhat like this. (Ignore the gifs folder, those are the screen recordings)

If you know a little React Native, you can easily figure out that our app entry point is App.js

Now we will start making our components.

I prefer to store the components in a separate directory named components , but again, it’s your personal choice if you want to do it or not.

So I’ll just make a new components directory.

Here’s how our app looks as of now —

3. Let’s get our data ready

Alright, as you might have guessed, before starting anything, we actually need the color palettes.

So I searched quite a lot of places on the internet but couldn’t find any API which could provide some cool color palettes, so I decided to gather some myself.

Special thanks to Canva for writing this blog on 100 amazing color combinations: https://www.canva.com/learn/100-color-combinations/

I made an array of objects, each having 4 colors, each of the colors having a name and a hex code. Currently, I took the first 10 combinations from the Canva blog, but it would be a great help if any of you can add more into the JS file.

So you can download the data.js from my GitHub repo — https://github.com/MadhavBahlMD/Color-Palette-App/blob/master/data.js

4. Let’s understand the structure of a component

Before starting this, I would like to give you a code snippet that you can use as bootstrap for writing any component.

Let’s divide this component to understand it. To be honest, if you understand this code, half of your job is done. Almost every component uses this type of structure.

1. Import statements

At the top there are the various libraries and components which we want to import. In the simplest component we can import these —

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

2. Component Body

After the import statements, there is the main definition of our component. If can be either a functional component or a class component.

A functional component —

export default function App() {

return (

<View style={styles.container}>

<Text>Hi There!</Text>

</View>

);

}

Class component —

export default class Bootstrap extends Component {

render () {

return (

<View style={styles.container}>

<Text>This is a Bootstrap Component</Text>

</View>

)

}

}

This code is easily readable and understandable. At the end of the day, from every component file, we have to return a “single” component.

Don’t worry, this doesn’t mean you literally have to return a single component only, whatever you want to return, you can wrap it around some container like <View></View>

Please also notice how did we apply styling to our <View>

3. Style Sheet

This part includes the styles we set to our components. A simple example is —

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

Alright, so I guess now you must have a pretty good idea of how we can set up a React Native application and make components. Now, we can finally start with our main application.

5. Little bit about the components we will make

Alright, so mostly we will have 2 components in this project,

Home HorizontalCard

<HorizontalCard /> (as the name suggests), will be the actual card which will contain the color palette element, and we will be able to swipe it horizontally.

The <Home /> component will be a sort of wrapper from where we will call FlatList to show the different colors in a palette (or, to show the various horizontal cards, each card containing a color from that palette)

FlatList helps us render a list of data, plus it has various features which make the development really simple, for example, horizontal scroll, paging enabled, etc.

6. Let’s start making our Home Component

Here, we will import the color palette data, choose one of the palettes (let’s say the 7th one), and then render the hex codes of those colors using a FlatList.

Here’s the code, read it once, you will mostly understand, I’ll also break it down afterwards, for better clarity.

Don’t forget to import and add the <Home /> component in the App.js

import Home from './components/Home';

And <App> will return —

<View style={styles.container}>

<Home />

</View>

Whole code of App.js —

As I explained the structure of the generic component above, it must be easy for you now to understand.

In the case of <Home /> basically we are importing the palette data, which is an array of objects, then, inside the render method, we are extracting one of the palettes (7th one, I like the number 7), and then, creating a new array out of it. (This array basically extracts the 4 inner objects (colors) as array elements).

Then we are returning the FlatList, which takes in the data as the newly created colors array, horizontal true (for horizontal scrolling), showsHorizontalScrollIndicator false, to hide the scroll bar, we will use the hex codes as the keys (since hex codes will be different), and inside the renderItem method, we each iterated color which we display on the screen.

It looks like this —

Alright, it’s the time for some styling 😍

P.S. In further steps we will modify the <Home /> component, you can find the corresponding codes in this directory — https://github.com/MadhavBahlMD/Color-Palette-App/tree/master/components

7. Let’s make a welcome and end screen (:

Ok, now I am going to comment out the flat list and I’ll make a welcome and end screen first.

Alright, you might be thinking that it will take some huge code to make horizontally sliding pages, but on the contrary, it’s very simple to do so, it’s possible in a very few lines of code!

Here’s the code —

So, as you can see, here, we made 2 Views, one for welcome and one for “The End”, and wrapped them inside ScrollView.

Probably the most important things which we require are these properties of ScrollView —

horizontal={true}

pagingEnabled={true}

showsHorizontalScrollIndicator={false}

We already discussed the horizontal and showsHorizontalScrollIndicator You can easily understand the importance of pagingEnabled through what’s written about it in the official documentation,

When true, the scroll view stops on multiples of the scroll view’s size when scrolling. This can be used for horizontal pagination.

Remaining changes are just the styles, let’s have a look at what styles we added,

outer: {

flex: 1,

alignItems: 'center',

justifyContent: 'center',

width: Dimensions.get ('window').width,

height: Dimensions.get ('window').height,

}, innerText: {

color: '#fff',

fontSize: 32,

fontWeight: 'bold'

}

In the outer (container), we basically made it to cover the whole screen, so that we can see the whole card like pages, and in the innerText, we just set the color, font size, and weight.

Let’s see how it looks —

Alright, this was basically a huge thing we completed, our app is, (say), 30% complete!

And the code compiled successfully!

Alright, now’s the time to uncomment the FlatList

8. Let’s make the horizontal cards, Finally!

Ok, now that you have already seen the styling for the cards, we can actually separate it as a complete component.

Don’t uncomment the FlatList just yet, let’s first make a <HorizontalCard /> component first.

If you are wondering how will we get the color palette data inside the separate horizontal cards component, the answer is “props”.

We will call a FlatList to iterate over each color in the color palette and call one card for each color, and pass on the color data inside props.

Also, just so that you are not confused, here is how our colors array looks like (the array over which we will Iterate our FlatList) —

Array [

Object {

"hex": "#375e97",

"name": "Sky",

},

Object {

"hex": "#fb6542",

"name": "Sunset",

},

Object {

"hex": "#ffbb00",

"name": "Sunflower",

},

Object {

"hex": "#3f681c",

"name": "Grass",

},

]

It’s an array of objects, each object having the color name and hex code.

Let’s see the code for HorizontalCard component —

Hang on, we are not done yet (Don’t worry, will look at the Horizontal card component as well), we have to include the Horizontal Card component inside the Flat List in App.js

So finally we can uncomment the FlatList component now :)

So, in the render item, we can return a HorizontalCard component.

renderItem={({ item }) => {

return <HorizontalCard colorName={item} />

}}

Also, don’t forget to import it.

Let’s see how are app looks now —

Pretty amazing right?

No :)

Our job is only half done, as you can see,

I have to explain you this code. There’s some warning at the bottom which I have to remove. Add the “Copy to clipboard feature” when we click on the hex code. Add a toast to notify “Copy to clipboard: Successful”. Select a random palette from the data and show it. Add a “Refresh Palette” button in the “The End” page.

But, as you can see, this blog has already become VERY HUGE, so I’ll be discussing the things which are remaining in the next blog 😁

P.S. Don’t worry about the warning too much, it’s coming because we have a FlatList inside a ScrollView, which we will remove in the part 2 of this blog :)

“Hey, Madhav, but you didn’t explain the HorizontalCard Component!”

Yes, I did that on purpose

Yeah, this blog was getting pretty big, plus I want you to understand that code yourself. So take it as a homework, read the code and try to understand that component, if you have understood the previous sections, I am pretty sure that you will be able to understand the HorizontalCard component as well.

But even if you don’t, no worries, part 2 of this blog is will be published very soon, in which I will discuss everything that is remaining in this one.

So till now, we have done till here —