React Native

Week 1: Introduction to React Native

The first week starts with an overview of React Native. You will learn about its role in mobile
app development. You’ll then be instructed on how to set up a development environment
before you start working with some of the core React Native components.

After completing these lessons, you will be able to:

 Differentiate between the uses and characteristics of React and React Native.
 Use Expo CLI to set up a React Native app development project.
 Use the Android emulator to render React Native components.
 Categorize components in React Native.
 Create a component in React Native.
 Use the View, Text and ScrollView components to create a React Native screen.
 Use StyleSheet to style components in React Native.

Week 2: Lists and Text Input in React Native

In the second week, you will familiarize yourself with approaches for presenting large lists in
a React Native app and enabling users to input text. While these may sound like basic tasks, it
is essential to implement and configure these features thoughtfully, creating a better user
experience.

After completing these lessons, you will be able to:

 Render large lists with FlatList.

 Render large lists by section with SectionList.
 Use the TextInput component to accept user input.
 Manage the virtual keyboard in a React Native app.
 Create a login screen in React Native.

Week 3: Pressable, Images and Hooks in React Native

In week three, you’ll learn how to enhance your app with interactivity and visuals.
Specifically, you will learn how to add clickable areas and display images. You’ll also dive
deeper into hooks to make your app more responsive to native device settings, thus creating a
more integrated and seamless user experience.

After completing these lessons, you will be able to:

 Use the Pressable component to create touch interactivity in a React Native app.
 Display and style images in a React Native app.
 Use more advanced hooks to refine styling and interactivity in your app.
Week 4: React Navigation

After you’ve set up the major structural elements of your app, you’ll shift your focus to
enabling users to move between screens. There are several approaches to doing this, and
you’ll explore each to better understand the use cases in which they are best applied.

After completing these lessons, you will be able to:

 Install and set up React Navigation and Native Stack Navigator.

 Use React Navigation to set up navigation between screens.
 Create and configure a header bar in a React Native app.
 Configure tab and drawer navigation systems in a React Native app.

Week 5: Graded Assessment

In the course's final week, you’ll apply your knowledge to build a newsletter sign-up page in
React Native. This will be followed by a peer review and a graded final assessment. After
that, you will be guided to reflect on your experience with the course and decide the next
steps in your learning journey.

After completing the project exercises, you will be able to:

 Add image, text, text input and button components to a React Native app.
 Apply styling to components.
 Set up a stack navigator that can be used to move between two screens.
 Create a form where users can input text in a box and then press a button to submit it.
Week1: Introduction to React
Native
Introduction :
What is react native?
Cross platform mobile library js based on React single code for multiple apps

View ->div, text ->p

Native, cross-platform & hybrid developer roles:

IOS : swift , objectif c

Android : java Kotlin

Anathor category of cross-platform apps - hybrid apps : don’t have access to built in native features
of dev mobil use extrenal plugin like cordova to integrate native features to the app

Render graphic elment via a browser follow steps to show compoment

React Native Development Environment Overview :

React Native Code :

Import {text ,view} from react native ; export default fucntion welcome () {return ( <view> <text>
welcome …

->Donc il faut importer core compoment de rect native et ajouter style

Benefits of React Native :

1. Uses JavaScript :
JavaScript developers become mobile developers

2. Uses React
!!! JavaScript + React = React Native

3. Builds Cross-Platform Native Apps

4. Cost Effective
no need to support separate codebases for iOS and Android.

5. Developer Experience
Fast Refresh + Easy Debugging + Over-the-Air Updates

What is Expo ?
- helps beginners in mobile development to build native React Native apps

- to start right away with minimal setup and build a complete cross platform app in React
Native.
- ToolBox
-Open source platform too use react native (Prevoid u tools)
-cool functionality : Over The Air, OTA updates : you can push updates to your app anytime Over
The Air. You would not need app store approvals to push updates (cas normale devlopers
spend days waiting approve from apps store to update )
-Contient des native Apis pour : cam , file sys , localisation ,notif )
-inconv : limited api support hard to custom modules )
-first u had build ur app with expo then u decide to u don’t wqnt use it  u can eject ur app
from expo ecosystem but u had to refactor ur code some libraies cant be adaptable )
 Easy setup , No ios/android code , native APIs + No all ios and android APIs include ,
poor integration of cosim modules , larg app size .
Building React Native apps with Expo
Installation
npx create-expo-app FirstProject // cmd pour cree expo app
cd FirstProject
npm start or npx expo start
Expo Go

React Native Compoment

React Native components are classified as core components (view,text,img , textInput,
scrollview …) u can use it rightawy, community components (react navigation ,ract native
screen , react native maps , react native video … ) created by community for the community
u need to install it , and your native components u crate ur own and u cane make them for
community.

View ,Text and scrollable compoment

What are View and Text Components?
View like div , section support : style , flex box , touch handling

Text like p style , nesting , touch handling

What is the ScrollView Component?

Must boinded ny hight

can contain multiple components and views

Styling Compoment
Styling Components using StyleSheet
Style sheet api :

- like css style sheet

-keeps all the styles together

-declare var styles , remlire la appel la dans render

Week 2: Lists & Text input in

React Native
Rendering large lists using FlatList component
FlatList component lazy rendring

Required props are data (se qu il va s aff exemple menuItem ) , renderItem ()

Use :

!!In render :

<FlatList data={menuItemsToDisplay} keyExtractor={item => item.id}

renderItem={renderItem}></FlatList>

!! the renderItem method calls a call-back method which renders another component called Item

const renderItem = ({ item }) => <Item name={item.name} />;

const Item = ({ name }) => (

<View style={menuStyles.innerContainer}>
<Text style={menuStyles.itemText}>{name}</Text>
</View>
);
FlatList Methods
keyExtactor

ItemSeparatorCompoment

ListHeadrCompoment

Render large lists by sections using SectionList

Comme flastlist mais il peut deviser a des section ex salades pizza …

Required : sections (comme data dans flatlist) , renderItem (contien item , index , section , separator)

Use :

<SectionList
keyExtractor={(item, index) => item + index}
sections={menuItemsToDisplay}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
</SectionList>

!!! const renderSectionHeader = ({ section: { title } }) => (

<Text style={menuStyles.sectionHeader}>{title} </Text>

 )

User Input

TextInput Compoment : autocorrection , placeholder , kybordtypes (options include default,

number pad, decimal pad, numeric, email address, phone pad)
const [firstName, onChangeFirstName] = useState('');
<TextInput
style={styles.input}
value={firstName}
onChangeText={onChangeFirstName}
/>
Virtual Keyboard on Mobile Apps
keyboardDismissMode =ondrag keybord desparu lorsque il scrol !! this is a proprety in input

<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
scrollview a une proprety nome keyborddissmisview=on drag pour lui hide
lors scroll
keybordavoidingview
platform