Gain insights into building applications with React Native Expo. Learn essential development concepts to create career opportunities and enhance your skills using familiar web technologies.

final.tar.gz

React Native

firstapp

components

states

style

flex

sound

camera

forms

forms_bonus

forms_bonus-solution

navigation

stack_challenge_solution

drawer_navigation

effect

storage

todo

React Native-test

You’ll learn to build applications using React Native Expo. It’s an amazing technology for web developers to learn building apps using technologies they would already be familiar with. It would be an amazing opportunity for companies to train their developers on this instead of hiring new app developers. 

This course contains a complete package with the most commonly used concepts in application development. It would create a foundation for you to explore this technology further.

Taking this course would open doors to many opportunities out there to progress further in your career as application developer.

Building Applications with React Native

## Creating password manager using Firestore
Let's take a look at how a password manager can be created using Firestore.

node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/

# macOS
.DS_Store


import React from "react";
import Home from "./screens/Home";


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


module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};


import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

initializeApp(firebaseConfig);

const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const firestore = getFirestore(app);

React

Dart

GoJS React

Typescript React

Vue.js

> **Note:** Once the server starts, click the URL next to “Your app can be found at:” to view the output.


The `App.js` file is used to redirect to the `Home` component.

## The `Home.js` file

- **Lines 16–19:** We have a couple of states:
  - `isLoading`: This is used to check if the data is loading.
  - `creds`: This is used to store the data from the database.
  - `password` and `title`: These are used to store the password and title entered by the user.


- **Lines 21–41:** We use the `useEffect` hook to get the data from the database. We use the `onSnapshot` method to get the data from the database. Then we call the `getCredsData` function to get the data from the snapshot.

   - The `onSnapshot` method is a listener that listens for changes in the database and then calls the function passed to it. We also return a function which unsubscribes from the listener. We give a reference to the collection we want to get in the query function. The `creds` array stores the credentials temporarily. Whenever there is a change in the database, we set the state with the new data. Then we set the state of `creds` to the array we created and set `isLoading` to false.


- **Lines 43–59:** The `deleteCreds` function takes the ID of the document to be deleted and deletes it from the database. We use the `doc` function to reference the document we want to delete. The `deleteDoc` function is used to actually delete the document using the document reference.


- **Lines 61–67:** We check if the data is loading and display a loading indicator.

- **Lines 71–96:** We map over the `creds` array and display the title and the password in a list. We also have a delete button that calls the `deleteCreds` function and passes the `id` of the document to be deleted. The `ListItem`  component from the `react-native-elements` library is used to display the list.


- **Lines 99–126:** To get a password and title from the user, we have a simple form with two text inputs and a button. We set `secureTextEntry` to `true` to hide the password. We store the title and the password in the state. Then we use `addDoc` to add the data to the database. We give the reference to the collection we want to add within the `addDoc` function. Later, we can fetch the password by using the title as the doc ID. After adding the data, we set the state to empty strings.


# Creating password manager using Firestore
Let's take a look at how a password manager can be created using Firestore.

The `App.js` file is used to redirect to the `Home` component.

# The `Home.js` file

- **Lines 16–19:** We have a couple of states:
  - `isLoading`: This is used to check if the data is loading.
  - `creds`: This is used to store the data from the database.
  - `password` and `title`: These are used to store the password and title entered by the user.


- **Lines 21–41:** We use the `useEffect` hook to get the data from the database. We use the `onSnapshot` method to get the data from the database. Then we call the `getCredsData` function to get the data from the snapshot.

   - The `onSnapshot` method is a listener that listens for changes in the database and then calls the function passed to it. We also return a function which unsubscribes from the listener. We give a reference to the collection we want to get in the query function. The `creds` array stores the credentials temporarily. Whenever there is a change in the database, we set the state with the new data. Then we set the state of `creds` to the array we created and set `isLoading` to false.


- **Lines 43–59:** The `deleteCreds` function takes the ID of the document to be deleted and deletes it from the database. We use the `doc` function to reference the document we want to delete. The `deleteDoc` function is used to actually delete the document using the document reference.


- **Lines 61–67:** We check if the data is loading and display a loading indicator.

- **Lines 71–96:** We map over the `creds` array and display the title and the password in a list. We also have a delete button that calls the `deleteCreds` function and passes the `id` of the document to be deleted. The `ListItem`  component from the `react-native-elements` library is used to display the list.


- **Lines 99–126:** To get a password and title from the user, we have a simple form with two text inputs and a button. We set `secureTextEntry` to `true` to hide the password. We store the title and the password in the state. Then we use `addDoc` to add the data to the database. We give the reference to the collection we want to add within the `addDoc` function. Later, we can fetch the password by using the title as the doc ID. After adding the data, we set the state to empty strings.


Learn to use Firestore to store and retrieve data.

Welcome to the Course

Let's Get Started With React Native

Creating Our First Application

Handling Forms

Assessment on the Basics of React Native

Navigating Between Screens

Build a Music Player Application Using React Native

The useEffect Hook

Assessment on Navigating the Components and their Lifecycle

AsyncStorage

The Todo List Application

To-do List Assessment

Connecting To External API's

Assessment on APIs

State Management

Firebase

Password Manager

Final Quiz

Conclusion

Storing Passwords to Firestore

Creating password manager using Firestore

The `Home.js` file