DEV Community: Jude Ganihu

Machine Learning: Linear Regression Algorithm With One Variable

Jude Ganihu — Sat, 19 Sep 2020 10:13:34 +0000

Introduction and Basics

With the prevalence of Artificial Intelligence, data science engineers and developers working in various domains are widely using machine learning (ML) algorithms to make their tasks simpler and life easier. For example, economists are using AI to predict future market prices to make a profit, doctors use AI to classify whether a tumor is malignant or benign, certain machine learning algorithms enable Google Maps to find the fastest route to our destinations, AcuWeather to get the weather forecast of 3.5 million locations weeks in advance, Facebook to automatically detect faces and suggest tags, etcetera. The impetus behind such ubiquitous use of AI is machine learning algorithms. For anyone who wants to learn ML algorithms but hasn’t gotten their feet wet yet, you are at the right place. The preliminary algorithm that every Machine Learning enthusiast starts with is a linear regression algorithm. In this article, we will look into how linear regression algorithm works and how it can be efficiently used in your machine learning projects to build better models.

Any machine learning problem can be assigned to one of the two broad classifications: Supervised learning and Unsupervised learning

In Supervised learning, we are given a data set (input) and already have a vague idea of what our output should look like. All our algorithm does is, figure out a relationship between the input and the output and using that relationship predict even more correct answers for test inputs. It is called supervised learning because the process of an algorithm learning from the training dataset can be thought of as a teacher supervising the learning process. We know the correct answers, the algorithm iteratively makes predictions on the training data and is corrected by the teacher. Learning stops when the algorithm achieves an acceptable level of performance.
Supervised learning problems are further categorized into

Regression: A regression problem is when the output variable is a real value, such as “dollars” or “weight”.
Classification: : A classification problem is when the output variable is a category, such as “malignant” or “benign” or “disease” and “no disease”.

In Regression problems (which is our focus for today), we map our input variables to some continuous function. For example: Given the data about the size of a houses, predict their prices. So the price of a house is the function of its size. And clearly, it’s a continuous function.
In Classification problems, we map our input variables to a discrete function. For example: Given the data about favorite colors of different people, predict whether it’s a girl or a boy. Now, it is a discrete function, you are mapping all inputs to either a boy or a girl.
Linear Regression is a Regression algorithm.

What is Linear Regression?

From fig1 below, let’s say we have a dataset which contains information about the relationship between ‘housing prices’ from a fantasy country somewhere in the world and their ‘sizes’. This will be our training data (or dataset). Our goal is to design a model that can predict the price of a house if its size is provided. Using the training data, a regression line is obtained which will give minimum error.

fig1: House prices given their size

Linear Regression Algorithm

The idea is to feed our learning algorithm with some dataset, which then outputs a function called Hypothesis.

Hypothesis approximates a target function for mapping inputs to outputs.
The line seen in fig1 is the Hypothesis function. This line is the best fit that passes through most of the points and reduces the error, which is the average squared vertical distances of the scattered points from the line as shown in image below.

The diagram below conveniently gives a brief overview of the Linear Regression Algorithm.

The training set of housing prices is fed into the learning algorithm. Its main job is to produce a function, which by convention is called h (for hypothesis). You then use that hypothesis function to output the estimate house price y, by giving it the size of a house in input x.

For linear regression with one variable, our hypothesis function is of the form

h(x) = θ0 + θ1x

where θ0 and θ1 are the parameters. In our humble hypothesis function there is only one variable, that is x. For this reason our task is often called linear regression with one variable. Experts also call it univariate linear regression, where univariate means "one variable".

Hold on, we can’t tell the hypothesis function by merely looking at the graph! We need some systematic way to figure it out. This is where Cost function comes to our rescue.

Cost Function

At this point we know that there's a hypothesis function to be deduced. For our hypothesis function to fit our training data perfectly, we first need to find the parameters θ0 and θ1. If you recall how the equation of a line works, those two parameters control the slope and the height of the line. By tweaking θ0 and θ1, we want to find a line that represents at best our data. Picture 3. below shows what I mean:

We want something like the first example in the picture above. To achieve our goal we need to find the perfect values of θ0 and θ1. Our dataset has several examples where we know the size of the house x, and the actual price of the house y.
So the idea in a nutshell: let's try to choose θ0 and θ1 so that at least in the existing dataset, given the x as input parameter to the hypothesis function we can make accurate predictions for the y values. Once we are satisfied, we can use the hypothesis function with its pretty parameters to make predictions on new input data.

Cost function helps us to figure out which hypothesis best fits our data. Or more formally, It helps us to measure the accuracy of our hypothesis.

Mathematically, Cost function —

From a mathematical point of view, I want that for each i-th point in my data set, the difference hθ(x(i))−y(i) is very small. Here hθ(x(i)) is the prediction of the hypothesis when we input the size of house number i, while y(i) is the actual price of the house number i. If that difference is small, it means our hypothesis has made an accurate prediction, because it is similar to the actual data.

Note the 1/2m and the summation part: we are properly computing a mean. That 2 at the denominator will ease some calculations in future steps. Also, the squaring is done so negative values do not cancel positive values.

So now we have our hypothesis function and a way of measuring how well it fits into the data(with help of cost function). All we need to do is estimate the value of the parameters in the hypothesis function for which the cost function is minimum. This is where gradient descent comes into the picture.

Gradient Descent

The next important concept needed to understand linear regression is gradient descent. Gradient descent is a method of updating θ0 and θ1 to reduce the cost function. The idea is to start with random θ1 and θ2 values and then iteratively updating the values, reaching minimum cost.Gradient Descent is an algorithm to minimize a function and it turns out that in the case of Linear regression, the cost function is a convex function i.e it has only one global minimum as shown in the following figure.

We put θ0 on the x axis and θ1 on the y axis, with the cost function on the vertical z axis. The points on our graph will be the result of the cost function using our hypothesis with those specific theta parameters. The graph above depicts such a setup. We will know that we have succeeded when our cost function is at the very bottom of the pits in our graph, i.e. when its value is the minimum. in the image below, the red circle show the minimum points in the graph. So the algorithm to minimize the function is to compute the direction of steepest descent and then take a small step downhill and just repeat that over and over again until you find the function’s minima.
Mathematically,
j=0,1 represents the feature index number.
i) := means assigning RHS to LHS
ii) α is the learning rate i.e the length of the steps taken to reach downhill which is always positive.
iii) The derivative term gives us the direction of steepest descent.

It looks like a cup and the optimization problem consists in finding the lowest point on the bottom edge. Sometimes, when the picture becomes too messy, it is common to switch to another representation: the contour plot. A contour plot is a graphical technique for representing a 3-dimensional surface by plotting constant horizontal slices, called contours, on a 2-dimensional format.Figure below shows what I'm talking about.

At each instance of tweaking the parameters, one should simultaneously update the parameters θ1, θ2,...,θn. Updating a specific parameter prior to calculating another one on the i(th) iteration would yield to a wrong implementation.

Let θ0 = 0, it’ll help us in understanding Gradient descent function better.

Gradient Descent for a single parameter —

From the above equation, the following things can be inferred —

Derivative term

When the derivative term is positive i.e when the slope is increasing, θ1 will decrease.
When the derivative term is negative i.e when the slope is decreasing, θ1 will increase. So it’s clear that the derivative term gives us the direction to move towards. ###### Learning Rate The size of each step is determined by α, known as the Learning rate. The value of α should be selected with care to ensure that the gradient descent algorithm converges in a reasonable time.
If α is too small, gradient descent can be slow.
If α is too large, gradient descent can overshoot the minimum and may even diverge. Another thing to notice is that, Gradient Descent can converge to a local minimum even with fixed α. This is because as we approach local minima, the slope automatically starts decreasing, thus gradient descent will automatically take smaller steps. So no need to change α over time. With the help of the Gradient Descent Algorithm, we can find the appropriate parameters for our hypothesis.

Conclusion

Linear Regression algorithm is a concept every Machine Learning engineer should know and it is also the right place to start for people who want to learn Machine Learning as well. Drop your comments below or say hello on Twitter. So this is all from my side, hope everything makes sense.

How to develop and publish your react native package to NPM

Jude Ganihu — Sun, 17 May 2020 23:22:26 +0000

In this post i will show you how you can build your first react native npm package, you will be learning from my experience of building my own package. The package I created is react-native-social-fab, it is an animated floating action button you could add to your social media applications to take actions on your favorite social media accounts.

This tutorial assumes you have some basic understanding of the command line, Git and Github.

Problem

If you have been around the react native environment for some time, you should know that often times, we use one or few of the components we have created, and rather than going over the same process of building the same components over again, it would be nice to have a custom component we can import or reuse to serve the same purpose. Hence, i decided to create one from scratch and published it on npm so that others who required this type of component wouldn’t need to implement it from scratch.

Procedure

This is an overview of the procedure i followed to create my package, if you want a more detailed procedure then you can visit the official npm docs.

Note: All sample code below is from react-native-social-fab, my very own first NPM package.

To keep this article brief, I’m assuming you already have Node and NPM installed on your computer. If that’s not the case, take a look at this documentation for help.

Before we get started, make sure to register for an account on NPM. You can do that here.

Initial Setup

First, let’s create a folder where our React Native component will live.

mkdir my-component && cd my-component

Once inside the folder, we need to initialize a new NPM package by typing npm init, then it would ask you the details of your project like the name, version etc to create the package.json (this will hold some important metadata about the React Native component). Don’t worry if you don’t know what to fill in a particular field, just keep pressing enter and you can change it later on.

Dependencies

We have to determine what dependencies need to be installed for our React Native component to work properly. There are three different types of dependencies:

dependencies: These dependencies are required for the component to run, but you can’t assume the consuming app has these installed. Some examples would be lodash and prop-types.

peerDependencies: These dependencies are required for the component to run; however, they are expected to already be installed on the app. An example of this is react-native itself. However, in React Native’s case it is not necessary to add react-native as a peer dependency.

devDependencies: These are more straightforward. They are all the packages required to develop the React Native component. Examples of these would be your linter, test framework, and babel.

my package.json

{
  "name": "react-native-social-fab",
  "version": "1.0.2",
  "description": "A fully customizable social media floating action button for react native",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "floating-action-button",
    "social",
    "expo",
    "mobile",
    "ios",
    "android",
    "web"
  ],
  "bugs": {
    "url": "https://github.com/kpose/react-native-social-fab/issues"
  },
  "homepage": "https://github.com/kpose/react-native-social-fab/blob/master/README.md",
  "peerDependencies": {
    "react": "^16.0.0-beta.5",
    "react-native": "^0.49.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0",
    "metro-react-native-babel-preset": "^0.59.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kpose/react-native-social-fab"
  },
  "author": "Jude Ganihu <ganihujude@gmail.com>",
  "license": "MIT"
}

Project Structure

After the package.json is created, now create a component file in it and name it as index.js. In package.json replace the value of main with index.js. Our index.js will be the most important file for properly exporting/importing your component.

There are a few different ways of going about the content inside this file.

Directly writing the component class inside of the App.js file and exporting it there. This is the approach I followed as you will see below.
Creating a separate component JavaScript file and exporting it in App.js.
Lastly, creating one or more other components (example is "FloatingButton.js" in the described library) and container JavaScript files and exporting all the necessary ones in the App.js file.

No matter which approach is taken, what’s exported in this file is what the consuming app will ultimately import and render.

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

export default class FloatingButton extends Component {

  render() {
    return (
      //
    )
  }
}

Creating README.md

It would be awesome to describe the package for other users. Provide some README and example how to use the package. Make it as simple to use as possible. Though, it is required we add the link to our README file from our repository to the homepage value in our package.json, but, a problem i noticed while publishing was NPM not properly reading our README file. To solve this, add a README.md file to the root directory of our project.

Creating .gitignore and .npmignore
One of the final steps is to create the standard .gitignore and .npmignore files as a best practice.

.gitignore

# Logs
*.log
npm-debug.log

# Runtime data
tmp
build
dist

# Dependency directory
node_modules

.npmignore

# Logs
*.log
npm-debug.log

# Dependency directory
node_modules

# Runtime data
tmp

Publishing To NPM

Satisfied and ready to publish and share with the awesome open source community?

First, we need to login into our already created npm account by running npm login. After that run npm publish. And that’s it now the component is public and available for others. One thing to remember is NPM requires us to increment the version in package.json each time before publishing.

Once published you can test the package in any react native project by running
npm install your-package-name. Once installed successfully you can test it by importing it in the following way:
import YourComponent from 'your-package-name'
and test it. If it works, then congratulations, you have successfully created your first npm package.

Conclusion

I guess by now you might have a clear idea on how you can create your own npm package, If you run into any issues feel free to drop me a question in the comments below. You could also reach out to me on Twitter . Thanks for following along, I can’t wait to see what you build!

Contributions, pull requests, and recommendations are always welcome for react-native-social-fab. Give it a try in your next project and let me know what you think!

Redux from scratch - A gentle approach.

Jude Ganihu — Mon, 02 Mar 2020 11:43:25 +0000

Redux stands out from the galaxy of libraries and frameworks by getting so many things absolutely right: A simple, predictable state model. An emphasis on functional programming and immutable data. A tiny, focused API...What's there not to like? Redux is a predictable state container for Javascript apps, in simple terms, it is a place where we can have all our state in a Javascript application. Redux is very tiny, (2kb, including dependencies) and it can run in different environments (client, server, native).

This tutorial will guide you through building a full-stack Redux and immutable application. Through the course of this tutorial, you will learn a few things:
• What is redux?
• What redux include?
• Implementation of redux
• Create redux store with ReactJs
• Adding actions and reducers to store
• Combine reducers
• Providers
• Connects
• Redux thunk
To better understand what redux is or what it does, let us first understand the problem redux helps us solve.

Without redux

Suppose we have a root component(father) in react (fig 1), and this component has two child components(children), who in turn have 4 sub components(grand-kids). Now, suppose we have to pass some data from root component(father) to child component(grand-kids), we have to first pass through the (children) component, likewise when we need to pass data from (children) to parent component, it needs to flow through a callback function, so that callback function must first be passed down to any components that want to call it to pass data up. Imagine this was a bigger application, we are bound somehow to face some prop drilling. With REDUX, its like a central store, just like our grocery store where everything is available, users go there and purchase. This redux store holds the state of our entire application where each component can directly call for the state and data from the redux store.

Structure of redux

Redux store-- The state of every redux application lives in the Redux Store, this store is central and accessible to every component. This store includes actions, actions are plain javascript objects just like this—{TYPE: “UPDATE_NAME”, NAME: kpose}. Then we have the REDUCERS, reducers are normal functions which get action. Put simply, reducers get information from the actions and update the state in the store. When using redux, there are three principles we should have at the back of our mind:

Redux store is a single source of truth – The data/state of our application must be stored in one place which is the REDUX STORE.
State is read-only----This means that we cant change/mutate our state directly, this is why we need reducers.
Changes are made with pure functions—Reducers

Now, lets go to the real coding part, for that we use CodeSandbox where you can follow along, i recommend you keep the CodeSandbox in sync with this tutorial and actually type out the examples as you go along.

Create the Redux Store

In your CodeSandbox environment, expand the "Dependencies" section in the left pane, and click Add Dependency. Search for redux, add it, then click Add Dependency again and search for react-redux add redux-thunk, add them to your dependencies.
In a local project, you can install them with Yarn or NPM:
npm install --save redux react-redux redux-thunk.
With redux installed, let's get our redux store ready. Redux comes with a function that create stores, and it’s called createStore.
In index.js, let’s make a store. Import createStore and call it like so:

import React from "react";
import ReactDOM from "react-dom";
import App from './App'
import {createStore} from 'redux';

const store = createStore();

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

and with that Redux store is ready, but we should notice some error in our console:

The createStore accepts a reducer which is a function, this it does not have at the moment. We have to provide a function that will return the state, that is what the reducer does. So let’s make a really simple one, pass it into createStore, and see what happens, but before that lets first understand what a reducer is and how it helps us.

What is a reducer in redux?

The reducer is a pure function that takes the previous state and an action, then returns the next or new state. Reducer function gets called with 2 arguments: it takes the current state, and an action, and returns the newState. Looks a lot like the signature of an Array.reduce reducer. Redux reducers work just like the function you pass to Array.reduce! :) Reducers reduce actions, the difference is that with Array’s reduce it happens all at once, but with Redux, it happens over the lifetime of your running app. Edit our *index.js **to use a *reducer like below:

import React from "react";
import ReactDOM from "react-dom";
import App from './App'

import {createStore} from 'redux';

const nameReducer = (state, action) => {
  console.log('reducer', state, action);
  return state
}

const store = createStore(nameReducer, 
window.__REDUX_DEVTOOLS_EXTENSION__ && 
 window.__REDUX_DEVTOOLS_EXTENSION__());

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Notice we also added our Redux DevTools extension, after you make this change, open up the console, you should see a message logged there, something like this:

Remember, i said the reducer’s job is to take the current state and an action then returns the new state, it has another job, too: It returns the initial state the first time it’s called. This is sort of like “bootstrapping” your app (more like giving it a starting point). Let us give our app an initial state variable and use the ES6 default argument syntax to assign it to state.

import React from "react";
import ReactDOM from "react-dom";
import App from './App'
import {createStore} from 'redux';

const initialState = {
  name: "kpose"
};

function nameReducer(state = initialState, action) {
  console.log('reducer', state, action);
  return state;
}
const store = createStore(nameReducer);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

If you look at the console again, you’ll see it printed {name: kpose} as the value for state. That’s what we want.

Next, let's see how we can update our state.

Updating state

For us to be able to update our state, we need to dispatch an action. An action is a plain Javascript object, with a minimum of two objects, a type and a payload. Actions are very free-form things. As long as it’s an object with a type it’s fair game. In order to make an action DO something, you need to dispatch it. The store we created earlier has a built-in function called dispatch. Call dispatch with an action, and Redux will call your reducer with that action (and then replace the state with whatever your reducer returned, or it's payload).

Let’s try it out with our store.

...
const store = createStore(nameReducer);

//Dispatch action
store.dispatch({type: 'UPDATE_LASTNAME', payload:'Ganihu'})
store.dispatch({type: 'UPDATE_FIRSTNAME', payload:'Jude'})
console.log(store.getState())

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Every call to dispatch results in a call to your reducer!
Unfortunately, when we look at our console, we don't see any changes to our state, the name object in our state still has its value as "kpose" (its initial state). That’s because our reducer is not acting on those actions we dispatched. That’s an easy fix though. Let’s do that now.

Properly Dispatching Actions

To make actions actually do something, we need to write some code in the reducer that will inspect the type of each action and update the state accordingly. Let's do that now:

...
const nameReducer = (state = initialState, action) => {
  console.log("reducer", state, action);
  switch (action.type) {
    case "UPDATE_LASTNAME":
      return {
        name: action.payload
      };
    case "UPDATE_FIRSTNAME":
      return {
        name: action.payload
      };
   case "RESET":
      return {
        name: payload
      };
    default:
      return state;
  }
};
const store = createStore(nameReducer);

//Dispatch action
store.dispatch({type: 'UPDATE_LASTNAME', payload:'Ganihu'})
store.dispatch({type: 'UPDATE_FIRSTNAME', payload:'Jude'})
console.log(store.getState())

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Try this out and take a look at the console.

Hey look at that! The name is changing. This is just a simple store, i don't think it is too complicated. We just have to create our store, then create our reducer and an action that will be dispatched to update our state.

Where does React come in?

Until now we have not done any react stuff, we have been doing strictly redux. Now its time to take a step further and see how we can dispatch actions and be able to update state from our react app. But before then, we will do a little clean-up. Create a new folder in your root directory, call it "redux". The redux folder will contain different files relating to redux, and we will start with the store.js file:

Store.js

import { createStore, combineReducers } from "redux";
import nameReducer from "./reducers/nameReducers";

const reducer = combineReducers({name: nameReducer});
const initialState = {
  name: { name: "Kpose" }
};

const store = createStore(reducer, initialState, 
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
   window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

Then we have the Actions and Reducers folders, which contains the action and reducer files respectively:

//nameActions.js

const update_firstname = {
  type: "UPDATE_FIRSTNAME",
  payload: "Jude"
};

const update_lastname = {
  type: "UPDATE_LASTNAME",
  payload: "Ganihu"
};

const reset = {
  type: "RESET",
  payload: "Kpose"
};

export {update_firstname, update_lastname, reset };

//name reducer
const nameReducer = (state = {}, {type, payload}) => {
  switch (type) {
    case "UPDATE_LASTNAME":
      return {
        name: payload
      };
    case "UPDATE_FIRSTNAME":
      return {
        name: payload
      };
    case "RESET":
      return {
        name: payload
      };
    default:
      return state;
  }
};

export default nameReducer;

//index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

//import store
import store from "./redux/store";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

It is important to take note of combineReducers we encountered in store and understand why its there. Reducers know how to update the state by looking at the type of action coming in. The way reducers implement this logic is by using conditional statements. One popular way is to use a switch statement. In this case, our reducer manages changes to the application name, so it makes sense that one single reducer would handle all cases related to the name.But, what if we have unrelated aspects of our state to handle. What if our application had separate functionalities, like a user fetch, and a user update functionality?

Even though both these two functionalities deal with users, they have different responsibilities and, for the sake of making our application simpler and easier to maintain, it would be better to have separate reducers that handle these two functionalities separately.

We could name our reducers nameReducer and userReducer and put them into separate files inside the reducers directory.
But when we create a new Redux store with the createStore function, we can only pass one reducer to it. How are we supposed to fit two or more reducers as an argument to our function?

It turns out that Redux lets us combine multiple reducers into one that can be passed into createStore by using a helper function named combineReducers. The way we combine reducers is simple, we create one file per reducer in the reducers directory. We also create a file called store.js
In the store.js file we import the combineReducers function from Redux and we also import all the individual reducer files.
We then invoke combineReducers and pass to it as an argument an object that contains all the individual reducers. combineReducers will combine all the reducers passed to it into a single reducing function that can then be exported as default. We don't have multiple reducers yet, but we will soon when we expand our application so i found it important to prepare you for any surprises.
At this point we have a lovely little store with a reducer that knows how to update the state when it receives an action. Now it’s time to hook up Redux to React.
To do that, the react-redux library we installed earlier comes with 2 things: a component called Provider, and a function called connect. By wrapping the entire app with the Provider component, every component in the app tree will be able to access the Redux store if it wants to.

In index.js, import the Provider and wrap the contents of App with it. Pass the store as a prop.

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";

ReactDOM.render(
<Provider store={store}>
  <App /></Provider>, 
document.getElementById('root'));

After this, our App, and all children of App – all of them can now access the Redux store. But not automatically. We’ll need to use the connect function on our components to access the store.
Next we will create a react component where we will be able to see result of dispatched actions and see the state updated real time. Lets create a name.js file then import them into our App.

//Name.js

import React from "react";

function Name (props) {
  return (
    <div>
        <h2>Update Name</h2>
        <div>
          <button>Update First Name</button>
          <br/>
          <br/>
          <span
            style={{color:'blue'}}
            > NAME IS: </span>
            Name 
            <br/>
            <br/>
          <button>Update Last Name</button>
          <br/>
          <button>RESET</button>
        </div>
      </div>
  );
}
export default Name;

//App.js

import React from "react";
import "./styles.css";
import Name from './Name'

export default function App() {
  return (
    <div className="App">
      <h1>Redux Crash course</h1>
      <div className="App">
      <Name />
      </div>
    </div>
  );
}

The buttons don't do much at the moment, lets change that. For us to be able to update our state when we press the buttons, we’ll need to use the connect function on our components to access the store.
import { connect } from 'react-redux';
Then we need to connect the Name component to Redux at the bottom:

//Name.js
import React from "react";
import { connect } from "react-redux";
import {update_firstname, update_lastname, reset} from './redux/actions/nameActions';

function Name (props) {
  return (
    <div>
        <h2>Update Name</h2>
        <div>
          <button onClick={props.update_firstname}>Update First Name</button>
          <br/>
          <br/>
          <span
            style={{color:'blue'}}
            > NAME IS: </span>
            {props.name.name} 
            <br/>
            <br/>
          <button onClick={props.update_lastname}>Update Last Name</button>
          <br/>
          <button onClick={props.reset}>RESET</button>

        </div>
      </div>
  );
}

const MapStateToProps = (state) => {
  return {
  name: state.name
};
};
const MapDispatchToProps = (dispatch) => {
return {
update_firstname: ()=> dispatch(update_firstname),
update_lastname: ()=> dispatch(update_lastname),
reset: ()=> dispatch(reset),
}
};
export default connect(MapStateToProps, MapDispatchToProps)(Name);

More on connect

Now that we have provided the redux store to our application, we can now connect our components to it. We established previously that there is no way to directly interact with the store. We can either retrieve data by obtaining its current state, or change its state by dispatching an action. This is precisely what connect does. Consider our code above, which uses connect to map the stores state and dispatch to the props of a component.
mapStateToProps and mapDispatchToProps are both pure functions that are provided the stores state and dispatch respectively. Furthermore, both functions have to return an object, whose keys will then be passed on as the props of the component they are connected to.
In this case, mapStateToProps returns an object with only one key : “name”, and mapDispatchToProps returns an object with the update_firstname and update_lastname keys.

The connect*ed component (which is exported) provides *name, update_firstname and update_lastname as props to Name component.

Phew! OK, now we should have our entire Redux cycle completely hooked up and running, and our app updates the state to our new "name" selection. Yes, yes, I know… it’s not the most styled up app of all time, but considering the boilerplate setup for Redux, let’s just stick to the concepts and feel free to style this up as you would like. But for now, pat yourself on the back and have a sip of coffee. Great work.
Up until now, we have been dealing with synchronous actions, our next challenge will be implementing an async action API fetch for user data information, we will be using data from REQ | RES API. If you go to the website, you can see that we can get a request for user data from
/api/users?page=2. Ready?

What is Redux Thunk

Since reducers are supposed to be “pure,” we can’t do any API calls or dispatch actions from inside a reducer. We also can’t do that stuff inside a plain action creator! But what if we could make an action creator return a function that could do our work? Something like this:

function fetchUsers() {
  return function() {
    return fetch('/current_user');
  };
}

Unfortunately, redux does not support actions like this, it only accepts plain objects as actions.
This is where redux-thunk comes in. It is a middleware for Redux, that enables Redux to deal with actions like fetchUsers(), above. You can dispatch these “thunk actions” like any other action creator: dispatch(fetchUser()).
A thunk is a name for a function that’s returned by another function. In Redux terms, the function being returned is the thunk, and the one that returns it is the action creator
The function you return from your action creator will be passed 2 arguments: the dispatch function, and getState. Most of the time you’ll only need dispatch, but sometimes you want to do something conditionally, based on some value in the Redux state. In that case, call fetchState() and you’ll have the entire state to read as needed.

Fetching Data with Redux Thunk

First, lets add redux-thunk as a dependency. Then, in our store.js, import redux-thunk and apply it to the store with Redux’s applyMiddleware function. Just make sure to wrap thunk in the applyMiddlware call or it won’t work. Don’t pass thunk directly:

//store
import { createStore, combineReducers, applyMiddleware } from "redux";
import nameReducer from "./reducers/nameReducers";
import thunk from 'redux-thunk';

const reducer = combineReducers({name: nameReducer});
const initialState = {
  name: { name: "Kpose" }
};

const store = createStore(reducer, initialState, applyMiddleware(thunk), 
);

export default store;

Next, let’s go back to our actions folder and write out our fetch API code in a new file, called fetchUsers.js, and also have a userReducer.js file in our reducer folder.

//fetchUsers.js
const fetchUsers = dispatch => {
  fetch("https://reqres.in/api/users")
    .then(res => res.json())
    .then(res => dispatch({ type: "FETCH_USERS", payload: res.data }));
};
export default fetchUsers;

//userReducer.js
const userReducer = (state = [], { type, payload }) => {
  switch (type) {
    case "FETCH_USERS":
      return payload;
    default:
      return state;
  }
};
export default userReducer;

Back in our store, we can now import userReducer, add it to our combineUsers, set it to users, and set up its initial state, which will be an array. We also import Thunk and applyMiddleWare so that we can perform an async action using custom middleware. Edit our store to look like below, also notice our combineReducers in all its glory here taking our nameReducers and userReducer as arguments:

//store.js
import { createStore, combineReducers, applyMiddleware } from "redux";
import nameReducer from "./reducers/nameReducers";
import userReducer from "./reducers/userReducer";

import thunk from "redux-thunk";

const middleware = [thunk];

const reducer = combineReducers({ name: nameReducer, users: userReducer });

const initialState = {
  name: {
    users: [],
    name: "Kpose"
  }
};

const store = createStore(
  reducer,
  initialState,
  applyMiddleware(...middleware)
);

export default store;

Alright! Now, let’s go back into our Name.js file and import our fetchUsers action. We can use the map method to map through our users and display the data by dispatch*ing our fetch with a button. Our *Name.js now looks like:

//Name.js
import React from "react";
import { connect } from "react-redux";
import {
  update_firstname,
  update_lastname,
  reset
} from "./redux/actions/nameActions";
import fetchUsers from "./redux/actions/fetchUsers";

function Name(props) {
  return (
    <div>
      <h2>Update Name</h2>
      <div>
        <button onClick={props.update_firstname}>Update First Name</button>
        <br /> <br />
        <span style={{ color: "blue" }}> NAME IS: </span>
        {props.name.name}
        <br /> <br />
        <button onClick={props.update_lastname}>Update Last Name</button>
        <br />
        <button onClick={props.reset}>RESET</button>
        <br /> <br />
        <h2>Fetch Users</h2>
        <button onClick={props.fetchUsers}>FETCH USERS</button>
        {props.users.length === 0 ? (
          <p> No users yet </p>
        ) : (
          props.users.map(user => (
            <p key={user.id}>
              {" "}
              {user.id} - {user.first_name} - {user.email}
            </p>
          ))
        )}
        <br />
      </div>
    </div>
  );
}

const MapStateToProps = state => {
  return {
    name: state.name,
    users: state.users
  };
};
const MapDispatchToProps = dispatch => {
  return {
    update_firstname: () => dispatch(update_firstname),
    update_lastname: () => dispatch(update_lastname),
    reset: () => dispatch(reset),
    fetchUsers: () => dispatch(fetchUsers)
  };
};
export default connect(
  MapStateToProps,
  MapDispatchToProps
)(Name);

Awesome! Now, if we check back in our app and we click on our button to fetch users, we should see our users being fetched, our first and last names are also updated from state.

You can check out what we have built so far on the codesandbox playground here https://codesandbox.io/s/clever-moser-qt5df

Conclusion

I realize that there is a bit of set up involved here, but once we get the wheels in motion and we set things up in a way where we can observe our data management and have a store and see how our components are wrapped and listen to each other, the fundamentals for Redux start to make much more sense. This is a great starting point.
This is just a starting example for Redux and, hopefully, now that we’ve gone over some of the core concepts and seen them in action, this can help clarify a few things and start off a good launching pad to further our knowledge.
If you have any questions about the concepts or code, please leave me a message, a comment or can also reach out to me on Twitter - @kpoosee and I’ll get back to you. Cheers

React Navigation - A Light Overview

Jude Ganihu — Mon, 08 Jul 2019 12:52:08 +0000

Introduction

One of the most important tasks while building a react native app that needs some navigation is selecting the perfect navigation library for your project. React Navigation is a standalone library that allows a developer to implement this functionality easily.

At the end of the tutorial, you should have a pretty good knowledge on the various navigators from React Navigation and how to implement them.

Project Setup

Assuming that you have Node 10+ installed, you can use npm to install the Expo CLI command line utility:

npm install -g expo-cli

Then run the following commands to create a new React Native project called "NavOptions":

expo init NavOptions

cd NavOptions
npm start # you can also use: expo start

This will start a development server for you.

The next step is to install the react-navigation library in your React Native project:

yarn add react-navigation

We will be exploring three Navigation options:

Stack Navigation
Tab Navigation
Drawer Navigation

Using Stack Navigator

First let's create a new folder, components in our root directory. After that, create two files, Homescreen.js and Aboutscreen.js . Our project folder should look like the image below:

Add the block of code below to Homescreen.js

//With ES7 syntax, you could type 'rcn" to bootstrap a react native component skeleton
import React, { Component } from 'react'
import { Text, View, Button } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation';


export default class Homescreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text> Welcome To Home Screen </Text>
                <Button
                    title = "Go to About Page"
                    onPress={() => this.props.navigation.navigate('About')}
                    />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex : 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
  });

//Aboutscreen.js
import React, { Component } from 'react'
import { Text, View, Button } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class Aboutscreen extends Component {
  render() {
    return (
      <View style = {styles.container}>
        <Text> This is the About Screen. </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    container: {
      flex : 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
  });

Now, let's also make some changes to App.js. We’ll import what we need from react-navigation and implement our navigation there.

It is useful to implement our navigation in the root App.js file because the component exported from App.js is the entry point (or root component) for a React Native app, and every other component is a descendant.

As you will see, we will encapsulate every other component inside the navigation functions.

//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';

export default function App() {
  return (
    <AppContainer />
  );
}

const AppNavigator = createStackNavigator({
  Home : {
    screen : HomeScreen 
  },
  About: {
    screen: AboutScreen
  }
});

const AppContainer = createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

createStackNavigator provides a way for our app to transition between screens, where each new screen is placed on top of a stack. It is configured to have the familiar iOS and Android look and feel: new screens slide in from the right on iOS and fade in from the bottom on Android.

Above we passed in a route configuration object to the createStackNavigator function. The Home route corresponds to the HomeScreen, and the About route corresponds to AboutScreen.

If we wanted to indicate which is the initial route(first screen to be shown), we can add a separate object:

//Aboutscreen.js
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
},{
        initialRouteName: "Home"
});

Note that the Home and About route name-value pairs are enclosed by an overall route object.

To run our app, you’ll need to download the Expo client app, make sure your command line is pointed to the project folder, and your computer and phone is connected to the same network, then run the following command: npm start

Using Tab Navigator

One of the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header).
Here we will focus on how to implement tab navigation using createBottomTabNavigator.

Let’s add another screen in our app by creating a ProductScreen.js file under /components. Add the following to your ProductScreen.js

//ProductScreen.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class ProductScreen extends Component {
    render() {
        return (
            <View style = {styles.container}>
                <Text> Welcome to Product's page </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex : 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
  });

Next, we will import our ProductScreen into App.js. Also, we will implement our Tab Navigation by importing createBottonTabNavigation. Replace createStackNavigator with createBottomTabNavigator in the AppNavigator object.
Our App.js should be looking like this now:

//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
import ProductScreen from './components/ProductScreen';

export default function App() {
  return (
    <AppContainer />
  );
}

const AppNavigator = createBottomTabNavigator({
  Home : {
    screen : HomeScreen 
  },
  About: {
    screen: AboutScreen
  },
  Product: {
    screen: ProductScreen
  }
}, {
  initialRouteName: "Home"
});

const AppContainer = createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If we run our app, we should see our new navigator tabs.

Drawer Navigation

Like we did while implementing Tab Navigation, we will replace createBottomTabNavigator in our App.js with createDrawerNavigator, but first we will import the Navigator:

import { createDrawerNavigator, createAppContainer } from "react-navigation";

Then update our AppNavigator variable:

const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Contact: {
    screen: ContactScreen
  }
}, {
    initialRouteName: "Home"
  });

We can also decide to add icons beside the route names, to do this i added a few images to our assets folder, then added navigationoptions to the different screens/routes.

Make the following changes to our HomeScreen.js:

//With ES7 syntax, you could type 'rcn" to bootstrap a react native component skeleton
import React, { Component } from 'react'
import { Text, View, Button, Image, StyleSheet } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation';


export default class Homescreen extends Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({tintColor}) => (
            <Image
                source = {require('../assets/home-icon.png')}
                style= {[styles.icon, {tintColor: tintColor}]}
                />
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <Text> Welcome To Home Screen </Text>
                <Button
                    title = "Go to About Page"
                    onPress={() => this.props.navigation.navigate('About')}
                    />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex : 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    icon: {
        width:24,
        height:24,
    }
  });

Make the same changes to our AboutScreen.js and ProductScreen.js, make sure to use the appropriate icon directory path.

The tintColor prop lets us apply any color based on active or inactive states of navigation tabs and labels. For example, we can change the active state color for our nav drawer labels. Go to the AppNavigator variable and add to the options object:

const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Product: {
    screen: ProductScreen
  }
}, {
    initialRouteName: "Home",
      contentOptions: {
        activeTintColor: '#136207'
     }
  });

Conclusion

I hope you you were able to learn a few things from this article, you can as well leave some claps and spread some love. Next, we will be building a full application and will be centering on exploring React Navigation to the fullest. You can also check out the final code on my github repo.

Building an Mini Instagram clone with React Native

Jude Ganihu — Wed, 05 Jun 2019 08:11:42 +0000

WHY REACT NATIVE?

With React Native, we can build native mobile applications for multiple platforms using JavaScript and React. Importantly, the interfaces we build are translated into native views. We’ll be able to share a lot of the code we write between iOS and Android devices, and React Native makes it easy to write code specific to each platform when the need arises. We get to use one language (JavaScript), one framework (React), one styling engine, and one toolchain to write apps for both platforms. Learn once, write anywhere.

Today, we’ll use the most common React Native components to build an app that resembles Instagram. We’ll build the main image feed with the components View, Text, Image and FlatList. We’ll also build a comments screen using TextInput and ScrollView.
This is what we will be building:

The second screen opens when we tap “comments” to display comments for that image:

If you are not familiar with creating a react native app with expo, see here.
We have to break down the UI of our app into components; we will create these components then link them all. Let’s start by breaking down the image feed page.

When we are done, we will have to create four components:

Avatar - The profile photo or initials of the author of the image
AuthorRow - The horizontal row containing info about the author: their avatar and their name
Card - The item in the image feed containing the image and info about its author
CardList - The list of cards in the feed

Avatar:

Here’s what the Avatar should look like, when rendered in isolation:

For simple apps, it’s easiest to keep all of our components together in a components directory, Let’s create a new directory called components and create a new file within that called Avatar.js
Our Avatar component is going to render the components View and Text. It’s going to use StyleSheet, and it’s going to validate strings, numbers, and color props with PropTypes. Add the code below to Avatar.js

import { ColorPropType, StyleSheet, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

export default function Avatar({ size, backgroundColor, initials }) {
  const style = {
    width: size,
    height: size,
    borderRadius: size / 2,
    backgroundColor,
  };

  return (
    <View style={[styles.container, style]}>
      <Text style={styles.text}>{initials}</Text>
    </View>
  );
}

Avatar.propTypes = {
  initials: PropTypes.string.isRequired,
  size: PropTypes.number.isRequired,
  backgroundColor: ColorPropType.isRequired,
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
  },
});

AuthorRow:

In the same “Components” folder, create another file, AuthorRow.js. This is a horizontal row component containing our Avatar and the full name of the photo author. In this file, we’ll import mostly things we’ve seen already: StyleSheet, View, Text, PropTypes, and React. We’ll also import a TouchableOpacity so that we can handle taps on the “Comments” text to take us to the comments screen. We’ll also need to import the Avatar component we just made, and a few of the utility functions we copied into this project at the start of the chapter. Add the following block of code to AuthorRow.js

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';


import Avatar from './Avatar';
import getAvatarColor from '../utils/getAvatarColor';
import getInitials from '../utils/getInitials';


export default function AutoRow ({ fullname, linkText, onPressLinkText }) {
    return (
        <View style = {styles.container}>
            <Avatar
                size={35}
                initials={getInitials(fullname)}
                backgroundColor =  {getAvatarColor(fullname)} 
                />
                <Text style = {styles.text} numberofLines={1}>
                    {fullname}
                </Text>
                {!!linkText && (
                    <TouchableOpacity onPress={onPressLinkText} >
                        <Text numberOfLines={1}>{linkText}</Text>
                    </TouchableOpacity>
)}
        </View>
    )
}

const styles =StyleSheet.create({
    container: {
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    text: {
        flex: 1,
        marginHorizontal: 6,
    },
});

Card:

Next up, we’ll make the card containing AuthorRow and the Image component, we will download images from a URI. Create a new file Card.js in the components directory. Add the following to this file:

import { ActivityIndicator, Image, StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import AuthorRow from './AuthorRow';

export default class Card extends React.Component {
  static propTypes = {
    fullname: PropTypes.string.isRequired,
    image: Image.propTypes.source.isRequired,
    linkText: PropTypes.string.isRequired,
    onPressLinkText: PropTypes.func.isRequired,
  };

  state = {
    loading: true,
  };

  handleLoad = () => {
    this.setState({ loading: false });
  };

  render() {
    const { fullname, image, linkText, onPressLinkText } = this.props;
    const { loading } = this.state;

    return (
      <View>
        <AuthorRow
          fullname={fullname}
          linkText={linkText}
          onPressLinkText={onPressLinkText}
        />
        <View style={styles.image}>
          {loading && (
            <ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
          )}
          <Image
            style={StyleSheet.absoluteFill}
            source={image}
            onLoad={this.handleLoad}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    backgroundColor: 'rgba(0,0,0,0.02)',
  },
});

We used the Image component to render images on the screen. we also passed an object to the source prop of the Image component. The Image component will automatically download the data from the URI and display it once loaded. Since large images take a while to download, we showed a loading indicator before the download has finished. The order we render components in our code matters here: within the inner View, we render the ActivityIndicator before the Image. The component rendered last in the code will render on top of its siblings visually.

CardList:

The CardList component will render the infinitely scrolling list of authors and images, We’ll render this list of cards using the FlatList component. Let’s create a new file, CardList.js, in our components directory. We’ll import the FlatList, our Card, a utility for building an image url from an id, and a few other things at the top of the file. Ultimately we’ll use unsplash to fetch the data for our feed.

import { FlatList } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import { getImageFromId } from '../utils/api';
import Card from './Card';

const keyExtractor = ({ id }) => id.toString();

export default class CardList extends React.Component {
  static propTypes = {
    items: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.number.isRequired,
        author: PropTypes.string.isRequired,
      }),
    ).isRequired,
    commentsForItem: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))
      .isRequired,
    onPressComments: PropTypes.func.isRequired,
  };

  renderItem = ({ item: { id, author } }) => {
    const { commentsForItem, onPressComments } = this.props;
    const comments = commentsForItem[id];

    return (
      <Card
        fullname={author}
        image={{
          uri: getImageFromId(id),
        }}
        linkText={`${comments ? comments.length : 0} Comments`}
        onPressLinkText={() => onPressComments(id)}
      />
    );
  };

  render() {
    const { items, commentsForItem } = this.props;

    return (
      <FlatList
        data={items}
        extraData={commentsForItem}
        renderItem={this.renderItem}
        keyExtractor={keyExtractor}
      />
    );
  }
}

Adding Screens:

Our app will have two screens:
• Feed: The image feed
• Comments: The list of comments for a specific image
Create a new directory called screens within our top level image-feed directory, and create a new file within screens called Feed.js which will fetch live data from unsplash and pass the data into our CardList. Also, we need to consider loading and error states. This screen will show a simple loading indicator and error status.

import {
  ActivityIndicator,
  Text,
  ViewPropTypes,
  SafeAreaView,
} from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import { fetchImages } from '../utils/api';
import CardList from '../components/CardList';

export default class Feed extends React.Component {
  static propTypes = {
    style: ViewPropTypes.style,
    commentsForItem: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))
      .isRequired,
    onPressComments: PropTypes.func.isRequired,

  };

  static defaultProps = {
    style: null,
  };

  state = {
    loading: true,
    error: false,
    items: [],
  };

  async componentDidMount() {
    try {
      const items = await fetchImages();

      this.setState({
        loading: false,
        items,
      });
    } catch (e) {
      this.setState({
        loading: false,
        error: true,
      });
    }
  }

  render() {
    const { commentsForItem, onPressComments, style } = this.props;
    const { loading, error, items } = this.state;

    if (loading) {
      return <ActivityIndicator size="large" />;
    }

    if (error) {
      return <Text>Error...</Text>;
    }

    return (
      <SafeAreaView style={style}>
        <CardList
            items={items}
            commentsForItem={commentsForItem}
            onPressComments={onPressComments}
            />
      </SafeAreaView>
    );
  }
}

ADD FEED TO APP

Let’s update App.js to render our new screen. First we’ll need to update the imports at the top of the file, then we can render our Feed within a wrapper View:

import { Platform, StyleSheet, View } from 'react-native';
import { Constants } from 'expo';
import React from 'react';
import Feed from './screens/Feed';

export default class App extends React.Component {
  render() {
   return (
    <View style={styles.container}>
     <Feed style={styles.feed} />
    </View>
   );
  }
}

const platformVersion =
  Platform.OS === 'ios' ? parseInt(Platform.Version, 10) : Platform.Version;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
   },
  feed: {
    flex: 1,
    marginTop:
      Platform.OS === 'android' || platformVersion < 11
        ? Constants.statusBarHeight
        : 0,
   },
});

Since our Feed uses a SafeAreaView at the top level, we’ll also updated our styles. We only want to add a marginTop on Android, or on iOS versions less than 11, since the top margin is added automatically by the SafeAreaView on iOS 11+ now.

Next, we’re going to add a new screen to the same app for commenting on images. Here’s what the comments screen will look like:

To build this portion of the app, we’ll to use the TextInput, ScrollView, and Modal components. We’ll also use AsyncStorage to persist comments locally on our device.
• NavigationBar - A simple navigation bar for the top of the screen with a title and a “close” button
• CommentInput - The input field for adding new comments
• CommentList - The scrollable list of comments
The App component will be responsible for handling comment data in our app, since both the Feed screen and Comments screen need to render this data. We’ll render the Comments screen component from App, passing the comment data for the selected card as a prop. We’ll render the built-in Modal component to open and close this new screen based on the state of App.

commentInput:

Create another file , CommentInput.js, in our components folder. We want this component to have two props:
• onSubmit - we’ll call this with the comment text when the user presses the “return” key.
• placeholder - a passthrough to the placeholder prop of the TextInput. Add the following to CommentInput.js:

import { StyleSheet, TextInput, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

export default class CommentInput extends React.Component {
  static propTypes = {
    onSubmit: PropTypes.func.isRequired,
    placeholder: PropTypes.string,
  };

  static defaultProps = {
    placeholder: '',
  };

  state = {
    text: '',
  };

  handleChangeText = text => {
    this.setState({ text });
  };

  handleSubmitEditing = () => {
    const { onSubmit } = this.props;
    const { text } = this.state;

    if (!text) return;

    onSubmit(text);
    this.setState({ text: '' });
  };

  render() {
    const { placeholder } = this.props;
    const { text } = this.state;

    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          value={text}
          placeholder={placeholder}
          underlineColorAndroid="transparent"
          onChangeText={this.handleChangeText}
          onSubmitEditing={this.handleSubmitEditing}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'rgba(0,0,0,0.1)',
    paddingHorizontal: 20,
    height: 60,
  },
  input: {
    flex: 1,
  },
});

CommentList:

Next, we’ll render a list of comments for each image:
We’ll render these comments in a ScrollView. Nornally, we would have made use of a FlatList, but because of the app’s simplicity we will make use of ScrollView. For large quantities of items, or cases where many children of the ScrollView are offscreen, you will likely want to use a FlatList component for better performance.

import { ScrollView, StyleSheet, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';


export default class CommentList extends React.Component {
    static propTypes = {
        items: PropTypes.arrayOf(PropTypes.string).isRequired,
    };

    renderItem = (item, index) => (
        <View key={index} style={styles.comment}>
            <Text>{item}</Text>
        </View>
        );
        render() {
            const { items } = this.props;

            return <ScrollView>{items.map(this.renderItem)}</ScrollView>;
        }
}

const styles = StyleSheet.create({
    comment: {
        marginLeft: 20,
        paddingVertical: 20,
        paddingRight: 20,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: 'rgba(0,0,0,0.05)',
    },
});

NavigationBar:

In a real app, we would likely use a navigation library for this, but for simplicity, let’s write something small of our own. Create NavigationBar.js in the components directory and add the following:

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

export default function NavigationBar({ title, leftText, onPressLeftText }) {
    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.leftText} onPress={onPressLeftText}>
                <Text>{leftText}</Text>
            </TouchableOpacity>
            <Text style={styles.title}>{title}</Text>
        </View>
        );
}
NavigationBar.propTypes = {
    title: PropTypes.string,
    leftText: PropTypes.string,
    onPressLeftText: PropTypes.func,
};
NavigationBar.defaultProps = {
    title: '',
    leftText: '',
    onPressLeftText: () => {},
};


const styles = StyleSheet.create({
    container: {
        height: 40,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: 'rgba(0,0,0,0.1)',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontWeight: '500',
    },
    leftText: {
        position: 'absolute',
        left: 20,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
    },
    });

Commentscreen:

Create a new file Comments.js within the screens directory. Within our new screen, we’ll want to render first the NavigationBar, then the CommentInput, and finally the CommentList. We want this screen to take 4 props:
• comments - The array of comments to display.
• onClose - A function prop to call when the user presses the close button.
• onSubmitComment - A function prop to call when the user adds a new comment.
• style - The style to apply to the top-level View of this screen (just like we did with Feed) Add the following to Comments.js:

import { SafeAreaView, ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import NavigationBar from '../components/NavigationBar';
import CommentList from '../components/CommentList';
import CommentInput from '../components/CommentInput';

export default function Comments({
    style,
    onSubmitComment,
    onClose,
    comments,
}) {
    return (
        <SafeAreaView style = {style}>
            <NavigationBar
                title="Comments"
                leftText= 'Close'
                onPressLeftText= {onClose}
                />

                <CommentInput placeholder = "Leave a Comment" onSubmit={onSubmitComment} />
                <CommentList items ={comments} />
        </SafeAreaView>
    );
}

Comments.propTypes = {
    style: ViewPropTypes.style,
    comments: PropTypes.arrayOf(PropTypes.string).isRequired,
    onClose: PropTypes.func.isRequired,
    onSubmitComment: PropTypes.func.isRequired,
 };

 Comments.defaultProps = {
    style: null,
 };

The code for our screen is fairly simple, since we already built the different parts of the UI as individual components.

Wrap It Up:

In bigger apps we would probably use be using a navigation library to navigate our screens, rather here we used the built-in Modal component. This helps us navigate from the Feed screen we made earlier to the new Comments
screen. We maintain the state of the Modal in the state of our App component.We also created a function property onSubmitComment on our App component for saving a new comment into the commentsForItem object in our state. Update our App.js to the following:

import { AsyncStorage, Modal, Platform, StyleSheet, View } from 'react-native';
import { Constants } from 'expo';
import React from 'react';

import Comments from './screens/Comments';
import Feed from './screens/Feed';

const ASYNC_STORAGE_COMMENTS_KEY = 'ASYNC_STORAGE_COMMENTS_KEY';

export default class App extends React.Component {
  state = {
    commentsForItem: {},
    showModal: false,
    selectedItemId: null,
  };

  async componentDidMount() {
    try {
      const commentsForItem = await AsyncStorage.getItem(
        ASYNC_STORAGE_COMMENTS_KEY,
      );

      this.setState({
        commentsForItem: commentsForItem ? JSON.parse(commentsForItem) : {},
      });
    } catch (e) {
      console.log('Failed to load comments');
    }
  }

  onSubmitComment = text => {
    const { selectedItemId, commentsForItem } = this.state;
    const comments = commentsForItem[selectedItemId] || [];

    const updated = {
      ...commentsForItem,
      [selectedItemId]: [...comments, text],
    };

    this.setState({ commentsForItem: updated });

    try {
      AsyncStorage.setItem(ASYNC_STORAGE_COMMENTS_KEY, JSON.stringify(updated));
    } catch (e) {
      console.log('Failed to save comment', text, 'for', selectedItemId);
    }
  };

  openCommentScreen = id => {
    this.setState({
      showModal: true,
      selectedItemId: id,
    });
  };

  closeCommentScreen = () => {
    this.setState({
      showModal: false,
      selectedItemId: null,
    });
  };

  render() {
    const { commentsForItem, showModal, selectedItemId } = this.state;

    return (
      <View style={styles.container}>
        <Feed
          style={styles.feed}
          commentsForItem={commentsForItem}
          onPressComments={this.openCommentScreen}
        />
        <Modal
          visible={showModal}
          animationType="slide"
          onRequestClose={this.closeCommentScreen}
        >
          <Comments
            style={styles.comments}
            comments={commentsForItem[selectedItemId] || []}
            onClose={this.closeCommentScreen}
            onSubmitComment={this.onSubmitComment}
          />
        </Modal>
      </View>
    );
  }
}

const platformVersion =
  Platform.OS === 'ios' ? parseInt(Platform.Version, 10) : Platform.Version;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  feed: {
    flex: 1,
    marginTop:
      Platform.OS === 'android' || platformVersion < 11
        ? Constants.statusBarHeight
        : 0,
  },
  comments: {
    flex: 1,
    marginTop:
      Platform.OS === 'ios' && platformVersion < 11
        ? Constants.statusBarHeight
        : 0,
  },
});

As an optional final step, we persist the comments we write to the device via the AsyncStorage API.
To run our app, go here

Reference
Fullstack React Native by Devin Abbott