1 of 23

React Native

for web developers 🥷

2 of 23

👋 Hello!

I AM Youssouf El Azizi

Mobile tribe lead @obytes

Community & open source enthusiast

You can find me at https://elazizi.com

2

3 of 23

What to expect from this talk ?

In this talk:

Use your web knowledge to build mobile apps
Help you understand how RN work
A live coding demo
How to create an enterprise grad RN app
QA
Not for Javascript Heaters 😀

3

I accept and agree of what to expect from this talk

4 of 23

Be Ready

“If you align expectations with reality, you will never be disappointed.” Terell Owens

4

5 of 23

Web vs React Native

Web

Developer experience better than RN.
Full access over your apps deployment

React Native

Developer experience better than Native Dev.
Require review from stores

5

This is a new ecosystem with new challenges and issues 🤔

6 of 23

PRACTICE FUNDAMENTALS FIRST

Javascript -> Typescript -> React

6

7 of 23

REACT NATIVE LEARNING CURVE

7

Difficulty

Time

First week dealing with environment and discovering the platform

Challenge on deploying apps to stores and prod issues

Building your own third-party library and playing with native code

😀

8 of 23

Why React Native ?

Story time 🎥

8

?

9 of 23

About React Native

React Native is a framework for building cross-platform apps developed by Facebook to solve this problem of managing two of everything. Their goal was to build a platform that enables you to have:

Fully native apps (not webviews/PWAs)
One codebase
One development team
One language
Fully extensible ( should be anything that is possible without using React Native)

9

10 of 23

How React Native work

10

11 of 23

More components

11

React Native UI Component	Web Analog	Android	Ios
<View>	A non-scrolling <div>	<UIView>	<ViewGroup>
<Text>	<p> <h1> …	<TextView>	<UITextView>
<Image>	<img>	<ImageView>	<UIImageView>
<ScrollView>	<div>	<ScrollView>	<UIScrollView>
<TextInput>	<input type="text">	<EditText>	<UITextField>

12 of 23

How React Native work ( Hard way)

12

Source: https://www.youtube.com/watch?v=7gm0owyO8HU

13 of 23

Getting started with react native

13

14 of 23

14

“

15 of 23

Real Mobile apps

Authentication
Handling forms
Styling and design system
API calls
Error handling
Navigation
Project structure
Building Process
…

15

16 of 23

Obytes Starter

Start a new react native project with best practices or just get some inspiration for you next react native project

16

17 of 23

Philosophy

17

Production-ready
Developer experience + Productivity
Minimal code and dependencies
well maintained third-party libraries

18 of 23

Features

18

✅ Last Expo SDK + Costume Dev client

🎉 Type checking with TypeScript

💅 Minimal UI kit using tailwindcss with theming.

⚙️ Support multiple environnement builds [Production, Staging, Development] using Expo configuration.

🦊 Husky for Git Hooks

💡 Clean project structure with Absolute Imports

🚫 Lint-staged for running linters + typescript checking on Git staged files

19 of 23

Features

19

🗂 VSCode recommended extensions configuration, settings and snippets for a better developer experience

☂️ React Navigation pre-installed with examples

💫 Auth flow with zustand and react-native-mmkv as a storage to save sensitive data.

🛠 A simple workflow to build, release and distribute your application using Github action + Expo EAS

🔥 React Query & axios to fetch Data

🧵 A good approach with example to handle forms based on react-hook-form and yup for validation

🎯 Localization with i18next + validation using Eslint.

20 of 23

The team behind the starter

20

21 of 23

How to start a new RN project in Obytes way?

21

22 of 23

Takeaways

22

RN is a new ecosystem(new challenge)
Basics first
You can do it
You can use Obytes Stater
React Native is better than Flutter 😂

23 of 23

Thanks!

ANY QUESTIONS?( Please don't ask about Flutter)

You can find me at

elazizi.com

y.elazizi@obytes.com

23