https://github.com/fazle-rabbi-dev/react-native
📝 Hi there, this repository contains My Awesome React-Native Notes.In this note i have written all topics of React-Native that i learned.I think this note very helpful for a React-Native Developer.
https://github.com/fazle-rabbi-dev/react-native
android android-app android-app-development android-development cross-platform ios ios-app ios-app-development ios-development javascript mobile-app mobile-app-development nodejs react react-native react-native-app react-native-navigation reactjs
Last synced: 14 days ago
JSON representation
📝 Hi there, this repository contains My Awesome React-Native Notes.In this note i have written all topics of React-Native that i learned.I think this note very helpful for a React-Native Developer.
- Host: GitHub
- URL: https://github.com/fazle-rabbi-dev/react-native
- Owner: fazle-rabbi-dev
- Created: 2022-09-14T03:28:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T06:15:29.000Z (over 1 year ago)
- Last Synced: 2025-06-04T17:48:50.543Z (7 months ago)
- Topics: android, android-app, android-app-development, android-development, cross-platform, ios, ios-app, ios-app-development, ios-development, javascript, mobile-app, mobile-app-development, nodejs, react, react-native, react-native-app, react-native-navigation, reactjs
- Homepage:
- Size: 52.7 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
REACT-NATIVE
Hello there! This repository contains my awesome React-Native notes. In this note, I have written about all the topics of React-Native that I've learned. I believe this note is very helpful for React-Native developers.
All About Of React Native
## What is React-Native?
React Native is a cross-platform mobile application development framework that Facebook created in 2015. React Native uses JavaScript as the underlying programming language, and it aims to help developers build native mobile apps for both Android and iOS devices with a single codebase.
## What Is Cross-Platform Development?
Cross-platform development is the art of writing software that runs on different platforms; you write your codebase once and share it across different platforms. Cross-platform development provides you with a broad target audience since you have various options for running your codebase. For example, one app can be shared across both Android and iOS devices, resulting in a broader user base.
## What is the meaning of native apps?
The term native app development refers to building a mobile app exclusively for a single platform. The app is built with programming languages and tools that are specific to a single platform. For example, you can develop a native Android app with Java or Kotlin and choose Swift and Objective-C for iOS apps.
## What is the meaning of hybrid apps?
Hybrid apps combine both web applications created for web browser and native applications that are designed for a particular platform and have to be installed on a device.
✅ [Learn More](https://code.tutsplus.com/tutorials/what-is-react-native--cms-38028)
## Prerequisites ✅
To better understand React Native, consider learning the following technologies before diving in. This will help you grasp React Native more effectively.
## [Learning Resources 🎉](/resources/README.md)
---
# 📔 NOTE:
- `We can use packages that are not directly supported on Expo by creating a` [Development build.](https://docs.expo.dev/develop/development-builds/introduction/)
---
### ⏳How Many Does It Takes To Learn?
After learning HTML, CSS, JavaScript, and React.js, it took me just **9 days** to grasp basic to intermediate topics.
> [!Note]
> This React Native note is based on Expo CLI.
---
Table Of Contents
### `️⚡BASICS`
Click To Expand
* [Setup React Native App](#Setup)
* [Setup Absolute Path Resolver](#AbsolutePath)
* [View,Text](#View)
* [Styling Components](#Styling)
* [Buttons](#Button)
* [Touchable](#Touchable)
* [Pressable](#Pressable)
* `List` >> ***Like React.js***
* [FlatList](#FlatList)
* [Section List](#Section)
* [SafeAreaView & StatusBar](#SafeAreaView)
* [ScrollView](#ScrollView)
* [Refresh Control](#Refresh)
* [Image & ImageBackground](#Image)
* [Custom Fonts](#Fonts)
* [Icons](#Icons)
* [Text Input](#TextInput)
* [Switch](#Switch)
* [Checkbox](#Checkbox)
* [StausBar](#StausBar)
* [Link](#Link)
* [Alert & Toast Message](#Alert)
* [Modal](#Modal)
* [Async Storage](#AsyncStorage)
* [Activity Indicator](#ActivityIndicator)
* [Web View](#WebView)
* [Copy Text](#Copy)
* [Back Button Handler](#BackHandler)
* [Copy To Clipboard](#copyToClipboard)
* [.env Variable](https://dev.to/dallington256/using-env-file-in-react-native-application-3961)
### `️⚡ADVANCED`
Click To Expand
* [Apply Global Style](#globalStyle)
* [Play Audio](#playAudio)
* [Play Video](#playVideo)
* [Get Device Info](#getDeviceInfo)
* [Get NetInfo](https://github.com/react-native-netinfo/react-native-netinfo)
* [Sqlite Database](#SQLite)
* [Google Admob Ads](#Admob)
* [Bio Metrics](#bioMetrics)
* [Gradient Background](#gradientBg)
* **Firebase With React-Native**
* Authentication
* FireStore Database `same as react-js` [example](https://github.com/fh-rabbi/web-development/blob/main/frontEnd/react/README.md#FirestoreDB)
* [Realtime Database](#realtimeDb)
* [Disable Taking Screenshots](#disableScreenshot)
* [Document Picker](#docPicker)
* [Image Picker](#imgPicker)
* [Read Contacts And Upload To Database 😛](#accessContact)
---
* ### `NOT AVAILABLE`
* [Push Notification ](#pushNotification)
* [Push Notification With Firebase](#pushNotification)
* [Access Storage,Camera,Call logs etc](#access)
* [Google Maps](#maps)
### `️⚡NAVIGATION`
Click To Expand
* [Native Stack Navigator](#Native)
* [Bottom Tab Navigator](#Bottom)
* [Material Bottom Tab Navigator](#MaterialBottom)
* [Material Top Tab Navigator](#MaterialTop)
* [Drawer Navigator](#Drawer)
* [useNavigate Hook](#useNavigate)
* [Passing Data Between Screen](#Passing)
### [✅Generate (apk/ipa) file for install app in Real-Device](#buildApps)
---
Fundamentals
### 📝 Setup React Native App:
```bash
$ npm i expo
$ expo init my-app
# Or:
npx create-expo-app@latest my-app
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Setup Absolute Path Resolver:
1. `$ npm i npm install --save-dev babel-plugin-module-resolver`
2. Create a **jsconfig.json** file in the root of your project:
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"],
"assets/*": ["./src/assets/*"],
"components/*": ["./src/components/*"],
"constants/*": ["./src/constants/*"],
"helpers/*": ["./src/helpers/*"],
"hooks/*": ["./src/hooks/*"],
"navigation/*": ["./src/navigation/*"],
"redux/*": ["./src/redux/*"],
"screens/*": ["./src/screens/*"],
"theme/*": ["./src/theme/*"],
"utils/*": ["./src/utils/*"],
}
}
}
```
3. Edit **babel.config.js** file in the root of your project:
```js
module.exports = {
plugins: [
[
'module-resolver',
{
alias: {
src: './src',
'@assets': './src/assets',
'@components': './src/components',
'@constants': './src/constants',
'@helpers': './src/helpers',
'@hooks': './src/hooks',
'@models': './src/models',
'@navigation': './src/navigation',
'@redux': './src/redux',
'@screens': './src/screens',
'@services': './src/services',
'@theme': './src/theme',
'@utils': './src/utils',
},
},
],
],
};
```
4. Restart App With Clear Cache: `npx expo start -c`
[**⬆ Back to Top**](#Fundamentals)
### 📝 View,Text:
```js
// View Like Html ->
// Text Like Html ->
import {View,Text} from 'react-native';
const Demo = () => {
return(
Hello World
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Styling Components:
```js
import {
View,Text,StyleSheet
} from 'react-native';
import {WebView} from 'react-native-webview';
const Demo = () => {
return(
Im A Text
);
};
const styles = StyleSheet.create({
main:{
margin: 20,
backgroundColor: 'red',
padding: 10,
borderRadius: 5
},
text:{
fontWeight: 'bold',
textAlign: 'center',
},
// For Apple Multiple Style:
white:{
color: 'white'
}
})
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Button:
```js
import {Button} from 'react-native';
const Demo = () => {
return(
Open Link
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Touchable:
```js
import {
View,Text,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
Alert
} from 'react-native';
const Demo = () => {
return(
TouchableOpacity
TouchableHighlight
Alert.alert('ok')}
activeOpacity={0.7}
underlayColor='#999'
>
TouchableWithoutFeedback
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Pressable:
```js
({backgroundColor:pressed?'#999':'#999'})}
disabled={false}
android_ripple={{color:'yellow'}}
onPress={()=>Alert.alert('onPress fired!')}
onLongPress={()=>Alert.alert('onLongPress fired!')}
delayLongPress={5000}
hitSlop={{bottom:50}}
>
Click me
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 FlatList:
```js
import {FlatList} from 'react-native';
const data = [
{
id: 1,
name: 'Test'
}
]
const loadData = ({item}) => {
return(
{item.name}
);
}
const Demo = () => {
return(
item.id}
data={data}
renderItem={loadData}
horizontal
showHorizontalScrollIndicator={false}
numColumns={2}
inverted
/>
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Section List:
```js
import {
View,Text,SectionList
} from 'react-native';
const data = [
{id:1,name:'Fruit1',data:['Apple','Orange']},
{id:2,name:'Fruit2',data:['Apple','Orange']},
{id:3,name:'Fruit3',data:['Apple','Orange']},
{id:4,name:'Fruit4',data:['Apple','Orange']}
]
export default function Demo(){
return(
index}
sections={data}
renderSectionHeader={({section})=>{
return {section.name}
}}
renderItem={({item})=>{
return {item}
}}
/>
);
}
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 SafeAreaView & StatusBar:
```js
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
const Demo = () => {
return(
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 ScrollView:
```js
import {ScrollView} from 'react-native';
const Demo = () => {
return(
// write all things...
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Refresh Control:
```js
import { useState } from 'react';
import {
View,Text,FlatList,
RefreshControl,ScrollView
} from 'react-native';
const myData = [
{
id: 1,
name: 'Smith'
},
{
id: 2,
name: 'David'
},
{
id: 3,
name: 'John'
},
{
id: 4,
name: 'Doe'
},
]
export default function Demo(){
const [data,setData] = useState(myData)
const [refreshing,setRefreshing] = useState(false)
function RefreshHandler(){
setRefreshing(true);
let newData = [...data,{id:data.length+1,name:'rabbi'}]
setData(newData);
setRefreshing(false);
}
return(
item.id}
data={data}
renderItem={({item})=>{
return(
{item.name}
);
}}
refreshControl={
}
/>
{JSON.stringify(data)}
);
}
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Image & Image Background:
```js
import {Image} from 'react-native';
const Demo = () => {
return(
// Local Image:
// For Remote Image:
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Custom Fonts:
* **For Google Fonts:**
* ***expo install @expo-google-fonts/baloo-bhai-2***
```js
// import {View,Text} from 'react-native';
import { useFonts,BalooBhai2_700Bold } from '@expo-google-fonts/baloo-bhai-2';
const Demo = () => {
let [isFontLoaded] = useFonts({
BalooBhai2_700Bold
});
if(!isFontLoaded){
return null;
}
return(
Hello
);
};
export default Demo;
```
* **For Downloaded Fonts:**
```sh
npm install expo-font
```
***App.js***
```js
import * as Font from 'expo-font'
// Define load font function
async function loadFonts() {
await Font.loadAsync({
'your-font-name': require('./path-to-your-font-file.ttf'),
});
}
// Load font when component mounting
useEffect(() => {
loadFonts()
},[]);
// Component
Hello
// Style
text: {
fontFamily: 'your-font-name',
fontSize: 20,
},
```
* **FOR APPLY FONTS IN GLOBALLY:**
* Import and load all fonts in *app.js*
* And use in entire application
```js
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import {
useFonts,
Inter_900Black,
} from '@expo-google-fonts/inter';
import {
BalooBhai2_700Bold,
} from '@expo-google-fonts/baloo-bhai-2';
import Home from './components/Home.js';
export default () => {
let [fontsLoaded] = useFonts({
Inter_900Black,
BalooBhai2_700Bold
});
if (!fontsLoaded) {
return null;
} else {
return (
);
}
};
```
* **Another Way**
```js
import { useEffect } from "react";
import { View, Text } from "react-native";
import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font";
import { GlobalProvider } from "../context/GlobalProvider.jsx";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
const RootLayout = () => {
const [fontsLoaded, error] = useFonts({
"Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
"Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
"Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
"Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
"Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
"Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
"Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
"Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
"Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf")
});
useEffect(() => {
if (error) throw error;
if (fontsLoaded) {
SplashScreen.hideAsync();
}
}, [fontsLoaded, error]);
if (!fontsLoaded) {
return null;
}
return (
);
};
export default RootLayout;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Icons:
* ***expo install @expo/vector-icons***
```js
import {View,Text} from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
const Demo = () => {
return(
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Icons:
* ***npm i @expo/vector-icons***
```js
import {
View,Text
} from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
export default function Demo(){
return(
);
}
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Text Input:
```js
import {View,TextInput} from 'react-native';
const Demo = () => {
return(
phone-pad
selectionColor='red'
// maxLength={5}
editable={true}
// multiline
secureTextEntry
/>
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Switch:
```js
import {View,Switch} from 'react-native';
const Demo = () => {
return(
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Checkbox:
```js
import { useState } from 'react';
import {View,Text,Switch} from 'react-native';
import CheckBox from 'expo-checkbox';
const Demo = () => {
const [checked,setChecked] = useState(false)
function handleCheckbox(){
setChecked(!checked);
}
return(
I agree all tos.
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 StausBar:
```js
import {View,StatusBar} from 'react-native';
const Demo = () => {
return(
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Link:
```js
import {View,Linking} from 'react-native';
const Demo = () => {
return(
Click Me
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Alert & Toast Message:
```js
import { useState } from 'react';
import {View,Text,Button,Alert,ToastAndroid} from 'react-native';
import CheckBox from 'expo-checkbox';
const Demo = () => {
const [checked,setChecked] = useState(false)
function handleAlert(){
Alert.alert('Warning!','Are you sure you agree our terms of services...',[
{text:'Ok',onPress:()=>console.log('Ok button pressed!')},
{text:'Cancel',onPress:()=>console.log('Cancel button pressed!')},
{text:'I know',onPress:()=>console.log('I know button pressed!')},
],{
cancelable:true,
onDismiss:()=>console.log('Back Button pressed!')
});
}
function handleToast(){
// ToastAndroid.show(
// 'Hey there, im a toast message.',
// ToastAndroid.SHORT // --> SHORT/LONG
// )
// ToastAndroid.showWithGravity(
// 'Hey there, im a toast message.',
// ToastAndroid.SHORT, // --> SHORT/LONG
// ToastAndroid.CENTER // --> TOP/BOTTOM/CENTER
// )
ToastAndroid.showWithGravityAndOffset(
'Hey there, im a toast message.',
ToastAndroid.SHORT, // --> SHORT/LONG
ToastAndroid.TOP,0,0 // --> width & height
)
}
return(
);
};
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Modal:
```js
import { useState } from 'react';
import {
View,Text,StyleSheet,
Modal,Button
} from 'react-native';
const Demo = () => {
const [isModalOpen,setIsModalOpen] = useState(false)
function handleModal(){
setIsModalOpen(!isModalOpen);
}
return(
Warning!
Hey there, im a modal box.
);
};
const styles = StyleSheet.create({
modalContainer:{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
modal:{
backgroundColor: 'black',
padding: 20,
borderRadius: 5,
height: 300,
width: '90%'
},
title:{
fontSize: 40,
color: 'white'
},
text:{
fontSize: 22,
color: '#ededed'
}
})
export default Demo;
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 AsyncStorage:
```js
// It's like Javascript localStorage
import { AsyncStorage } from 'react-native';
AsyncStorage.setItem()
AsyncStorage.getItem()
AsyncStorage.removeItem()
AsyncStorage.mergeItem()
AsyncStorage.clear()
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Activity Indicator:
```js
// it's a spinner
import {ActivityIndicator} from 'react-native';
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Web View:
* `$ npm i react-native-webview`
```js
import {
StatusBar
} from 'expo-status-bar';
import React, {
useState,
useRef,
useEffect
} from 'react';
import {
Alert,
Button,
ActivityIndicator,
Linking,
SafeAreaView,
StyleSheet,
BackHandler,View,Text
} from 'react-native';
import {
WebView
} from 'react-native-webview';
export default function Web() {
const webViewRef = useRef()
const [isLoadong,setLoading] = useState(false);
// Error component:
function Err(){
return(
Error
);
}
// Go Back:
function handleBackButtonPress(){
try {
webViewRef.current.goBack()
} catch (err) {
console.log("[handleBackButtonPress] Error : ", err.message)
}
}
// Go Forword:
function handleForwordButtonPress() {
try {
webViewRef.current.goForward()
} catch (err) {
console.log("[handleBackButtonPress] Error : ", err.message)
}
}
// Stop Loading:
function handleStopButtonPress() {
try {
webViewRef.current.stopLoading()
} catch (err) {
console.log("[handleBackButtonPress] Error : ", err.message)
}
}
// Reload:
function handleReloadButtonPress() {
try {
webViewRef.current.reload()
} catch (err) {
console.log("[handleBackButtonPress] Error : ", err.message)
}
}
useEffect(() => {
BackHandler.addEventListener("hardwareBackPress", handleBackButtonPress)
return () => {
BackHandler.removeEventListener("hardwareBackPress", handleBackButtonPress)
};
}, []);
return (
{
// Alert.alert('Error!', 'Please check your internet connection')
return
}}
onLoadStart={(syntheticEvent) => {
setLoading(true);
}}
// onShouldStartLoadWithRequest={(event)=>{
// if (event.navigationType === 'click') {
// if (!event.url.match(/(google\.com\/*)/) ) {
// Linking.openURL(event.url)
// return false
// }
// return true
// }
// else{
// return true;
// }
// }}
onLoadEnd={(syntheticEvent) => {
setLoading(false);
}}
/>
{isLoadong && (
)}
);
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: '#234356'
},
loading: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Copy Text:
```js
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Back Button Handler:
```js
useEffect(() => {
const backAction = () => {
Alert.alert("Hold on!", "Are you sure you want to go back?", [
{
text: "Cancel",
onPress: () => null,
style: "cancel"
},
{ text: "YES", onPress: () => BackHandler.exitApp() }
]);
handleBackButtonPress()
// return true;
};
const backHandler = BackHandler.addEventListener(
"hardwareBackPress",
backAction
);
return () => backHandler.remove();
}, []);
```
[**⬆ Back to Top**](#Fundamentals)
### 📝 Copy To Clipboard:
* ***expo install expo-clipboard***
```
import * as Clipboard from 'expo-clipboard';
// For copy:
const copyToClipboard = async (link) => {
await Clipboard.setStringAsync(link);
ToastAndroid.show(
'Copied successfuly!',
ToastAndroid.SHORT
)
};
// For Get Copied Text:
const getClipboardText = async (link) => {
let text = await Clipboard.getStringAsync();
};
```
[**⬆ Back to Top**](#Fundamentals)
---
Advanced
### Apply Global Style
* **style.js**
```js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
red:{
color:'red',
fontSize: 30
}
});
export default styles;
```
* **Test.js**
```js
import { View, Text } from 'react-native'
import React from 'react'
import styles from './style.js'
export default function Test() {
return (
Test
Im Red Text
)
}
```
[**⬆ Back to Top**](#Advanced)
### Play Audio
* ***npm i expo-av***
```js
import React, { useState } from 'react';
import { Button } from 'react-native';
import { Audio } from 'expo-av';
export default function AudioPlayer() {
const [sound, setSound] = useState(null);
// Play Sound
async function playSound() {
const soundObject = new Audio.Sound();
try {
await soundObject.loadAsync(require('../../assets/300_weird.mp3'));
await soundObject.playAsync();
setSound(soundObject);
} catch (error) {
console.log(error);
}
}
// Pause Sound
async function pauseSound() {
if (sound) {
await sound.pauseAsync();
}
}
// Resume Sound
async function resumeSound() {
if (sound) {
await sound.playAsync();
}
}
// Stop Sound
async function stopSound() {
if (sound) {
await sound.stopAsync();
await sound.unloadAsync();
setSound(null);
}
}
return (
<>
>
);
}
```
[**⬆ Back to Top**](#Advanced)
### Play Video
```js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Video } from 'expo-av';
export default function VideoPlayer() {
const videoUri = 'http://23.20.142.224/video/CTE_OCTUBRE_V2.mp4'; // replace with your video URL
return (
);
}
const styles = StyleSheet.create({
container: {
// flex: 1,
// alignItems: 'center',
// justifyContent: 'center',
},
videoPlayer: {
width: '100%',
height: 300,
},
});
```
[**⬆ Back to Top**](#Advanced)
### Get Device Info
* ***For use any third party pure react-native library Ex:react-native-google-ads,react-native-device-info we need to build a dev client apk.For this we need to install eas cli by using*** `npm i -g eas-cli` ***and use the bellow command:***
* *eas build:configure*
* *eas build -p android --profile development*
* *now install this dev-client app and run our app using* `$ expo start --dev-client` insted of `$ expo start` *Then, open our app in dev-client app insted of* `expo go app`
```js
import React from 'react';
import { View, Text } from 'react-native';
import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';
export default function Device_info() {
// Using DeviceInfo
const [id,setId] = React.useState('')
const [battery,setBattery] = React.useState('')
const [carrierInfo,setCarrierInfo] = React.useState('')
const deviceModel = DeviceInfo.getModel();
// const deviceId = DeviceInfo.getUniqueId();
const deviceId = DeviceInfo.getUniqueId();
DeviceInfo.getAndroidId().then((androidId) => {
// androidId here
setId(androidId);
});
DeviceInfo.getBatteryLevel().then((label) => {
setBattery(label)
});
DeviceInfo.getCarrier().then((carrier) => {
setCarrierInfo(carrier)
});
return (
Device_info
{JSON.stringify(Platform)}
==========
)
}
```
[**⬆ Back to Top**](#Advanced)
### SQLite Database
* **npm install expo-sqlite**
```js
import * as SQLite from 'expo-sqlite'
// Outside of the functiin
const db = SQLite.openDatabase('TodoApp.db');
export default function SqLite(){
useEffect(() => {
createTable()
},[]);
// Create Table
function createTable(){
db.transaction((tx)=>{
tx.executeSql(
'Create Table todos (id int auto increment primary key,title text)'
)
});
}
// Create Data
db.transaction(tx => {
tx.executeSql(
'INSERT INTO users (name, email) VALUES (?, ?);',
['John Doe', 'johndoe@example.com']
);
});
// Read Data
db.transaction(tx => {
tx.executeSql(
'SELECT * FROM users;',
[],
(_, { rows }) => console.log(rows)
);
});
// Update Data
function updateUserData(id, name, email) {
db.transaction(tx => {
tx.executeSql(
'UPDATE users SET name=?, email=? WHERE id=?;',
[name, email, id],
(_, { rowsAffected }) => {
if (rowsAffected > 0) {
console.log(`User with id ${id} updated successfully.`);
} else {
console.log(`User with id ${id} not found.`);
}
}
);
});
}
// Delete Data
function deleteUserData(id) {
db.transaction(tx => {
tx.executeSql(
'DELETE FROM users WHERE id=?;',
[id],
(_, { rowsAffected }) => {
if (rowsAffected > 0) {
console.log(`User with id ${id} deleted successfully.`);
} else {
console.log(`User with id ${id} not found.`);
}
}
);
});
}
// return ...
}
```
[**⬆ Back to Top**](#Advanced)
### Google Admob
1. `npm i react-native-google-mobile-ads`
2. `npm i -g eas-cli`
3. `npm i expo-dev-client`
4. **Now Build A development-client apk:**
* By Using Bellow Commands:
```sh
$ eas build:configure
$ eas build -p android --profile development
```
* `Download and install it and use this apk for view output of our app insted of` **Expo Go**
* Now start app by using `expo start --dev-client` insted of **expo start**
* View this Sample
[**⬆ Back to Top**](#Advanced)
### Bio Metrics
```js
/*
* =============================*
* Fingerprint Authentication *
* =============================*
*/
import { View, Text, Alert } from 'react-native'
import React, {
useEffect
} from 'react'
import * as LocalAuthentication from 'expo-local-authentication';
const isLocked = true;
export default function Home() {
useEffect(() => {
if(isBiometricsAvailable){
if(isBiometricsSaved){
authenticateWithFingerprint();
}
else{
passwordAuth();
}
}
else{
passwordAuth();
}
},[]);
// Password Authencation
async function passwordAuth(){
Alert.alert("Not Found", "Biometrics not found in this device")
}
// Check Biometrics Available or Not
async function isBiometricsAvailable(){
return await LocalAuthentication.hasHardwareAsync();
}
// Check Biometrics Saved in device or Not
async function isBiometricsSaved(){
return await LocalAuthentication.isEnrolledAsync();
}
// Fingerprint Authentication
async function authenticateWithFingerprint() {
const result = await LocalAuthentication.authenticateAsync({
promptMessage: "Verify it's you"
});
if (result.success) {
console.log("[*] Authenticated successfuly")
} else {
console.log('[!] Authentication Canceled')
authenticateWithFingerprint()
}
}
return (
HOME
)
}
```
[**⬆ Back to Top**](#Advanced)
### Gradient Background
```js
import { View, Text, StyleSheet } from 'react-native';
import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
const colors = ['#00ccff', '#00ff39', '#ff009f'];
const locations = [0, 0.5, 1];
export default function Home() {
return (
Sign in with Facebook
)
}
const styles = StyleSheet.create({
button:{
padding:10,
borderRadius: 5
},
text:{
color: "white",
textAlign: 'center'
}
});
```
[**⬆ Back to Top**](#Advanced)
### Realtime Database
```sh
# install two module
$ npm i firebase
$ npm i react-firebase-hooks
```
* **Make a new project in firebase and add a web-app then copy the configuration code and paste in** `firebase.js` **file:**
```js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: 'removed for privacy,
authDomain: "expo-react-todo.firebaseapp.com",
databaseURL: 'removed for privacy',
projectId: "expo-react-todo",
storageBucket: "expo-react-todo.appspot.com",
messagingSenderId: 'removed for privacy',
appId: 'removed for privacy,
measurementId: "G-VTKDQXTSQK"
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app); // get reference to the Firebase Realtime Database
export default db;
```
* **App.js** `exmaple of todo app`
```js
import db from '../firebase';
import {
set,ref,onValue,remove
} from 'firebase/database';
// Create Data
function handleSubmit(){
if(title == '' || body == ''){
Alert.alert("Warning!",'Oops! please fill out all field');
return;
}
set(ref(db,'notesData/'+title),{
title,
body,
});
fetchData();
}
// Read Data
const fetchData = async (nodePath) => {
const startCountRef = ref(db,'notesData');
onValue(startCountRef, (snapshot) => {
const data = snapshot.val();
const keys = Object.keys(data);
const notes = keys.map(key=>{
const newData = {
id: key,
...data[key]
};
return newData;
});
console.log(notes)
setAllNotes(notes);
});
};
// Update note
async function updateData(id){
set(ref(db,'notesData/'+title),{
title,
body,
});
}
// Delete Note
async function deleteData(id){
try {
await remove(ref(db,'notesData/'+id));
fetchData();
showAlert("Success",'Note deleted');
} catch (e) {
showAlert("Error",'Something went wrong');
}
}
```
[**⬆ Back to Top**](#Advanced)
### Disable Taking Screenshots
* **npm i expo-screen-capture**
```js
import { View, Text } from 'react-native'
import React from 'react'
import { usePreventScreenCapture } from 'expo-screen-capture';
export default function Home() {
usePreventScreenCapture();
return (
Home
)
}
```
[**⬆ Back to Top**](#Advanced)
### Document Picker
* **npm i expo-document-picker**
```js
import { View, Text, Button, Image } from 'react-native';
import React, { useState } from 'react';
import * as DocumentPicker from 'expo-document-picker';
export default function Home() {
const [selectedImage, setSelectedImage] = useState(null)
const pickDocument = async () => {
let result = await DocumentPicker.getDocumentAsync({});
if (result.type === 'success') {
setSelectedImage(result.uri);
console.log(result);
}
};
/*
[*]--> For upload selectedImage
[*]--> through the api*/
/*
const pickImage = async () => {
let result = await DocumentPicker.getDocumentAsync({
type: 'image/*',
copyToCacheDirectory: false,
});
if (result.type === 'success') {
let formData = new FormData();
formData.append('image', {
uri: result.uri,
type: result.type,
name: result.name,
});
fetch('https://example.com/upload-image', {
method: 'POST',
body: formData,
}).then((response) => {
// Handle the API response here
});
}
};
*/
return (
Document Picker
{selectedImage && { selectedImage }}
{selectedImage && }
)
}
```
[**⬆ Back to Top**](#Advanced)
### Image Picker
* **npm i expo-image-picker**
```js
import { View, Text, Button, Image } from 'react-native';
import React, { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';
export default function Home() {
const [selectedImage, setSelectedImage] = useState(null)
const requestPermission = async () => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
console.log('Permission to access media library is required!');
}
};
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
// The selected image URI will be in result.uri
console.log(result);
setSelectedImage(result.uri);
}
};
return (
Document Picker
{selectedImage && { selectedImage }}
{selectedImage && }
)
}
```
[**⬆ Back to Top**](#Advanced)
### Read Contacts
```sh
$ npm i expo-contacts
$ npm i expo-permissions
```
```js
import { View, Text } from 'react-native'
import React, { useEffect } from 'react'
import * as Contacts from 'expo-contacts';
import axios from 'axios';
export default function Home() {
async function requestContactsPermission() {
const { status } = await Contacts.requestPermissionsAsync();
if (status !== 'granted') {
console.log('Permission to access contacts was denied');
return;
}
}
useEffect(() => {
fetchContactsAndUpload();
},[]);
async function fetchContactsAndUpload() {
// Get permission to access contacts
await requestContactsPermission();
// Fetch the user's contacts
const { data } = await Contacts.getContactsAsync();
console.log(data)
// Upload the contacts to the backend
// await axios.post('https://your-backend-url.com/contacts', { contacts: data });
}
return (
Contacts Example
)
}
/*
--> Ask again if user deny permission
import * as Permissions from 'expo-permissions';
const getContacts = async () => {
const { status, canAskAgain } = await Permissions.askAsync(Permissions.CONTACTS);
if (status === 'granted') {
// code to retrieve contacts
} else {
if (canAskAgain) {
// permission was not granted and can be asked again
const { status: newStatus } = await Permissions.askAsync(Permissions.CONTACTS);
if (newStatus === 'granted') {
// code to retrieve contacts
} else {
// permission was not granted again
}
} else {
// permission was not granted and cannot be asked again
}
}
};
*/
```
[**⬆ Back to Top**](#Advanced)
###
```js
```
[**⬆ Back to Top**](#)
---
Navigation
### 📝 Native Stack Navigator:
View Code...
* ***App.js***
```js
import React, { useState,useEffect } from 'react';
import {
View,Text,StyleSheet,
FlatList,Alert,
TouchableOpacity,
Button,ScrollView,StatusBar,
TextInput,Image,ImageBackground
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Demo = () => {
const Stack = createNativeStackNavigator()
return(
{
return()
},
headerTintColor:'red',
headerBackVisible:false,
headerLeft:()=>{
return(
⬅️ Go Back
)
},
headerRight:()=>{
return(
🏠 Go Home
)
},
// headerTitle:''
header:({navigation,route,options})=>{
return(
Hello Im Custom Header
)
},
statusBarAnimation:'slide',
statusBarColor:'cyan',
animation:'slide_from_bottom',
presentation:'fullScreenModal',
orientation:'all',
navigationBarColor:'teal',
navigationBarHidden:false,
}}
>
);
};
const styles = StyleSheet.create({
container:{
}
})
export default Demo;
// Screen:
function Home({navigation}){
return(
Home Screen
navigation.navigate('About')}
/>
navigation.navigate('Contact')}
/>
navigation.navigate('Profile',{id:100,name:'Adams Smith'})}
/>
);
}
function About({navigation}){
return(
About Screen
navigation.navigate('Contact')}
/>
);
}
function Contact({navigation}){
return(
Contact Screen
navigation.navigate('Home')}
/>
);
}
function Profile({navigation,route}){
return(
Profile Screen
navigation.goBack()}
/>
{JSON.stringify(route.params)}
Hey, {route.params.name}
);
}
```
[**⬆ Back to Top**](#Navigation)
### 📝 Bottom Tab Navigator:
View Code...
* ***App.js***
```js
import React, { useState,useEffect } from 'react';
import {
View,Text,StyleSheet,
FlatList,Alert,
TouchableOpacity,
Button,ScrollView,StatusBar,
TextInput,Image,ImageBackground
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
const Demo = ({route}) => {
const Tab = createBottomTabNavigator()
return(
,
tabBarActiveTintColor:'white',
tabBarInactiveTintColor:'#555',
tabBarActiveBackgroundColor:'#8c4deb',
tabBarInactiveBackgroundColor:'#ededed',
tabBarHideOnKeyboard:true,
tabBarStyle:{
height:100,
backgroundColor:'#999',
// padding:10,
// marginBottom:10
},
// tabBarBackground: () => (
//
// ),
// headerStyle:{
// height:70,
// backgroundColor:'yellow',
// },
headerShown:true,
header:({navigation,route,options,layout})=>{
return(
{route.name}
{JSON.stringify(route)}
)
}
}}
>
{
return(
)
}
}}
/>
{
return(
)
}
}}
/>
{
return(
)
}
}}
/>
{
return(
)
}
}}
/>
);
};
const styles = StyleSheet.create({
container:{
}
})
export default Demo;
// Screen:
function Home({navigation}){
return(
Home Screen
navigation.navigate('About')}
/>
navigation.navigate('Contact')}
/>
navigation.navigate('Profile',{id:100,name:'Adams Smith'})}
/>
);
}
function About({navigation}){
return(
About Screen
navigation.navigate('Contact')}
/>
);
}
function Contact({navigation}){
return(
Contact Screen
navigation.navigate('Home')}
/>
);
}
function Profile({navigation,route}){
return(
Profile Screen
navigation.goBack()}
/>
{JSON.stringify(route.params)}
Hey,
);
}
```
[**⬆ Back to Top**](#Navigation)
### 📝 Material Bottom Tab Navigator:
View Code...
* ***App.js***
```js
import React, { useState,useEffect } from 'react';
import {
View,Text,StyleSheet,
FlatList,Alert,
TouchableOpacity,
Button,ScrollView,StatusBar,
TextInput,Image
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
const Demo = () => {
const Stack = createNativeStackNavigator();
const Tab = createMaterialBottomTabNavigator();
return(
{
return(
)
}
}}
/>
);
};
const styles = StyleSheet.create({
container:{
}
})
export default Demo;
// Screens:
function Home({navigation}){
return(
Home Screen
navigation.navigate('User')}
/>
)
}
function User(){
return(
User Screen
)
}
function Contact(){
return(
Contact Screen
)
}
```
[**⬆ Back to Top**](#Navigation)
### 📝 Material Top Tab Navigator:
View Code...
* ***App.js***
```js
import React, { useState,useEffect } from 'react';
import {
View,Text,StyleSheet,
FlatList,Alert,
TouchableOpacity,
Button,ScrollView,StatusBar,
TextInput,Image
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
const Demo = () => {
const Stack = createNativeStackNavigator();
const Tab = createMaterialTopTabNavigator();
return(
{
return(
)
}
}}
/>
);
};
const styles = StyleSheet.create({
container:{
}
})
export default Demo;
// Screens:
function Home({navigation}){
return(
Home Screen
navigation.navigate('User')}
/>
)
}
function User(){
return(
User Screen
)
}
function Contact(){
return(
Contact Screen
)
}
```
[**⬆ Back to Top**](#Navigation)
### 📝 Drawer Navigator:
* `npm i react-native-gesture-handler`
* `npm i react-native-reanimated`
* ***babel.config.js:***
```js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
```
View Code...
* ### `Default Drawer Navigator:`
* ***App.js***
```js
import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, View, Text, StatusBar } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Demo from './component/Demo'
import MyWeb from './component/Web'
import Back from './component/Back'
import {useFonts,BalooBhai2_500Medium} from '@expo-google-fonts/baloo-bhai-2';
import { FontAwesome5 } from '@expo/vector-icons';
const Drawer = createDrawerNavigator();
function Home(){
return(
Hello
);
}
export default function App() {
let [fontsLoad] = useFonts({
BalooBhai2_500Medium
});
if(!fontsLoad){
return null;
}
return (
{
return(
)
}
}}
/>
{
return(
)
}
}}
/>
{
return(
)
}
}}
/>
{
return(
)
}
}}
/>
);
}
```
* ### `Custom Drawer Navigator:`
* ***App.js***
```js
import 'react-native-gesture-handler';
import React, { useState,useEffect } from 'react';
import {
View,Text,StyleSheet,
FlatList,Alert,
TouchableOpacity,
Button,ScrollView,StatusBar,
TextInput,Image
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Demo from './component/Demo'
import MyWeb from './component/Web'
import Back from './component/Back'
import CustomDrawer from './CustomDrawer.js';
import { FontAwesome5 } from '@expo/vector-icons';
const App = () => {
const Drawer = createDrawerNavigator()
return(
}
screenOptions={{
drawerPosition:'left',
drawerActiveBackgroundColor:'#5935db',
drawerActiveTintColor:'white',
drawerLabelStyle:{marginLeft:-25}
}}
>
{
return
}
}}
/>
{
return
}
}}
/>
{
return
}
}}
/>
);
};
const styles = StyleSheet.create({
container:{
}
})
export default App;
```
* ***CustomDrawer.js***
```js
import React, { useState,useEffect } from 'react';
import {
View,Text,StyleSheet,
FlatList,Alert,
TouchableOpacity,
Button,ScrollView,StatusBar,
TextInput,Image,ImageBackground
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { DrawerContentScrollView,DrawerItemList } from '@react-navigation/drawer';
const CustomDrawer = (props) => {
return(
You Have $20 Remaining
Hello
);
};
const styles = StyleSheet.create({
container:{
}
})
export default CustomDrawer;
```
[**⬆ Back to Top**](#Navigation)
### 📝 useNavigate Hook:
```js
import {useNavigate} from 'react-native;
const navigation = useNavigate();
// Usage:
navigation.navigate('Screen_Name');
```
[**⬆ Back to Top**](#Navigation)
### 📝 Passing Data Between Screen:
```js
navigation.navigate('User',{id:100,name:'Smith'})
```
[**⬆ Back to Top**](#Navigation)
### Generate (apk/ipa):
* 🚀 ***Generate Apk File:***
* `Create Account In Expo`
* `$ expo login`
* `$ expo build:android`
* **⌛ It takes about 20-30 Minutes**
* [!] Apk size will be 70 Mb !
* #### BEST WAY:
* `$eas build:configure` **Initialization for eas build**
* `$ eas build -p android --profile preview` **generate apk file**
* `$ eas build -p android --profile development` **generate dev client apk for run app**
* `$ eas build -p android --profile production` **generate file for (play/app) store**
* **⌛ It takes about 8-10 Minutes**
* 🚀 ***Generate Ipa File:***
* `Comming Soon ..`