Random Color Generator Expo App
Tags: reactnative, react, javascript, expo
Published: 2020-06-10 12:51:26

# **Table of Content**

- Introduction
- Getting Setup
- App Overview
- Making Navigation Screen
- State management {useState}
- Making App Screen(Simple Color Generating function)
- Ready to Roll 🥳

### **Introduction**

Expo is a framework for React-Applications. Developer can easily built both Ios and Android platform mobile application. we can easily develop, build , deploy the app quickly. And the best part about react-native is that it gives a Native look to our Mobile / Web Application from the same JavaScript and TypeScript codebase.

### **Getting Setup**

I am thinking that you have `NODE.JS` already been installed in your Machine.
 
>Install from here if Not! 👉 [Node](https://nodejs.org)

**setting-up Expo** : 

```javascript
npm install -g expo-cli

expo init Random-color-generator
```
### **App Overview**

<img src="https://dev-to-uploads.s3.amazonaws.com/i/bi4ycpcadl8mnvem1byq.jpeg" height="300" width="200"/>

- By Clicking on the `Add Color` button. we should be able to learn create Block of different colors.. 🌈

### **Making Navigation Screen**

Make Sure that you have following dependencies installed.

- react-navigation
- react-navigation-stack

```javascript
npm i react-navigation react-navigation-stack
```

> **For navigation Screen Copy the following code and paste inside your `App.js` File.** 

```javascript
import { createAppContainer } from 'react-navigation';    // calling createAppContainer from react-navigation
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./src/screens/HomeScreen";     //importing both screens to the main--> APP.js
import ColorScreen from './src/screens/ColorScreen';

const navigator = createStackNavigator(
  {
    Home: HomeScreen,                        //Stacking HomeScreen
    randC: ColorScreen                      //Stacking ColorScreen i.e our main Application
  },
  {
    initialRouteName: "Home",              //The Priority Route to be displayed first
    defaultNavigationOptions: {
      title: "App"                         //Title of the header is APP
    }
  }
);

export default createAppContainer(navigator);   //exporting default navigator
```

Now you have made the `App.js`. Now we need to make the screen between which me are navigating.

- **HomeScreen** (`FileName: HomeScreen.js`)
- **ColorScreen** (`FileName: ColorScreen.js`)

> Disclaimer : Remember that the File Structure will go like this...

```
|---src
     |---screen
            |---HomeScreen.js
            |---ColorScreen.js
```

#### ***HomeScreen.js***

```javascript
import React from "react";
import { Text, StyleSheet, View, Button } from "react-native";

const HomeScreen = ({navigation}) => {
  return (
    <View>
    <Text style={styles.text}>HomeScreen</Text>
    <Button 
     onPress={() => navigation.navigate('randC')}
     title="Color screen Demo" />
    </View>

);};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default HomeScreen;
```

### **State management {useState}**

let's understand it via example.
```javascript 
const [count,setCount] = useState(0);
```
This means that the initial value of the setCount is `0`. 
Hooks are functions that let you “hook into” React state and lifecycle features from function components. React uses an observable object as the state that observes what changes are made to the state and helps the component behave accordingly.

### **Making App Screen**(Color Generating function implemented)

```javascript
import React, { useState } from "react";
import { View,Text,StyleSheet,Button,FlatList } from "react-native";


const ColorScreen = (props) => {

    const [color, setColor] = useState([]);          //UseState Hook

return (
    <View>
        <Button title="Add a Color" onPress={()=> {
            setColor([...color,randomRGB()])         //Change Of state
        }} />
       
        <FlatList                                  //Making FlatList
          keyExtractor={(item)=>item} 
          data={color} 
          renderItem={({item}) =>{
              return  <View style={{ height:100, width:100, backgroundColor: item }} />
          }}

       />
       
    </View>
    )}

    const randomRGB = () => {              //Color Generation Function
        const red = Math.floor(Math.random()*256);
        const green = Math.floor(Math.random()*256);
        const blue = Math.floor(Math.random()*256);

        return `rgb(${red}, ${green}, ${blue})`;
    }

export default ColorScreen;           //Exporting the Screen for App.js file

const styles = StyleSheet.create({            //Defining StyleSheet
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});
```
### **Ready to Roll** 🎉

Now We are Done with our Application. Now time to see the Application rolling.

```Javascript
expo start   //This will start expo tunnel
```

- Scan the QR code and play application on Real device..


### **ScreenShots** 

- The ScreenShot shown are from my `Iphone`.
- You can also use `Android` App No worries.. React-Native is there for You.

> Disclaimer : Kindly install Expo-client Application on your devices.
 
<p align="center">
<img src="https://dev-to-uploads.s3.amazonaws.com/i/z15hjgzxpq1i9kipfeoj.jpeg" height="300" width="200"/>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/bi4ycpcadl8mnvem1byq.jpeg" height="300" width="200"/>
</p>

- Please Star it That will Make Me happy.  ⭐===😍
- Fork Repository : HERE 👇

{% github Uyadav207/Expo-React-Native %}


Thanks for Reading!
Happy Coding !

{% user uyadav207 %}