React Native is Open-Source Framework developed by Facebook. It enables developers to build Mobile Applications using Javascript and React. By using this you can create mobiles apps for Android and iOS platforms using single codebase .
Features -
- Cross Platform development.
- Native Performance.
- Reusable Components.
- Hot Reloading.
- Third Party Plugin Support.
- Support from community.
command to create new App - > npx create-expo-app AppName
Folder Structure :-
App.js - The App.js is default screen. this is root file
About Expo Router:- Support File Based Navigation. With Expo Router the root file App.js will become index.js like and other screen will be folder.
app.json - this file contains configuration option for project.
assets folder - This folder contains icons and other files. like splash screen images.
Other Standard files -
.gitignore - allow you to list files and folders you dont want to be tracked by git.
babel - babel is tool that allow developer right modern Javascript code and then transpile it into a format that compatible with older browser or environment that might not support latest Javascript feature.
babel.config.js - this file allow you to define specific setting and plugin for babel to use during transpilation.
package.json - this file contains project dependencies, script and metadata.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
Splash Screen - Splash Screen / Launch Screen - When user open app and see first screen called spalsh screen. Its stay visible while the app is loading..
Configure Splash Screen :- Default App Screen is White Blank Screen. You can modify this by app.json file. After creating Splash Screen Image you should export in .png file.
open app.json file and set like below code ->
{
"expo": {
"splash": {
"image": "./assets/splash.png"
}
}
}
Set Background Color in Splash Screen -
{
"expo": {
"splash": {
"image": "./assets/splash.png",
"backgroundColor": "#FEF9B0"
}
}
}
Resize Splash Screen Image -
{
"expo": {
"splash": {
"image": "./assets/splash.png",
"resizeMode": "cover"
}
}
}
Instead of cover you can use - > contain, cover, 1000x10000
App Icon - App Icon is what you app user see in their device after installing the app.
Configure App Icon: Set path value in app.json file of icon property. to add Icon in App.
Safe Areas - Creating safe area so that content appropriately positioned around notches, status bar, home indicators and other system element interfaces.
To Install Expo CLI Globally - > npm install -g expo-cli OR yarn global add expo-cli
To Create New App -> expo init YourProjectName
Basic Structure of a React Native App->
- Component -> React Native uses Components to build User Interfaces.
- JSX-> Similar to HTML JSX used to write Component for react native.
- Style-> Styling can be applied using Javascript Object that resemble CSS styles.
- State and Props -> React Native Uses State and Props for manage data flow and update Components.
Layout Components:
- View:- Use like div in app development in react native.
- Text:- Display Text Content in Screen.
- Image: Display Image in App Screen.
- ScrollView:- Enables scrolling functionality for content that exceeds the screen size.
Styling Components:
- StyleSheet:- Allow you to create styles using Javascript Objects. You can apply these styles in you components.
- FlexBox: React Native FlexBox to manage Layout. For responsive Design important to learn flexbox.
0 comments
Post a Comment