DEV Community

Cover image for Random Color Generator Expo App
Utkarsh Yadav
Utkarsh Yadav

Posted on • Updated on

Random Color Generator Expo App

#reactnative #react #javascript #expo

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

setting-up Expo : 



npm install -g expo-cli

expo init Random-color-generator
Enter fullscreen mode Exit fullscreen mode

App Overview

  • 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


npm i react-navigation react-navigation-stack
Enter fullscreen mode Exit fullscreen mode

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



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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

HomeScreen.js 



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;
Enter fullscreen mode Exit fullscreen mode

State management {useState}

let's understand it via example.



const [count,setCount] = useState(0);
Enter fullscreen mode Exit fullscreen mode

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) 



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'
    }
});
Enter fullscreen mode Exit fullscreen mode

Ready to Roll 🎉

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



expo start   //This will start expo tunnel
Enter fullscreen mode Exit fullscreen mode
  • 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.

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

GitHub logo Uyadav207 / Expo-React-Native

An Expo-Beginners Models | Navigation | simple Apps | Getting Started with Expo 📱

Thanks for Reading!
Happy Coding !

[deleted user] image

[Deleted User]

Top comments (0)

Read next

jagroop2001 profile image

20 JavaScript Tricks Every Developer Must Know 🚀

Jagroop Singh -

kkr0423 profile image

React Basics~unit test/user event

Ogasawara Kakeru -

saifalikhan9 profile image

Need Help with My Live Transcription Browser Extension – Not Working

saifalikhan9 -

zhangzhuyue profile image

RTC design with automatic cloud calibration for simple programmable controller based on ESP8266

zhuyue -