Expo Cli(“Expo”) React Native Cli

They give us an environment that can build React Native App

They are tool exist in order to help us create native app and run react native
app on testing devices and ship them to the App Store
They are the curial tool for us to ship the app to the App Store , but we don't
need to use both of them

Setup install Node

install expo-cli
- npm install -g expo cli
create new React Native Project
- expo init ProjectName
switch to the project and start
- cd ProjectName
- npm start

Pros Expo cli provides an app called expo cli

where you can download from the App Store
, it will give you a Qr Code that allow you to
scan and preview your app in the app on
your phone

react native official website for various components

https://reactnative.dev/docs/components-and-apis

React native components

View
- a container that can hold other components
- View only takes as much space as it needs to fit the content in to themselves
Styling in React Native
- in react native, we can style our components using inline styles or stylesheet objects
- note : As a component grows in complexity, it is often cleaner to use
StyleSheet.create to define several styles in one place
- we use style props to style element, note that not every element has style props
- for example, button doesn’t has a style prop , we can know this by whether i
has the auto completion or go to the documentation

-
- remember , look for the auto completion with the tool icon
- Unlike css, style in react native won’t cascade (the style applied to parent won’t
applied on the child)

Style Sheet object

- when we use style sheet object , we get to have auto completion , beside it also
provides validation , if you would use invalid style properties or values, you would get
an error/warning

-
- we can pass an array of style object to the style prop
k
Margin
- the spacing outside of the element

Padding
- the spacing inside of the element
Flexbox
- flexbox is a concept apply to container element to control how much space the
container takes up and how the element inside the container are position
- justifyContent control how element distributed in row/column (if flexDirection is row , it
will control it in row, vise versa)
- alignItems control element in the cross axis
- in default every view in react native organised its children using flexbox in column
- if we didn't specify the width and height of the element in the container , by default
flexbox will only provide as width and as height as it needed

UseState
initialization
- When you use useState, you provide an initial state value. The hook returns an array
with two elements: the current state value and a function to update that state.
- ​const [state, setState] = useState(initialValue);
Updating State
- You can use the setState function to update the state. When you call setState with a
new value, React will re-render the component, and the new state will be reflected in
the component's rendering.
Example
 -

Example of inline styles

Example of stylesheet objects

Handling Events
onChangeText props
- used with components like TextInput
- it needs to receive a function

-
- a parameter will automatically be provided to the function (here text)

Ways to update state if the new state depends on the previous state

1)
- explanation : we pass a function to the function created in useState (here we write
an arrow function in the function) then a parameter will be provided (here
currentCourseGoals)

Outputting a list of item

-
- we need to provide a unique key for every item in the list
- we can use map on a list (here courseGoals is a list) to create a list of item

onPress props
- used with components like Button
Making our content scrollable with ScrollView
- import scrollView
- the size of the scrollview is determined by its parent, which means , we will need to
wrap the scroll view in a view and size of the scrollview is determined by the view
that the scrollview is wrapped in
- Example

-
- the outer view control the area of the screen should take up and the
scrollview make sure that the area will be scrollable
- note : Scroll view render all the element in advance even it isn’t shown on the screen,
for a huge list, it is better for uus to use flat list

Flat List
- different from scroll view , flat list doesn’t render all item from the provided data when
they are not needed

-
- two main props :
- data : the data to render to the list
- renderItem :
- a function that tells flat list how the individual data is going to look like
- the function we provide will automatically receive a parameter, the
parameter contains some meta data as well as the data we pass to
the data parameter , to access the data , ( ex: we name the parameter
dataItem, we can access the data via dataItem.item )
- how to handle key in flat list
- method 1
 - turn the data from primitive data type to object with the key property,
and flat list will automatically look for the key property in the object
- Before

-
- After

-
- method 2 ( we can use method 2 when we got the data using api and the
return data from api doesn’t contain key property
- we can use a prop from flat list ( key extractor ) where a function will
be required and two parameters is provided by default
- what key extractor does is it require a function that will return a unique
id
- keyExtractor will be called to get a key out of every item and the key
will be attached to every item by the flatlist
- example :
- let’s say if the return data from api contain a property called id
but not key, it will cause an error(warning) because flatlist is
looking for key property

-
- We can set the number of column of the flatlist ( make it like a grid )
 -

Props

Sending Http request in React Native

- we can use third party library like Axios which make sending http request really easy

Basic starting template

When building custom button almost everytime we need a outer container so that when we
adding visual feedback to the button , it works correctly
 - what overflow does is it restrict the effect ( ripple in this case ) from the child getting
to the parent

How to add visual feedback to IOS

- we can add another style to the Pressable

-
- style props of Pressable can also take an arrow function which will be called
automatically when the button is pressed , and the style will receive a data from the
press event as a parameter

Common way to get the input from user using useState

Switching Between Screen
- we can use useState to switch between screens
- we can declare a variable and initially point to a screen says screen 1
- and we add a if function to check if a condition met then we assign a new value to the
screen

Navigation
- third party package : https://reactnavigation.org/
- this package makes navigation easier
- Steps
- 1) import
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import CategoriesDetailScreen from "./screens/CategoriesDetailScreen";

- 2) called a function that return an object with two properties ( Screen and
Navigator )
const Stack = createNativeStackNavigator()

- 3) Register the screen that we are going to use in the stack using
stack.screen and wrap them in stack navigator and navigation container
export default function App() {
return (
<>
<StatusBar style="dark"></StatusBar>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="MealsCategories"
component={CategoriesScreen}></Stack.Screen>
<Stack.Screen name="MealDetail"
component={CategoriesDetailScreen}></Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
</>
);
}

- 4) The screens that we have registered in using stack.screen will receive a

navigation props
function CategoriesScreen({navigation}) {

- 5) we can then use the navigation props to navigate to the screen we want by
using the unique name that we have registered in stack.screen
function onPressHanlder(){
navigation.navigate("MealDetail")
}

SafeAreaView
- a component that will automatically detect which device we are running and add
appropriate amount of space to our content to avoid our content overlapping with the
notch

Manage Colour Globally

- and all we need is just import Colours in all the different file that utilising the colour

How should we decide if a variable should sit inside the component function
 - as the component will rerender when a state variable changes , if we don’t want our
variable to be reset every time the component re-render, we make the variable
outside of the function component

How to make our image in a round circle

- 04, 027

To style some nested text we have have text component inside another text component , and
we can then apply different style to different text component

Writing Platform specific code

- we can do it using Platform API
- Method 1

-
- Method 2

-
- Method 3
- We can also create platform specific file
- let’s say we want to have different style for our title
 -
- during import we don’t include the platform extension ( ex: .ios or .android)

-
- then react will pick the file itself based on the platform it is running

Dimension API
- a built in API where we can get information about the device ex: width or height of the
device
- we import it from react native
- import { Dimensions } from ‘react-native’
- we use it as a javascript object
- possible use case : When we are considering the UI for a smaller or larger device
where we want something to be smaller or bigger
- Ex:

- to know what value (width and height) to set for a specific device height/width
is a try and error process

Set Sizes Dynamically for different orientations

- we can import useWindowDimensions from react native
- as orientation might change when the page rendered , and only the component
function will be execute again when any hook changes , we will need to set the value
that we want to change ( ex: the margin ) inside the component function

-
 -

- we will use useWindowDimensions instead of Dimensions API when we want to

listen to the size of the phone ( when the width and height change after doing
orientation )

KeyboardAvoidingView
- import from react native
- a component that we can wrap the view that contains some input view so that when
the input field is clicked , the input field will not be covered by the keyboard
- it also allow user to click somewhere else to close the keyboard

-
- when we set position as the parameter for keyboardAvoidingView , it will be
the best if we put it inside the scroll view
- from the video I watch , the author said that behaviour = ”position” often lead
to the best outcome

icon
https://oblador.github.io/react-native-vector-icons/

Threading
- react native is single-threaded
- Three Main Processes in React Native ( note that although the names are thread ,
they are actually process )
- UI Thread
- This process is used for handling rendering android and ios views
- JS Thread
- This process is used for handling all of the logic of your react native
application
- React Native Modules Thread
- this happens when an app needs to access a platform API, for
example if you’re working with animations, you may use the native
driver to handle your animations
- ex : the Animated API allows you to configure your animations
with useNativeDriver: true so the animation does not
block the main JS Thread
UseContext
- a way to manage state globally
- Why do we need useContext?
- imagine that we have 3 nested components and we need to pass a data from
the first component to the third component, even though the second
component doesn’t need the data , it still need to pass the data using props
- Steps
- 1) import createContext

-
- 2) Wrap the child components in the context Provider and supply the state
value

-
- 3) use the useContext hook to access the value

-
UseEffect
- useEffect accept two argument , one function and one array , the array is optional
- if the second argument is provided ,

backend related

Storing image
- Generally we have two approach
- 1) Storing image as binary data ( base64) directly in mongoDb
- pros : easy , straight forward code
- cons : performance implications issue
- 2) Store images in a separate storage system and store the URL or reference in
MongoDb

Storing Image in AWS S3

- in the frontend side we need to send the image in the FormData object

- by default express server doesn’t know how to deal with multipart form data
- we need to use a middleware ( here we using multer )
- https://www.npmjs.com/package/multer
-

React Context & Redux

Axios
we can use axios to send http request

Node/Express.js
- We structure our code to app , controller and routes

Hashing password
- to hash password we can use a library call bcrypt
- npm install bcrypt

Verify email
- to can use a library call validator
- npm install validator

JWT Authentication
- this is one of the way to implement authentication
What do you like about react native
- everything is make up of component , and it allow us to reuse our component
- there are a lot of third party package for us to install and use like one of my favourite
package is react native navigation , the library is well documented
- we will able to get some open source framework like expo that can speeds up the
development process
- it offers a unified development environment where
- Hot reloading
- we able to see changes within seconds
- They provide us some built-in where we can write platform specific code for example
Dimension API
- React native has a large active community this means there are plenty of libraries ,
plugins and tools available to simplify development , they are many resources
available for learning and troubleshooting

What i don't like

- putting yourself in someone control and we have to wait them to update it ,when
there are new platform features
- for example safe area of iphone 10
- no cascading like css
- not having as much control as native for example the button component , we are not
able to change the title size of the button
- Not all third-party libraries are always compatible with the latest versions of React
Native or the underlying native platforms. This can lead to additional maintenance
work to ensure everything stays up-to-date and functions correctly.