DEV Community: Uzodike Oguejiofor

Handling Firebase authentication in a React-Native app

Uzodike Oguejiofor — Mon, 27 Dec 2021 23:02:55 +0000

Introduction

Firebase is a backend service provider that enables the building of software applications. It offers services ranging from authentication, real-time database, machine learning and storage. Over the years, firebase has been widely adopted by many companies around the world as a go-to platform in cases of building out software applications quickly.

In this tutorial, we will explore how to enable a Firebase email and password authentication in a React-Native app. This article will focus solely on implementing the signup, sign in and signout functionalities in a React-Native app.

Prerequisites

Before engaging this article, a good understanding of the following is required :

React-Native and Expo
Firebase
React Navigation
Development Environment (Visual Studio Code)

Getting Started

This article follows distinct steps of achieving the goal of enabling Firebase authentication in a React-Native app. These steps include :

Setting up a development environment
Installing Firebase
Setting up Firebase app
Integrating Firebase in the React-Native app
Building up authentication screens
Handling Firebase authentication
Observing Firebase user state
Conclusion

Setting up a development environment

Create a new React-Native project in a terminal window(command line, Powershell, Git Bash, etc) using expo-cli. Expo initializes a new project for building your React-Native app.

//creates a new React-Native project

expo init [project name]

Installing Firebase

After creating the React-Native app with Expo, install the Firebase SDK by running this command.

yarn add firebase

//If you are using npm, run this instead
npm install firebase

Setting up Firebase project

Get started by creating a new firebase project. Click on the card that says Add Project to create a new firebase project for the application

Once the project has been created and registered, enable the email and password authentication method. It is under the same section as phone and anonymous authentication method, but only the email and password authentication method is required for now.

Integrating Firebase in the React-Native app

Firebase is built for rendering backend services, that is why it’s called Backend as a Service(Baas). In the React-Native app created with Expo, create a folder called services in the root and then create a file called Firebase.js in it.

In Firebase.js import firebase as thus :

import firebase from "firebase"

Go to the Firebase project, navigate to the project settings and copy the configuration object containing keys and identifiers for the app.

Paste the copied object directly under the firebase import statement in Firebase.js

Below the firebaseConfig object, add the code below

// Initialize Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

This piece of code enables/initializes firebase in our React-Native app.

Building up authentication screens

Create a SignUp.js file and SignIn.js file and a Home.js file. These files handles the beautiful UI of the app.

SignUp.js

import React, { useState } from "react";
import { Pressable, StyleSheet, Text, TextInput, Image, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const SignUp = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [visible, setVisibility] = React.useState({ name: "eye-off" });

  //Toggles the eye icon to show the password
  const ToggleVisibilty = () => {
    if (visible.name === "eye") {
      setVisibility({ name: "eye-off" });
    } else {
      setVisibility({ name: "eye" });
    }
  };

  //Handles password visibility when the eye icon is pressed
  const secureTextEntry = () => {
    if (visible.name === "eye") {
      return false;
    } else if (visible.name === "eye-off") {
      return true;
    }
  };

  //Handles email input
  const handleEmailChange = (text) => {
    setEmail(text);
  };

  //Handles password input
  const handlePasswordChange = (text) => {
    setPassword(text);
  };

  //Handles confirm password input
  const handleConfirmPasswordChange = (text) => {
    setConfirmPassword(text);
  };

  //Handles sign up
  const handleSubmit = async () => {
   console.log("User signed up!")
  };

  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={{ fontSize: 40, fontFamily: "QuicksandBold", color: "#fff" }}>Create</Text>
        <Image
          source={require("../../assets/images/broxnbg.png")}
          style={{
            height: 30,
            width: 50,
            top: 9,
            marginRight: 5,
            transform: [{ rotate: "-10deg" }],
          }}
        />
        <Text style={{ fontSize: 40, fontFamily: "QuicksandBold", color: "#fff" }}>account</Text>
      </View>
      <View style={styles.form}>
        <TextInput
          style={styles.email}
          defaultValue={email}
          onChangeText={handleEmailChange}
          textContentType="emailAddress"
          placeholder="Email Address"
          placeholderTextColor="grey"
          keyboardType="email-address"
          returnKeyType="next"
        />
        <View style={styles.passwordContainer}>
          <TextInput
            style={styles.password}
            defaultValue={password}
            onChangeText={handlePasswordChange}
            placeholder="Enter Password"
            placeholderTextColor="grey"
            returnKeyType="next"
            secureTextEntry={secureTextEntry()}
            textContentType="password"
            keyboardType="default"
            autoCorrect={false}
          />
          <Ionicons
            name={visible.name}
            size={24}
            color="#1da"
            style={styles.eyeContainer}
            onPress={ToggleVisibilty}
          />
        </View>
        <View style={styles.passwordContainer}>
          <TextInput
            style={styles.password}
            defaultValue={confirmPassword}
            onChangeText={handleConfirmPasswordChange}
            placeholder="Confirm Password"
            placeholderTextColor="grey"
            returnKeyType="go"
            secureTextEntry={secureTextEntry()}
            textContentType="password"
            keyboardType="default"
            autoCorrect={false}
          />
        </View>
        <Pressable
          style={styles.registerContainer}
        >
          <Text style={styles.register}>want to sign in?</Text>
        </Pressable>
        <Pressable style={styles.button} onPress={handleSubmit}>
          <Text style={{ fontFamily: "QuicksandBold", fontSize: 20 }}>SIGN UP</Text>
        </Pressable>
      </View>
    </View>
  );
};

export default SignUp;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: "100%",
    backgroundColor: "#0C0C1C",
  },
  headerContainer: {
    flexDirection: "row",
    width: "80%",
    height: 50,
    marginBottom: 40,
    top: -20,
  },
  form: {
    width: "80%",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    top: -40,
  },
  email: {
    width: "100%",
    height: 60,
    backgroundColor: "#0ff1",
    borderRadius: 5,
    marginBottom: 35,
    padding: 10,
    fontSize: 18,
    fontFamily: "QuicksandBold",
    color: "#fff",
  },
  password: {
    width: "85%",
    height: 60,
    borderRadius: 5,
    marginBottom: 35,
    padding: 10,
    fontSize: 18,
    fontFamily: "QuicksandBold",
    color: "#fff",
  },

  passwordContainer: {
    flexDirection: "row",
    width: "100%",
    height: 60,
    backgroundColor: "#0ff1",
    borderRadius: 5,
    marginBottom: 35,
  },
  eyeContainer: {
    position: "absolute",
    right: 10,
    top: 20,
  },

  button: {
    width: "100%",
    height: 50,
    backgroundColor: "#1da",
    borderRadius: 5,
    justifyContent: "center",
    alignItems: "center",
    top: 30,
    padding: 10,
  },

  register: {
    fontFamily: "QuicksandBold",
    color: "#fff",
    fontSize: 18,
  },
  registerContainer: {
    top: -20,
    flexDirection: "row",
    alignSelf: "flex-end",
  },
});

That is quite a lot of code!

But it does look good!

The SignUp.js consists of TextInput fields for user email, user password and confirm password.

The SignUp component consists of the following functions :

The handleEmailChange(), handlePasswordChange() and handleConfirmPasswordChange() functions enables the update of values of the different TextInput with the onChangeText attribute.
The ToggleVisibility() function switches the eye icon depending on the visibility of the password.
secureTextEntry() function handles password visibility when the eye icon is pressed.

SignIn.js

import { useNavigation } from "@react-navigation/core";
import React, { useState } from "react";
import { Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const signIn = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [visible, setVisibility] = React.useState({ name: "eye-off" });

  const ToggleVisibilty = () => {
    if (visible.name === "eye") {
      setVisibility({ name: "eye-off" });
    } else {
      setVisibility({ name: "eye" });
    }
  };

  const secureTextEntry = () => {
    if (visible.name === "eye") {
      return false;
    } else if (visible.name === "eye-off") {
      return true;
    }
  };

  const handleEmailChange = (text) => {
    setEmail(text);
  };

  const handlePasswordChange = (text) => {
    setPassword(text);
  };

  const handleSignInClick = async () => {
    await handleSignIn(email, password);
    console.log("Login successful");
  };

  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text
          style={{
            fontSize: 40,
            fontFamily: "QuicksandBold",
            color: "#fff",
          }}
        >
          Sign in
        </Text>
        <Image
          source={require("../../assets/images/broxnbg.png")}
          style={{ height: 30, width: 50, top: 9, transform: [{ rotate: "-10deg" }] }}
        />
      </View>
      <View style={styles.form}>
        <TextInput
          style={styles.email}
          defaultValue={email}
          onChangeText={handleEmailChange}
          textContentType="emailAddress"
          placeholder="Email Address"
          placeholderTextColor="grey"
          returnKeyType="next"
        />
        <View style={styles.passwordContainer}>
          <TextInput
            style={styles.password}
            defaultValue={password}
            onChangeText={handlePasswordChange}
            placeholder="Enter Password"
            placeholderTextColor="grey"
            returnKeyType="go"
            secureTextEntry={secureTextEntry()}
            textContentType="password"
            keyboardType="default"
            autoCorrect={false}
          />
          <Ionicons
            name={visible.name}
            size={24}
            color="#1da"
            style={styles.eyeContainer}
            onPress={ToggleVisibilty}
          />
        </View>
        <Pressable style={styles.forgotContainer}>
          <Text style={styles.forgot}>Forgot Password?</Text>
        </Pressable>
        <Pressable style={styles.button} onPress={handleSignInClick}>
          <Text style={{ fontFamily: "QuicksandBold", fontSize: 20 }}>SIGN IN</Text>
        </Pressable>
        <Pressable
          style={{
            alignItems: "center",
            justifyContent: "center",
            top: "50%",
            height: 30,
          }}
        >
          <Text
            style={{
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "QuicksandBold",
              fontSize: 16,
              color: "white",
            }}
          >
            Do not have an account? Register
          </Text>
        </Pressable>
      </View>
    </View>
  );
};

export default SignIn;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: "100%",
    backgroundColor: "#0C0C1C",
  },
  headerContainer: {
    flexDirection: "row",
    width: "80%",
    height: 50,
    marginBottom: 40,
    top: -20,
  },
  form: {
    width: "80%",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    top: -40,
  },
  email: {
    width: "100%",
    height: 60,
    backgroundColor: "#0ff1",
    borderRadius: 5,
    marginBottom: 35,
    padding: 10,
    fontSize: 18,
    fontFamily: "QuicksandBold",
    color: "#fff",
  },
  password: {
    width: "85%",
    height: 60,
    borderRadius: 5,
    marginBottom: 35,
    padding: 10,
    fontSize: 18,
    fontFamily: "QuicksandBold",
    color: "#fff",
  },

  passwordContainer: {
    flexDirection: "row",
    width: "100%",
    height: 60,
    backgroundColor: "#0ff1",
    borderRadius: 5,
    marginBottom: 35,
  },
  eyeContainer: {
    position: "absolute",
    right: 10,
    top: 20,
  },

  button: {
    width: "100%",
    height: 50,
    backgroundColor: "#1da",
    borderRadius: 5,
    justifyContent: "center",
    alignItems: "center",
    top: 30,
    padding: 10,
  },

  forgot: {
    fontFamily: "QuicksandBold",
    color: "#fff",
    fontSize: 18,
  },

  forgotContainer: {
    top: -20,
    flexDirection: "row",
    alignSelf: "flex-end",
  },
});

The SignIn component is basically the same as the the SignUp component. It just has a difference of one less TextInput.

Handling Firebase authentication

In Firebase.js just below the firebase initialization snippet, add a function to handle user sign up and another function to handle user sign in.

Handling user sign up

// signup function
export const handleSignUp = async (email, password) => {
  await firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then(() => {
      console.log(firebase.auth().currentUser);
      const user = firebase.auth().currentUser;
    })
    .catch((error) => {
      console.error(error);
    });
};

This function enables user to create an account with an email and password using createUserwithEmailandPassword method provided by firebase auth API.

handleSignUp takes in two parameters email and password. These parameters takes the value of the current state of TextInput when handleSignUp function is called.

The handleSignUp function is being exported, which means that we need it to be imported into SignUp.js for usage.

In SignUp.js import handleSignup function as thus:

//importing handleSignUp() function
import { handleSignUp } from "../../services/firebase/firebaseConfig";

After importing the handleSignUp function, we call it inside the handleSubmit function.

 //Handles sign up
  const handleSubmit = async () => {
    if (email === "" && password !== confirmPassword && password === "" && confirmPassword === "") {
      console.error("Invalid Credentials");
    } else {
      try {
        await handleSignUp(email, password);
      } catch (error) {
        console.error(error);
      }
    }
  };

This function is called when the submit button is clicked. In the handleSubmit function, it checks if the email, password and confirm password value provided are valid. If any of the TextInput is empty, it returns an error message. If the email provided is already in use, it also returns an error.

Handling user sign in

// sign in function
export const handleSignIn = async (email, password) => {
  await firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(() => {
      console.log(firebase.auth().currentUser);
    })
    .catch((error) => {
      console.error(error);
    });
};

handleSignIn function enables user to sign in to an already created account with an email and password using SignInwithEmailandPassword method provided by firebase auth API.

The handleSignIn function makes sure that a request is made to the firebase API in order for a user to login to their account.

The handleSignIn function is also being exported, which implies that it needs to be accessed or called it in SignIn.js

In SignIn.js import handleSignIn function as thus:

//importing handleSignUp function
import { handleSignIn } from "../../services/firebase/firebaseConfig";

After importing the handleSignIn function, we call it inside the handleSubmit function.

 //Handles sign  in
  const handleSubmit = async () => {
    if (email === "" || password === "") {
      console.error("Invalid Credentials");
    } else {
      try {
        await handleSignIn(email, password);
      } catch (error) {
        console.error(error);
      }
    }
  };

This function is called when the submit button is pressed. In the handleSubmit function, it checks for email and password value validity. If any of the TextInput is empty, it returns an error message. It also returns an error if the user does not exist in the app.

Profile.js

import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { handleSignout } from "../../services/firebase/firebaseConfig";
import firebase from "firebase";

const Profile = () => {
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <Text>{firebase.auth().currentUser.email}</Text>

      <Pressable
        style={styles.button}
        onPress={() => {
         console.log('sign out')
        }}
      >
        <Text>sign out</Text>
      </Pressable>
    </View>
  );
};

export default Profile;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    position: "absolute",
    top: 25,
    backgroundColor: "#11DDAA",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 15,
    height: 55,
    width: 55,
  },
});

This is shown when a user is authenticated. In the code above, CurrentUser is being used to get the currently signed in or authenticated user. In this case, it displays the email of the current user.

The user can decide to sign out at any point and their should be a functionality that enables that the user signs out comfortably.

Going back to Firebase.js we add the functionality that enables the user to sign out just below the handleSigIn function.

Handling user sign out

//handles user sign out
export const handleSignout = async () => {
  await firebase
    .auth()
    .signOut()
    .then(() => {
      console.log("Signed Out");
    })
    .catch((error) => {
      console.error(error);
    });
};

handleSignout function enables user to end authenticated sessions.

The handleSignout function is imported into Home.js where it the function call occurs.

The user needs to sign out when the sign out button is pressed. Now, the button is updated to have the handleSignout function in it and also enable the user to navigate back to Login.js

<Pressable
        style={styles.button}
        onPress={() => {
          handleSignout();
          navigation.navigate("SignInScreen");
          console.log("user signed out");
        }}
      >

In Pressable the onPress attribute is updated and the user can click the button to sign out of the application. The user is navigated to the sign in screen.

Observing Firebase user state

The user sessions need to be tracked in order to make the app even more efficient. There needs to be screens and components that need authentication to be accessed. If the user is not authenticated, the login screen is displayed, if the user is authenticated, the Profile screen is displayed.

App.js

import * as React from "react";
import firebase from "firebase";

import Profile from "./Profile"
import SignIn form "./SignIn"

export default function App() {
  const [user, setUser] = React.useState();

  React.useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setUser(user);
    });
  }, []);

  const User = firebase.auth().currentUser;
  return <View>{User ? <Profile /> : <SignIn />}</View>;
}

The code snippet above is simply trying to explain that when the user is signed in, display the Home screen and when the user is signed out, display the Login screen.

onAuthstateChanged observes for any change in the user state and updates the component.

Conclusion

This article goes through a basic implementation of Firebase authentication. I believe with this, you can integrate Firebase authentication in a React-Native app.

Firebase offers other authentication options like Google, Apple, Facebook and Phone authentications. In this article, we explored only the email and password method of authentication.

To learn more about Firebase and how to use it, visit the Firebase website and you can check out the Firebase documentation.

How to use custom fonts in React-Native.

Uzodike Oguejiofor — Mon, 31 May 2021 11:29:58 +0000

Have you tried using font-family in react-native and it didn't seem to work? It's fine, you have nothing to worry about. The pattern used to render a font in CSS for the web is quite different from the way you will render it in a react-native app. LET'S DIVE IN!

To render a custom font in a react-native app, two main libraries are needed. These libraries are:

expo-font
expo-app-loading

expo-font

expo-font is a library that allows one to load fonts from the web and use it in a react-native component. It does this with the help of a method called loadAsync. To use expo-font, we will need to install it with expo.

expo install expo-font

expo-app-loading

While the font from expo-font is still loading, expo-app-loading makes sure that a loading screen component or splash screen is running or being displayed. Once the font is loaded, it automatically allows the component with the font in it to display and allows the loading screen or splash screen to unmount. It does this with the help of a component called Apploading. We can use it by installing expo-app-loading with expo

expo install expo-app-loading

The next thing to do is to download the fonts which you would want to use in your app and store them in the assets folder of your react-native app workspace. You can download google fonts at https://fonts.google.com/ they have wonderful fonts over there.

Let's Build

Firstly, we import our libraries :

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import * as Font from "expo-font";
import Apploading from "expo-app-loading";

We import Apploading from expo-app-loading, which makes sure that the splash screen component or loading screen component is visible while it is mounted and we also import everything in expo-font as Font so as to load fonts.

const getFonts = () =>
  Font.loadAsync({
    limelight: require("./assets/fonts/Limelight/Limelight- 
    Regular.ttf"),
    indie: require("./assets/fonts/Indie_Flower/IndieFlower- 
    Regular.ttf"),
  });

We use loadAsync method to asynchronously load static or remote resources that can be used in the react-native application. In this case, we are using it to asynchronously load the required font needed in the react-native app. It registers the font in a name which will be used while referring to it with fontFamily.

export default function App() {
  const [fontsloaded, setFontsLoaded] = useState(false);

  if (fontsloaded) {
    return (
     //you can return any component of your choice here
      <View style={styles.container}>
        <Text style={styles.Texts}>
          Open up App.js to start working on your app!
        </Text>
        <StatusBar style="auto" />
      </View>
    );
  } else {
    return (
      <Apploading
        startAsync={getFonts}
        onFinish={() => {
          setFontsLoaded(true);
        }}
        onError={console.warn}
      />
    );
  }
}

We use useState to monitor if the fonts is loaded or not and then we use the conditional statement to render a particular component depending depending on if the fonts is loaded or not. In the snippet above, if fonts is loaded(fontsloaded), then we return the component where the font is specified or else we return a component called Apploading. Apploading takes in three props which includes:

startAsync
onFinish
onError

startAsync
startAsync returns a promise. This promise is what is being loaded or resolved while the a loading screen or splash screen is mounted or running. In the case above, the getFont function is what is being called in startAsync.

onFinish
This guy takes in a function setFontLoaded and sets it to true. In the case above, the onFinish prop waits for startAsync to load the fonts from getFont function and then it updates the state of the react-native app thereby rendering the font being loaded.

onError
onError catches every possible error that might be thrown from startAsync and handles it properly.

Now, we can use our font in any component we wish to use it in.

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

As we can see above, the name of the font family is the specified name given to the font when loading it from loadAsync. We can now use the loaded font and also specify weight and other attributes to the font loaded.

Full code:

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import * as Font from "expo-font";
import Apploading from "expo-app-loading";

const getFonts = () =>
  Font.loadAsync({
    limelight: require("./assets/fonts/Limelight/Limelight-Regular.ttf"),
    indie: require("./assets/fonts/Indie_Flower/IndieFlower-Regular.ttf"),
  });

export default function App() {
  const [fontsloaded, setFontsLoaded] = useState(false);

  if (fontsloaded) {
    return (
    //you can return any component of your choice here
      <View style={styles.container}>
        <Text style={styles.Texts}>
          Open up App.js to start working on your app!
        </Text>
        <StatusBar style="auto" />
      </View>
    );
  } else {
    return (
      <Apploading
        startAsync={getFonts}
        onFinish={() => {
          setFontsLoaded(true);
        }}
        onError={console.warn}
      />
    );
  }
}

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

With this little tutorial, I hope you are able to load a font properly in your react-native app. Go forth and be great!!

Building a To-Do List with React-Native and Styled-Components.

Uzodike Oguejiofor — Mon, 08 Mar 2021 10:00:59 +0000

Hello there, I would like to walk you through the process of building a basic to-do list in react-native. Before I begin, here is a snippet of what we will be building in this article.

You should have a basic knowledge of React and how it works before engaging this article, as I would not be explaining some of these basic concepts

Getting Started

We would start by using Expo to create or initialize a new app from the command line. This app is created by Expo and a boilerplate on which we will be building our to-do app.



$ expo init todo-list

$ cd todo-list

$ expo start

In the code above, an app called todo-list is created, then we change the directory to the todo-list folder that was created and start the app with the 'expo start' command. Go now to the App.js file and delete all the code there. Don't worry, we will write our own code, which is much better than what is already there. Now we have set up our environment, we can begin building.

Are you ready bud?

Sure you are.

Creating Components

Let's begin by creating a folder called Components, which will hold four files. These files are components that are serving different purposes. We will call these components AddInput.js, Header.js, Empty.js, and TodoList.js. These components will be the main attributes of our work here.

In AddInput.js we should have something like this:



//AddInput.js

import React, { useState } from "react";
import {View, TextInput, Text, TouchableOpacity} from 'react-native'


export default function AddInput() {
  const [value, setValue] = useState("");

  const onChangeText = (text) => {
    setValue(text);
  };

  return (
    <View>
      <View>
        <TextInput placeholder="Add Task..." onChangeText= 
         {onChangeText} />
      </View>
      <TouchableOpacity
        onPress={() => {
          alert('button clicked')
        }}
      >
        <Text>Submit</Text>
      </TouchableOpacity>
    </View>
  );
}

This gives us a basic form where we write to-do items and a button to add them to the to-do list. Let's give this guy a bit of styling to make it look good.

styling AddInput.js
We would be using a library called styled-components to style the component. Firstly, we install styled-components



yarn add styled-components

After installing it, we import it into the AddInput.js file so we can be able to use it.



//AddInput.js
 ...
import styled from "styled-components";

 ...

//beneath the AddInput component
//styles
const ComponentContainer = styled.View`
  flex-direction: row;
`;

const InputContainer = styled.View`
  flex-direction: row;
  border-radius: 10px;
`;

const Input = styled.TextInput`
  font-size: 20px;
  background-color: white;
  width: 300px;
  margin-right: 20px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
`;

const SubmitButton = styled.TouchableOpacity`
  width: 50px;
  justify-content: center;
  align-items: center;
  background-color: whitesmoke;
  margin-bottom: 20px;
  border-radius: 50px;
`;

 ...

In the AddInput component, we would now be updating the native components to custom semantics from styled-components. These native components will now be accessed via styled-components. This is to enable the styling to take place in the AddInput component.



 ...

export default function AddInput(}) {
 ...
  return (
    <ComponentContainer>
      <InputContainer>
        <Input placeholder="Add Task..." onChangeText={onChangeText} />
      </InputContainer>
      <SubmitButton
        onPress={() => {
           alert('button clicked')
        }}
      >
        <Text>Submit</Text>
      </SubmitButton>
    </ComponentContainer>
  );
}

//beneath the AddInput component
//styles

 ...

As you can see, we updated the native components to a custom-styled component. In this case, we would not need to import these native components from react-native anymore as styled-components already let us access them.

Alright, that's enough for the AddInput.js for now. Let's quickly build up the Empty.js before we continue. The Empty.js file is rendered when the to-do list is empty. This component kind of makes the app look more appealing.



import React from "react";
import styled from "styled-components";

export default function Empty() {
  return (
    <ComponentContainer>
      <EmptyImage
        source={require("add an image here")}
      />
      <EmptyText>Add To-Do.</EmptyText>
    </ComponentContainer>
  );
}

const ComponentContainer = styled.View`
  align-items: center;
  justify-content: center;
  height: 650px;
`;

const EmptyImage = styled.Image`
  width: 350px;
  height: 200px;
`;

const EmptyText = styled.Text`
  color: white;
  font-family: poppins-bold;
  margin-top: 30px;
  font-size: 30px;
`;

Let's build what I consider the heartbeat of this app. This will happen in App.js



import React, { useState } from "react";
import { View, StatusBar, FlatList } from "react-native";
import styled from "styled-components";


export default function App() {
 const [data, setData] = useState([]);
 return (
      <ComponentContainer>
        <View>
          <StatusBar barStyle="light-content" 
             backgroundColor="midnightblue" />
        </View>

        <View>
          <FlatList
            data={data}
           renderItem={({ item }) => (
              console.log(item)
            )}
          />

        </View>
      </ComponentContainer>
    );
}

const ComponentContainer = styled.View`
  background-color: midnightblue;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

FlatList

At this point, I want to let you know that a to-do list is an array. Let me explain that with something called FlatList. FlatList is a component used to display large scrollable lists. Lists displayed with the FlatList can be infinite and unpredictable. FlatList has two major props which include data and the renderItem. data takes an array, in this case, an array called data which is an empty array and depends on the AddInput component for data to fill up the empty array. This array is the to-do list. On the other hand, we have the renderItem which is a callback function that renders each item of the array of the data prop.

Adding item to the list

Let us go back to our AddInput component and look at one of the native components called TouchableOpacity. This component takes in a prop called onPress. If you check out our above code on AddInput.js, you will see that the onPress prop is set to alert('hi') . onPress runs a function when a button is pressed. Now, the function it will be running is the one that will be adding items to the list(array called data).

In App.js we will create a method called SubmitHandler, which adds each item to the list. This is the function that will be passed into onPress.



//App.js
  ...

export default function App() {
     ...
  const submitHandler = (value) => {
    setData((prevTodo) => {
      return [
        {
          value: value,
          key: Math.random().toString(),
        },
        ...prevTodo,
      ];
    });

     ...
  };

The submitHandler method holds a function called setData that updates the state by adding items to the array.

To get the SubmitHandler method to work in the AddInput.js, we need to bring the AddInput component into the App.js and pass the SubmitHandler as a prop to the AddInput component.



//App.js
 ...
import AddInput from "./Components/AddInput";

export default function App() {
   ...

  const submitHandler = (value) => {
    setData((prevTodo) => {
      return [
        {
          value: value,
          key: Math.random().toString(),
        },
        ...prevTodo,
      ];
    });
  };


    return (
      <ComponentContainer>
        <View>
          <StatusBar barStyle="light-content" 
            backgroundColor="midnightblue" />
        </View>

        <View>
          //FlatList
          <View>
            <AddInput submitHandler={submitHandler} />
          </View>
        </View>
      </ComponentContainer>
    );

The submitHandler method is passed in as a prop to the AddInput component to be used inside the AddInput component.

Back to AddInput.js, we pass in the props



  ...
export default function AddInput({ submitHandler }){
   ...
return(
  ...
 <SubmitButton
        onPress={() => {
          setValue(submitHandler(value));
        }}
      >
        ...
      </SubmitButton>
)
}

Here, we are adding the value from our form input to the array being handled by the data prop in App.js with the help of onPress who calls the SubmitHandler function when pressed.

Displaying list to screen

Another component called TodoList is created at this point because we need it to render our to-do list items to the screen. Remember the renderItems prop from FlatList which helps to render items from the data prop to the screen? We are going to use it to render the TodoList component to the screen(this component holds our array items.)

Back to App.js



  ...
import TodoList from "./Components/TodoList";
  ...

<FlatList
            data={data}
            renderItem={({ item }) => (
              <TodoList item={item} />
            )}
          />

Now moving to the TodoList.js, we build our component.



//TodoList.js
import React from "react";
import { View } from "react-native";
import styled from "styled-components";

export default function TodoList({ item }) {
  return (
    <ComponentContainer>
      <ListContainer>
        <View>
          <TextItem>{item.value}</TextItem>
          <TextTask> Task</TextTask>
        </View>
      </ListContainer>
    </ComponentContainer>
  );
}

const ListContainer = styled.TouchableOpacity`
  background-color: whitesmoke;
  height: auto;
  width: 350px;
  margin-bottom: 30px;
  border-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
`;

const ComponentContainer = styled.View`
  flex-direction: row;
  justify-content: center;
  height: auto;
  width: auto;
`;

const TextItem = styled.Text`
  color: black;
  width: 260px;
  height: auto;
  font-size: 20px;
  margin-top: 10px;
  margin-right: 20px;
  font-family: poppins-regular;
`;

const TextTask = styled.Text`
  color: goldenrod;
  font-size: 15px;
  margin-right: 20px;
  font-family: poppins-regular;
  border-radius: 10px;
  width: 40px;
`;

At this point, each item of our to-do list should be displayed on the screen when the function in onPress is called.

Before we continue, we need to make our list of items unique with a key. We do this by employing a prop called the keyExtractor prop in FlatList. This prop assigns a key to each of the items in the list.



  ...

<FlatList
            data={data}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} />
            )}
          />

Deleting items from list

To delete items from the to-do list, we will create a method called DeleteItem in App.js and bring it in as a prop into TodoList.js



//App.js
  ...

export default function App() {
     ...
  const deleteItem = (key) => {
    setData((prevTodo) => {
      return prevTodo.filter((todo) => todo.key != key);
    });
  };
     ...
  };

Now we pass deleteItem as a prop to the TodoList component



//App.js
  ...
import TodoList from "./Components/TodoList";
  ...

<FlatList
            data={data}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} deleteItem={deleteItem} />
            )}
          />

For DeleteItem to work in TodoList.js, we need to update the component.



import React from "react";
import { View } from "react-native";
import { Entypo } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import styled from "styled-components";

export default function TodoList({ item, deleteItem }) {
  return (
    <ComponentContainer>
      <ListContainer>
        <CirlceContainer>
          <Entypo name="circle" size={20} color="midnightblue" />
        </CirlceContainer>
        <View>
          <TextItem>{item.value}</TextItem>
          <TextDate> Task</TextDate>
        </View>
        <IconContainer onPress={() => deleteItem(item.key)}>
          <MaterialIcons name="delete" size={24} color="midnightblue" />
        </IconContainer>
      </ListContainer>
    </ComponentContainer>
  );
}

const ListContainer = styled.TouchableOpacity`
  background-color: whitesmoke;
  height: auto;
  width: 350px;
  margin-bottom: 30px;
  border-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
`;

const ComponentContainer = styled.View`
  flex-direction: row;
  justify-content: center;
  height: auto;
  width: auto;
`;

const TextItem = styled.Text`
  color: black;
  width: 260px;
  height: auto;
  font-size: 20px;
  margin-top: 10px;
  margin-right: 20px;
  font-family: poppins-regular;
`;

const TextDate = styled.Text`
  color: goldenrod;
  font-size: 15px;
  margin-right: 20px;

  font-family: poppins-regular;
  border-radius: 10px;
  width: 40px;
`;

const IconContainer = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-top: 15px;

  height: 40px;

  border-radius: 10px;
`;

const CirlceContainer = styled.View`
  align-items: center;
  justify-content: center;
  padding-left: 5px;
`;

In the above code, we can delete an item from the list and we use icons to represent the delete button which removes items from the list when pressed.

Final Touches

The FlatList has other props attached to it. but we would focus on two more. These three include:
a. ListHeaderComponent
b. ListEmptyComponent

ListHeaderComponent will hold a component that contains the header of the list. Remember our Header.js file? It is time to use it.



//Header.js

import React from "react";
import styled from "styled-components";

let today = new Date().toISOString().slice(0, 10);

export default function Header() {
  return (
    <ComponentContainer>
      <HeaderText>To-Do.</HeaderText>
      <HeaderList>{today}</HeaderList>
    </ComponentContainer>
  );
}

const ComponentContainer = styled.View`
  height: 100px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
`;

const HeaderText = styled.Text`
  color: white;
  font-family: poppins-bold;
  font-size: 30px;
`;

const HeaderList = styled.Text`
  color: white;
  font-family: poppins-bold;
  font-size: 20px;
  margin-right: 20px;
`;

This component will be at the head of the screen. Let's make some changes to our App.js file.



//App.js
  ...
import Header from "./Components/Header";
  ...

<FlatList
            data={data}
            ListHeaderComponent={() => <Header />}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} deleteItem={deleteItem} />
            )}
          />

Another prop is the ListEmptyComponent which renders a component when the to-do list is empty. Here, we are going to pass in the Empty component from Empty.js



//App.js

  ...

import Empty from "./Components/Empty";

  ...

<FlatList

            data={data}

            ListHeaderComponent={() => <Header />}

            ListEmptyComponent={() => <Empty />}

            keyExtractor={(item) => item.key}

            renderItem={({ item }) => (

              <TodoList item={item} deleteItem={deleteItem} />

            )}

          />

Conclusion

Pheew! That was a lot of code. I hope you practice this and get your hands dirty. It is the best form of learning. I would love to see you tweak the code to your own taste and make something nice out of it. Good Luck in your endeavors and React-Native journey.

You can find the source code here https://github.com/ReenyDavidson/native-todo/tree/main

setTimeOut in useEffect API call (Data Fetching).

Uzodike Oguejiofor — Mon, 01 Feb 2021 01:35:53 +0000

Fetching API data with useEffect can be tricky sometimes. In this article, we will look at one trick for efficient data fetching with useEffect.

This article assumes you understand how useEffect hook works. If you do not, visit the react docs.

Let's begin, shall we?

setTimeout

setTimeout is a javascript function that takes in another function or a random code snippet and executes it after a specified period of time(millisecond).



setTimeout(
  console.log('You will get this in five seconds egghead.'), 
5000)

The setTimeout function will execute the console.log() function after five seconds of running the code.



setTimeout(
  function Add(a, b){
   return 4+7;
},
3000)

Here, we can see that the setTimeout function can take in another function. The Add function inside setTimeout function in this case runs after three seconds of running the code.

That should very much explain how the setTimeout function works. Let's now look at how we can use it for data fetching with useEffect.

Data fetching in UseEffect



useEffect(() => {
    const fetchData = async () => {
      await fetch(`https://api.github.com/users/${input}`)
        .then((res) => res.json())
        .then((res) => setData([res]))
        .catch((e) => console.error(e));
    };

   fetchData();
  }, [input]);

As we can see in the code above, A request will be sent to the github API based on what the user types in the input. But there is a problem with this method of requesting data from API, considering the fact that the search value is being typed in by the user. Let me show you!

If you look at the image above very well, you will see that there is a request to the API on every keypress in the network, which is bad. It is bad because multiple requests are being sent to the API and there are multiple responses too. This is caused by the useEffect function which runs on every state change. Remember that state changes whenever there is a keypress and useEffect runs every time there is a change in state. So every time you click on the keyboard, a request is made to the API.

Two other problems with this method are:

It slows down the app due to the too many unnecessary and irrelevant request being made to the API and it is prone to error.
There is always a limit to the number of request a user can make to the API per hour. So this reduces the number of accurate data you can get from API as so many unnecessary request are eating up the specified number of permitted API request.

Well, we obviously do not want that, so will be using setTimeout to solve the problem of multiple request. Let's go!

Solution

The solution to this issue of multiple unnecessary request is very simple. We can solve this by wrapping the fetchData function in a setTimeout function.



useEffect(() => {
    const fetchData = async () => {
      await fetch(`https://api.github.com/users/${input}`)
        .then((res) => res.json())
        .then((res) => setData([res]))
        .catch((e) => console.error(e));
    };

    const timer = setTimeout(() => {
      fetchData();
    }, 5000);

    return () => clearTimeout(timer);
  }, [input]);

In the code above, the setTimeout function delays any form of request that would have been made to the API after every keypress for five seconds. This gives user enough time to fully type in the search value. The request will be made after five seconds of no keypress. This is actually better, because it does not send multiple request to the API on every keypress.

With setTimeout, we can see that only one request is being made to the API and we get only one accurate response. This simple practice can improve the speed of the app and its performance too as it does not overload the network with multiple irrelevant requests.

With that being said, I want to believe that you will be using setTimeout in your next API call when the request involves an input value, to avoid unnecessary requests and responses. Good Luck!

Understanding React Components.

Uzodike Oguejiofor — Wed, 23 Dec 2020 23:33:22 +0000

React is a frontend UI library for designing user interfaces of web applications.

When writing a React application, it is very necessary you understand the concept of React components and what they actually do. React has made these components very easy to create and very much reusable in any case.

Now lets jump into Components, shall we?

What are React Components?

React components are independent units that make up a React app. It can also be seen as building blocks that evaluates to a full React application. You would definitely be using components a lot, trust me. In fact, you cannot build a React application without creating components, it’s impossible. Imagine building a house without blocks or building a car without it’s various parts, that is very impossible. These components must be put together to build a React application. They make up different part of the UI and also let you control all these parts independently.

const myFirstComponent = () => <h1>Yes! I wrote a component</h1>

The above is a very simple function component that will display the h1 child to the browser. Mind you, the element that is being returned by the component above is not HTML. It is called JSX. Visit here for better understanding of JSX

Types of Components

In React, there are basically two types of components. These two types of components are:

Class components
Functional components

I will start by explaining the class component.

Class Components (stateful)

The class component is said to be stateful as it tends to implement some kind of logic and also manage any local state in the component. It also accepts lifecycle methods.

import React from "react";

const FunctionComponent = (props) => {
  return (
    <div>
      <form>
        <input placeholder="Enter Term..." />
        <button>Submit</button>
      </form>
      <div>
        <h1>{props.message}</h1>
      </div>
    </div>
  );
};

export default FunctionComponent;

A simple class component in react.

state

React state can be seen as an instance of properties that affects the behavior of the UI when rendered to the browser. It handles data that changes overtime, which means it is mutable. The state is basically an object that holds some kind of data that affects the UI at anytime. This state can only be written in a class component.

import React, { Component } from "react";

class App extends Component {
  state={firstname:'', lastname:''}

  render(){
    return (
      <div>
      <form>
        <input
          placeholder='firstname'
          value={this.state.firstname}
          onChange={(e)=>{this.setState({firstname:e.target.value})}}
        />
         <input
          placeholder='lasttname'
          value={this.state.lastname}
          onChange={(e)=>{this.setState({lastname:e.target.value})}}
        />
        <button onClick={(e)=>{e.preventDefault()}}>click</button>
      </form>

</div>
    )
  }
}

export default App

A class component with state.

The above code shows that on every keypress on the form input, the component re-renders and changes the UI state.

Lifecycle methods

Lifecycle methods simply explains the all round period of the component from when it was rendered to when it was destroyed, probably as a result of leaving page or deleting something. Just like a cooking process or lifecycle, components has its own lifecycle. The three major ones are:

When the component mounts
When the component updates
When the component unmounts.

componentDidMount

This method is called once. It is fired immediately the component has been rendered. You can use this method to fetch data from an API and also render the data after the component has been mounted. You can use it to fetch any information or data you want to have immediately the component is rendered.

componentDidMount() {
       console.log('I run immediately the component is rendered')
  }

The above code will log “I run immediately the component is rendered” to the console immediately the component is rendered.

componentDidUpdate

This method is called when there’s a change in the state of a rendered component. This method accepts two arguments which are the previous props and the previous state.

componentDidUpdate(prevProps, prevState) {
  if (prevState.colors !== this.state.colors) {
    console.log('colors has changed.')
  }
}

Basically, componentDidUpdate is called based on a condition that is to be met, which is a comparison between the previous state and current state. If there is a change from previous state to current state, the method will run, but if no change has occurred in the state, the method won’t be called.

componentWillUnmount

This method is called when the component is being removed from the DOM. It is the last method you call in a component’s lifecycle. Basically, you call this guy to run immediately before the component is destroyed and in this method, you can do some cleanup that regards to the component before it unmounts.

componentWillUnmount(){
    alert('This component is about to be unmounted.');
}

In the above snip, we can see that the user is getting a warning from componentWillUnmount before the component is destroyed. Basically, componentWillUnmount holds the activity that will be carried before the component is dismantled from the DOM.

Functional Components (I am without state)

Also known as stateless component is a component that only takes in props and renders elements (JSX) to the UI. A functional component cannot manage state, making it impossible for it to implement any form of logic that might affect the state of the UI being rendered. It is basically a Javascript function returning an element.

import React from "react";

const FunctionComponent = (props) => {
  return (
    <div>
      <form>
        <input placeholder="Enter Term..." />
        <button>Submit</button>
      </form>
      <div>
        <h1>{props.message}</h1>
      </div>
    </div>
  );
};

export default FunctionComponent;

Function Component in React.

The code above shows a function component that takes in an input element and a props which is basically passing information from another component. Apart from the fact that a function component returns JSX and accepts props, We can also say that function component is used only when we have no plan to make use of state and lifecycle methods in the component. BUT! let’s not write this guy off yet, he has his own super powers which he uses to effect changes to the UI.

Function component uses what is known as Hooks to effect changes to UI. Hooks lets you hook into React state in a function component with useState and also tap into lifecycle method with useEffect. Hooks makes it possible for logic to be applied in a function component. It is a very important tool in React function components.

UseState

UseState hook basically does in function component what a state and setState would do in class component, which is manipulating the UI.

import React from "react";

const FunctionalInput = () => {
  const [state, setstate] = React.useState({ firstname: "", lastname: "" });
  const handleClick = (e) => {
    setstate(e.target.value);
    console.log(e.target.value);
  };

  return (
    <div>
      <input
        value={state.firstname}
        onChange={handleClick}
        placeholder="firstname"
      />
      <input
        value={state.lastname}
        onChange={handleClick}
        placeholder="lastname"
      />
    </div>
  );
};

export default FunctionalInput;

use of useState in a function component

The code above shows how React uses useState to manage state in a function component. In the array destructuring seen above, ‘state’ is the initial condition of the UI and we need to update that at every keypress made in the input element which re-renders the UI and also changes the state of the UI at every re-render. I came to realize that useState does a better job at managing state (just my opinion). I believe so because it just use less code to do the same thing that the class component does with setState.

useEffect

Another hook we will look at is the useEffect hook. It has some kind of similarity with the the lifecycle methods of the class component. This hook is basically a function that holds another function that will run after the the UI has been rendered, just like componentDidMount would do. It also does it with less code, unlike lifecycle methods that involves componentDidMount, componentDidUpdate and componentWillUnmount just to do what only useEffect will do.

import React, { useEffect } from "react";

const FunctionalInput = () => {
  const [state, setstate] = React.useState({ firstname: "", lastname: "" });

  //This piece of code runs after the ui has been rendered
  useEffect(() => {
    console.log("A component was rendered!!!");
  }, []);

  const handleClick = (e) => {
    setstate(e.target.value);
    console.log(e.target.value);
  };

  return (
    <div>
      <input
        value={state.firstname}
        onChange={handleClick}
        placeholder="firstname"
      />
      <input
        value={state.lastname}
        onChange={handleClick}
        placeholder="lastname"
      />
    </div>
  );
};

export default FunctionalInput;

use of useEffect in a function component

useEffect here will run immediately the UI is rendered. The array at the end makes it run once and never run again at every re-render, but without the array, useEffect continues to run each time the UI re-renders. An API can also be fetched with useEffect hook. When the UI renders, the useEffect is triggered, which allows the API to retrieve any form of data it is meant to retrieve.

In React, you can create your own custom hooks, which gives you the freedom to use hooks as you please. Note that React Hooks can only be used in React function component.

These two components mentioned in this article can be used, based on what you are building. It’s very necessary you learn how to use the two of them as a React developer.

With that being said, go and React!