React Native asynchronous operations

Lecture 2: Introduction to Components and JavaScript

• Today's topics includes components, let and const, state and props, creating a component, and events related to Javascript and React

Imports and Exports

• import keyword loads values from other JavaScript files via relative path
• export keyword exposes values for importing

Let and Const

• let and const are used to declare variables and constants.
• const is used to declare constants
• let is used to declare variables
• Avoid variables with var unless maintaining legacy code

Component API

• React elements respond to changes like button clicks or network requests
• They are built using State and Props

Props

• Refer to the properties passed to the constructor of a component
• The properties include onPress, title, color, and accessibilityLabel
• Parent components can pass props down to child components

State

• A plain JavaScript object is used for recording and reacting to user interactions
• Its an object with details about how a Component renders

What are Components?

• Components are the reusable building blocks to create the user interface of an app.
• View, Text, etc are built-in components.
• Custom components can also be defined.

Defining Components

• React components defined in two ways
• Function components: takes parameters (props) as input and return React element
• Class components: class that extends React.Component and implements render method

Function Components

• A function component will always return a React element

Composing Components

• Custom components like MyComponent can be used in the same way as built-in components
• Props used to communicate between composed components

Class Components

• Components created by subclassing React.Component and overriding the render() method
• Access props using this.props

Events

• Some components trigger events or callbacks in response to user input.
• To add an event handler, pass a function as a prop to a React element

Introductions to Networking

• Mobile apps need to load resources from a remote URL
• Users might want to make POST requests to a REST API or fetch static content from another server

Fetch API

• React Native provides the Fetch API for networking needs when loading external data.
• Fetch will seem familiar if you have used XMLHttpRequest or other networking APIs before.

Making Requests with Fetch

• Content fetched from an arbitrary URL by passing the URL to fetch
• Fetch takes an optional second argument to customize the HTTP request including specifying headers or make a POST request

Using the Fetch API

• Fetch API provides a JavaScript interface to access and manipulate parts of the protocol including requests and responses
• Fetch is promise-based and provides an easier-to- use alternative for HTTP requests
• Fetch integrates advanced HTTP concepts such as CORS and other extensions to HTTP

Basic Fetch Request

• The simple use of Fetch takes one argument, which is the path to the resource
• However, Fetch does not return the JSON response body directly, instead it returns a results in a Response object
• A JavaScript interface interacts with the protocol, such as accessing and manipulating parts of the protocol.
• A global fetch method that gets easy to use for asynchronously fetching resources over the network.

Handling the Response

• Fetch makes it straightforward to write code that works in asynchronous manner
• async/await syntax also can be use in a React Native app
• Catch errors during the fetch process
• The response object, in turn, does not contain JSON response body directly
• To extract content from a JSON body object, the JSON() method which returns a second promise that resolves the results of parsing the response

Sample Fetch App

• Code to retrieve movie data and diplay via hooks, state, effect and views. FlatList will display it with json info, which is set inside the website

Security Considerations

• Topics include practices for storing sensitive information, authentication, network security, and tools to secure your app

Storing Sensitive Information

• Never store sensitive API keys in app code
• Tools like react-native-dotenv , react-native-config are great for adding API endpoints but not secrets
• Build an orchestration layer between your app and the resource if API key or secret to access some resource exists
• Serverless Function (AWS Lambda), forwards the request with the required API key or secret.
• Secrets in server side code cannot be accessed by the API consumers the same way secrets in the app code can
• Choose the right storage for sensitive data based on its sensitivity
• Data on network requests, or saving access tokens between sessions if app used offline, may need a storage solution on the device
• Use persisted over unpersisted data, as persisted data may be read from by apps and used on application launches without authentication
• Unpersisted data is never written to device disk so attackers cannot access

Async Storage API

• AsyncStorage which is unencrypted and asynchronous
• AsyncStorage not shared between apps, because their sandboxed app environment would prevent it

Async Storage Uses

• Use for persistent non-sensitive data across runs, or global app-wide variables
• Do not use for storage of sensitive items like tokens and secrets

Secure Storage

• React Native does not come bundled with any way of sotring sensitive data
• There are existing Android and iOs solutions
• iOS Keychain Services allow secure storage small chuncks of sensitive data to the user. Isideal to store certificates, tookensm, ppasswords to avoid Async Storage
• Android - Shared Preferences provides as persistent key data which isnt encrypted by default. Though Encrypted Shared Preferences can encyrption for Android data

React Hooks

• Topics covered include introducing Hooks, ScrollView, FlatList, SectionList with networking, and TextInputs

React useState Hook

• useState Hook is learned about within react modules
• Destructuring the returned values can use useState
• color provides the current state and setColor updates our state

React useEffect Hook

• Used for synchronizing components with outside systems
• At the top level, call Effect for declaring
• The setup specifies logic functions, optional dependencies, and reactive code based on the setup code

useEffect Hook Examples

• If effects run every render, use useEffect(() => {}).
• If effects run only once in a render, use useEffect(() => {}, []).
• If any dependency values change in effects, use useEffect(() => {}, [prop, state]).

ScrollView and Lists

• Used to design an application that contains customized items, sticky headers, infinte scrolling, pull to refresh, fetches info from a server, and handles concurrent calls

ScrollView

• The ScrollView is a React Native component library that allow users to implement scrolling with multiple child options on the app
• There is a choice between horizontal and vertical scrolling which can be determined with the code horizontal: true

Attributes of ScrollView

• showsHorizontalScrollIndicator that is a show indicator for horizontal scrolling if values are set to true.
• scrollEnabled is where case we do not wanna scroll content on set as its if property false, but otherwise true
• horizontal makes set ability for attribute to change

FlatList

• React Native FlatList is like ListView and is designed to handle large datasets which can provide horizontal or vertically scrolling features
• FlatList renders only items displaying a screen and nothing else

Basic Synatax

• Data and renderItem can be using and rendering on two Primary props
• Separator, Header, Footer are can be optional

RefreshControl

• You have one individual RefreshControl to implementing by pull-to-fresh easily by code from a React Native app.
• You are render the you used the renderlist for FlatList/ ScrollView component
• Use this with Refresh for data to get its capability for pull and refresh

Using RefreshControl

• onRefresh and onRefresh are ways to make the codes
• Then this the first make a new one by data from the server the adds in a screen
• Then refresh will make an event from it

Text Input

• The use of the keyboard to input text into the app
• To ensure its set for many correction, auto and capitalization

Local data versus over network data

• Performance versus tailorable fetches from server to stay up
• Delivery or guaranteeed local versus delivery on an unknown networks
• Access from session versus access to number unknown session
• Concurrency not worried about locally, but always on Internet

Firebase

• A backend that uses Nodes

Firebase Realtime Database

• Real Time provides sinking data for Json data on sinking from no database

SQL Database

• Key value relation and data. Key and Value

How to intiliaze

• First to create a New firebase Project then to have and create a link https://console.firebase.google.com/u/0/.
• Need Intialize the SDJ create a config
• Part of the code is form firebase and the the past one is initial in the file from import

Ref

• Using data or subscribe and the change to the data that shows the reference using Jason or using the phone

DatabaseRef

• This gives a Reference representing an action to where is the provided action
• Ref return a Reference that create a location of it to created with

Set Data and Listen fo Change

• Using Database is using read right now a subscribe by using the same thing

Navigation Introduction

• React Native's navigation was developed by the Android/ iOs side
• AirBnB navigation has also been designed with native

Native Navigation

Using a Navigator

• The need to wrap to app and then a new

This quiz covers React Native's asynchronous operations, including fetch, Promises, async/await, and error handling. It also tests knowledge of the useEffect hook, ActivityIndicator, and secure API key storage. The quiz Highlights secure API key storage practices.