React Native Tutorial 2024

react-native-tutorial-2024.md

React Native Tutorial 2024

Day01 - 2024

What is React Native?

Technical View

Views

JSX Components are compiled to Native Views, not the javascript logic code.

Components are compiled

What about JS Logic Code?

Expo CLI vs React Native CLI

Conclusion:

• You can start with expo cli because of easy working flow and less setup
• With expo, you can test with native functions like camera with devices more easier.
• You can always switch from expo cli to react native cli just by using "eject"
• With React Native CLI setup, you can mix between js code and platform native code, such as: kotline or swift
• React Natve CLI required more setup

First project with expo

Project: TodoList

Getting start

npm i -g expo-cli

• https://docs.expo.dev/

Create new

## list template
npx create-expo-app --template
## create new
npx create-expo-app rn-example

Final project with expo

Build a check-in app for your self, display list of check-in from new to old. When you check-in, you must take a photo, your photo will be saved with your current location.

React Native Roadmap 2024

Day002 - Creating UI with React Native Core Components

Creating Layouts with FlexBox Concept

Main Axis: justifyContent, flex:1( as much space as possible along the main axis)

Cross Axis: alignItems:'stretch' (default)

Default FlexBox

• There is no style for Button Component
• Text Element on IOS doesn't support some kind of style

This is not working on IOS

We'll use another way

There is no cascade-css in ReactNative, no inheritance styles.

By default the app container does not support scroll. You must enable it explicitly

ScrollView renders all at the beginning even it doesn't visible to the users
So we have another solution for our dynamic list is built-in component that ship with React Native Component => FlatList