{"id":22779306,"url":"https://github.com/fazle-rabbi-dev/react-native","last_synced_at":"2026-04-02T03:12:07.392Z","repository":{"id":109581989,"uuid":"536398852","full_name":"fazle-rabbi-dev/React-Native","owner":"fazle-rabbi-dev","description":"πŸ“ 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.","archived":false,"fork":false,"pushed_at":"2024-04-30T06:15:29.000Z","size":54,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-01T17:47:04.967Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fazle-rabbi-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-14T03:28:59.000Z","updated_at":"2024-04-30T06:15:33.000Z","dependencies_parsed_at":"2024-04-30T07:45:46.721Z","dependency_job_id":null,"html_url":"https://github.com/fazle-rabbi-dev/React-Native","commit_stats":null,"previous_names":["fazle-rabbi-dev/react-native"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fazle-rabbi-dev/React-Native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazle-rabbi-dev%2FReact-Native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazle-rabbi-dev%2FReact-Native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazle-rabbi-dev%2FReact-Native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazle-rabbi-dev%2FReact-Native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fazle-rabbi-dev","download_url":"https://codeload.github.com/fazle-rabbi-dev/React-Native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazle-rabbi-dev%2FReact-Native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31294935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T01:43:37.129Z","status":"online","status_checked_at":"2026-04-02T02:00:08.535Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-11T20:08:27.845Z","updated_at":"2026-04-02T03:12:07.353Z","avatar_url":"https://github.com/fazle-rabbi-dev.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align='center'\u003eREACT-NATIVE\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg width=\"40%\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png\" alt=\"React-Native\" /\u003e\n\u003c/div\u003e\n\nHello 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.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ci\u003eAll About Of React Native\u003c/i\u003e\u003c/b\u003e\u003c/summary\u003e\n\n## What is React-Native?\n\nReact 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.\n\n## What Is Cross-Platform Development?\n\nCross-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.\n\n## What is the meaning of native apps?\n\nThe 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.\n\n## What is the meaning of hybrid apps?\n\nHybrid 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.\n\nβœ… [Learn More](https://code.tutsplus.com/tutorials/what-is-react-native--cms-38028)\n\n\u003c/details\u003e\n\n\n\u003cdiv align=\"center\"\u003e\n\n## Prerequisites βœ…\n\nTo better understand React Native, consider learning the following technologies before diving in. This will help you grasp React Native more effectively.\n\n ![](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n ![](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n ![](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E)\n ![](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n## [Learning Resources πŸŽ‰](/resources/README.md)\n\n\u003c/div\u003e\n\n---\n# πŸ“” NOTE:\n- `We can use packages that are not directly supported on Expo by creating a` [Development build.](https://docs.expo.dev/develop/development-builds/introduction/)\n\n---\n\n### ⏳How Many Does It Takes To Learn?\nAfter learning HTML, CSS, JavaScript, and React.js, it took me just **9 days** to grasp basic to intermediate topics.\n\n\u003e [!Note]\n\u003e This React Native note is based on Expo CLI.\n\n---\n\n\u003ch1 align='center'\u003eTable Of Contents\u003c/h1\u003e\n\n\u003ca id='Fundamentals'\u003e\u003c/a\u003e\n\n### `️⚑BASICS`\n\n\u003cdetails\u003e\n\u003csummary\u003eClick To Expand \u003c/summary\u003e\n\n* [Setup React Native App](#Setup)\n* [Setup Absolute Path Resolver](#AbsolutePath)\n* [View,Text](#View)\n* [Styling Components](#Styling)\n* [Buttons](#Button)\n* [Touchable](#Touchable)\n* [Pressable](#Pressable)\n* `List` \u003e\u003e ***Like React.js***\n* [FlatList](#FlatList)\n* [Section List](#Section)\n* [SafeAreaView \u0026 StatusBar](#SafeAreaView)\n* [ScrollView](#ScrollView)\n* [Refresh Control](#Refresh)\n* [Image \u0026 ImageBackground](#Image)\n* [Custom Fonts](#Fonts)\n* [Icons](#Icons)\n* [Text Input](#TextInput)\n* [Switch](#Switch)\n* [Checkbox](#Checkbox)\n* [StausBar](#StausBar)\n* [Link](#Link)\n* [Alert \u0026 Toast Message](#Alert)\n* [Modal](#Modal)\n* [Async Storage](#AsyncStorage)\n* [Activity Indicator](#ActivityIndicator)\n* [Web View](#WebView)\n* [Copy Text](#Copy)\n* [Back Button Handler](#BackHandler)\n* [Copy To Clipboard](#copyToClipboard)\n* [.env Variable](https://dev.to/dallington256/using-env-file-in-react-native-application-3961)\n\n\u003c/details\u003e\n\n\u003ca id='Advanced'\u003e\u003c/a\u003e\n\n### `️⚑ADVANCED`\n\n\u003cdetails\u003e\n\u003csummary\u003eClick To Expand \u003c/summary\u003e\n\n* [Apply Global Style](#globalStyle)\n* [Play Audio](#playAudio)\n* [Play Video](#playVideo)\n* [Get Device Info](#getDeviceInfo)\n* [Get NetInfo](https://github.com/react-native-netinfo/react-native-netinfo)\n* [Sqlite Database](#SQLite)\n* [Google Admob Ads](#Admob)\n* [Bio Metrics](#bioMetrics)\n* [Gradient Background](#gradientBg)\n* **Firebase With React-Native**\n * Authentication\n * FireStore Database `same as react-js` [example](https://github.com/fh-rabbi/web-development/blob/main/frontEnd/react/README.md#FirestoreDB)\n * [Realtime Database](#realtimeDb)\n* [Disable Taking Screenshots](#disableScreenshot)\n* [Document Picker](#docPicker)\n* [Image Picker](#imgPicker)\n* [Read Contacts And Upload To Database πŸ˜›](#accessContact)\n\n\n---\n\n* ### `NOT AVAILABLE`\n* [Push Notification ](#pushNotification)\n* [Push Notification With Firebase](#pushNotification)\n* [Access Storage,Camera,Call logs etc](#access)\n* [Google Maps](#maps)\n\n\n\u003c/details\u003e\n\n\u003ca id='Navigation'\u003e\u003c/a\u003e\n\n### `️⚑NAVIGATION`\n\n\u003cdetails\u003e\n\u003csummary\u003eClick To Expand \u003c/summary\u003e\n\n* [Native Stack Navigator](#Native)\n* [Bottom Tab Navigator](#Bottom)\n* [Material Bottom Tab Navigator](#MaterialBottom)\n* [Material Top Tab Navigator](#MaterialTop)\n* [Drawer Navigator](#Drawer)\n* [useNavigate Hook](#useNavigate)\n* [Passing Data Between Screen](#Passing)\n\n\u003c/details\u003e\n\n### [βœ…Generate (apk/ipa) file for install app in Real-Device](#buildApps)\n\n---\n\n\u003ch1 align='center'\u003eFundamentals\u003c/h1\u003e\n\n\u003ca id='Setup'\u003e\u003c/a\u003e\n\n### πŸ“ Setup React Native App:\n```bash\n$ npm i expo\n$ expo init my-app\n\n# Or:\nnpx create-expo-app@latest my-app\n```\n\n\u003ca id='setup'\u003e\u003c/a\u003e\n[**⬆ Back to Top**](#Fundamentals)\n\n\n\u003ca id='AbsolutePath'\u003e\u003c/a\u003e\n\n### πŸ“ Setup Absolute Path Resolver:\n1. `$ npm i npm install --save-dev babel-plugin-module-resolver`\n2. Create a **jsconfig.json** file in the root of your project:\n ```json\n {\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"src/*\": [\"./src/*\"],\n \"assets/*\": [\"./src/assets/*\"],\n \"components/*\": [\"./src/components/*\"],\n \"constants/*\": [\"./src/constants/*\"],\n \"helpers/*\": [\"./src/helpers/*\"],\n \"hooks/*\": [\"./src/hooks/*\"],\n \"navigation/*\": [\"./src/navigation/*\"],\n \"redux/*\": [\"./src/redux/*\"],\n \"screens/*\": [\"./src/screens/*\"],\n \"theme/*\": [\"./src/theme/*\"],\n \"utils/*\": [\"./src/utils/*\"],\n }\n }\n }\n ```\n3. Edit **babel.config.js** file in the root of your project:\n ```js\n module.exports = {\n plugins: [\n [\n 'module-resolver',\n {\n alias: {\n src: './src',\n '@assets': './src/assets',\n '@components': './src/components',\n '@constants': './src/constants',\n '@helpers': './src/helpers',\n '@hooks': './src/hooks',\n '@models': './src/models',\n '@navigation': './src/navigation',\n '@redux': './src/redux',\n '@screens': './src/screens',\n '@services': './src/services',\n '@theme': './src/theme',\n '@utils': './src/utils',\n },\n },\n ],\n ],\n };\n ```\n4. Restart App With Clear Cache: `npx expo start -c`\n\n\u003ca id='setup'\u003e\u003c/a\u003e\n[**⬆ Back to Top**](#Fundamentals)\n\n\n\u003ca id='View'\u003e\u003c/a\u003e\n\n### πŸ“ View,Text:\n```js\n// View Like Html -\u003e \u003cdiv\u003e\u003c/div\u003e\n// Text Like Html -\u003e \u003cp\u003e\u003c/p\u003e\nimport {View,Text} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cText\u003eHello World\u003c/Text\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n\u003ca id='setup'\u003e\u003c/a\u003e\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Styling'\u003e\u003c/a\u003e\n\n### πŸ“ Styling Components:\n```js\nimport {\n View,Text,StyleSheet\n} from 'react-native';\nimport {WebView} from 'react-native-webview';\n\nconst Demo = () =\u003e {\n return(\n \u003cView style={styles.main}\u003e\n \u003cText style={[styles.text,styles.white]}\u003eIm A Text\u003c/Text\u003e\n \u003c/View\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n main:{\n margin: 20,\n backgroundColor: 'red',\n padding: 10,\n borderRadius: 5\n },\n text:{\n fontWeight: 'bold',\n textAlign: 'center',\n },\n // For Apple Multiple Style:\n white:{\n color: 'white'\n }\n})\n\nexport default Demo;\n```\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Button'\u003e\u003c/a\u003e\n\n### πŸ“ Button:\n```js\nimport {Button} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cButton\n title=''\n onPress={}\n color='red'\n \u003e\n Open Link\n \u003c/Button\u003e\n );\n};\n\nexport default Demo;\n```\n\n\u003ca id='setup'\u003e\u003c/a\u003e\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Touchable'\u003e\u003c/a\u003e\n\n### πŸ“ Touchable:\n```js\nimport {\n View,Text,\n TouchableOpacity,\n TouchableHighlight,\n TouchableWithoutFeedback,\n Alert\n} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cTouchableOpacity\n // onPress={}\n activeOpacity={0.7}\n \u003e\n \u003cView style={{backgroundColor:'red'}}\u003e\n \u003cText style={{color: 'white',textAlign: 'center'}}\u003eTouchableOpacity\u003c/Text\u003e\n \u003c/View\u003e\n \u003c/TouchableOpacity\u003e\n \u003cTouchableHighlight\n // onPress={}\n activeOpacity={0.7}\n underlayColor='#999'\n \u003e\n \u003cView style={{backgroundColor:'green'}}\u003e\n \u003cText style={{color: 'white',textAlign: 'center'}}\u003eTouchableHighlight\u003c/Text\u003e\n \u003c/View\u003e\n \u003c/TouchableHighlight\u003e\n \u003cTouchableWithoutFeedback\n // onPress={}\n onLongPress={()=\u003eAlert.alert('ok')}\n activeOpacity={0.7}\n underlayColor='#999'\n \u003e\n \u003cView style={{backgroundColor:'orange'}}\u003e\n \u003cText style={{color: 'white',textAlign: 'center'}}\u003eTouchableWithoutFeedback\u003c/Text\u003e\n \u003c/View\u003e\n \u003c/TouchableWithoutFeedback\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Pressable'\u003e\u003c/a\u003e\n\n### πŸ“ Pressable:\n```js\n\u003cPressable \n style={({pressed})=\u003e({backgroundColor:pressed?'#999':'#999'})}\n disabled={false}\n android_ripple={{color:'yellow'}}\n onPress={()=\u003eAlert.alert('onPress fired!')}\n onLongPress={()=\u003eAlert.alert('onLongPress fired!')}\n delayLongPress={5000}\n hitSlop={{bottom:50}}\n\u003e\n \u003cView\u003e\n \u003cText style={styles.buttonText}\u003eClick me\u003c/Text\u003e\n \u003c/View\u003e\n\u003c/Pressable\u003e\n```\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='FlatList'\u003e\u003c/a\u003e\n\n### πŸ“ FlatList:\n```js\nimport {FlatList} from 'react-native';\n\nconst data = [\n {\n id: 1,\n name: 'Test'\n }\n]\n\nconst loadData = ({item}) =\u003e {\n return(\n \u003cView\u003e\n \u003cText\u003e{item.name}\u003c/Text\u003e\n \u003cView\u003e\n );\n}\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cFlatList\n keyExtractor={(item) =\u003e item.id}\n data={data}\n renderItem={loadData}\n horizontal\n showHorizontalScrollIndicator={false}\n numColumns={2}\n inverted\n /\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Section'\u003e\u003c/a\u003e\n\n### πŸ“ Section List:\n```js\nimport {\n View,Text,SectionList\n} from 'react-native';\n\nconst data = [\n {id:1,name:'Fruit1',data:['Apple','Orange']},\n {id:2,name:'Fruit2',data:['Apple','Orange']},\n {id:3,name:'Fruit3',data:['Apple','Orange']},\n {id:4,name:'Fruit4',data:['Apple','Orange']}\n ]\n\nexport default function Demo(){\n return(\n \u003cView\u003e\n \u003cSectionList\n keyExtractor={(item,index)=\u003eindex}\n sections={data}\n renderSectionHeader={({section})=\u003e{\n return \u003cText\u003e{section.name}\u003c/Text\u003e\n }}\n renderItem={({item})=\u003e{\n return \u003cText\u003e{item}\u003c/Text\u003e\n }}\n /\u003e\n \u003c/View\u003e \n );\n}\n```\n\n\u003ca id='setup'\u003e\u003c/a\u003e\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='SafeAreaView'\u003e\u003c/a\u003e\n\n### πŸ“ SafeAreaView \u0026 StatusBar:\n```js\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { StatusBar } from \"expo-status-bar\";\n\nconst Demo = () =\u003e {\n return(\n \u003cSafeAreaView\u003e\n \n \u003cStatusBar backgroundColor=\"#161622\" style=\"light\" /\u003e\n \u003c/SafeAreaView\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='ScrollView'\u003e\u003c/a\u003e\n\n### πŸ“ ScrollView:\n```js\nimport {ScrollView} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cScrollView\u003e\n // write all things...\n \u003c/ScrollView\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Refresh'\u003e\u003c/a\u003e\n\n### πŸ“ Refresh Control:\n```js\nimport { useState } from 'react';\nimport {\n View,Text,FlatList,\n RefreshControl,ScrollView\n} from 'react-native';\n\nconst myData = [\n {\n id: 1,\n name: 'Smith'\n },\n {\n id: 2,\n name: 'David'\n },\n {\n id: 3,\n name: 'John'\n },\n {\n id: 4,\n name: 'Doe'\n },\n ]\n\nexport default function Demo(){\n const [data,setData] = useState(myData)\n const [refreshing,setRefreshing] = useState(false)\n \n function RefreshHandler(){\n setRefreshing(true);\n let newData = [...data,{id:data.length+1,name:'rabbi'}]\n setData(newData);\n setRefreshing(false);\n }\n \n return(\n \u003cView\u003e\n \u003cFlatList \n keyExtractor={(item)=\u003eitem.id}\n data={data}\n renderItem={({item})=\u003e{\n return(\n \u003cView\u003e\n \u003cText\u003e{item.name}\u003c/Text\u003e\n \u003c/View\u003e\n );\n }}\n refreshControl={\n \u003cRefreshControl\n refreshing={refreshing}\n onRefresh={RefreshHandler}\n colors={['red']}\n /\u003e\n }\n /\u003e\n \u003cText\u003e{JSON.stringify(data)}\u003c/Text\u003e\n \u003c/View\u003e\n );\n}\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Image'\u003e\u003c/a\u003e\n\n### πŸ“ Image \u0026 Image Background:\n```js\nimport {Image} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n // Local Image:\n \u003cImage source={require('../assets/demo.png')} /\u003e\n // For Remote Image:\n \u003cImage source={{uri:'https://something.com/nature.png'}} /\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Fonts'\u003e\u003c/a\u003e\n\n### πŸ“ Custom Fonts:\n* **For Google Fonts:**\n* ***expo install @expo-google-fonts/baloo-bhai-2***\n```js\n// import {View,Text} from 'react-native';\nimport { useFonts,BalooBhai2_700Bold } from '@expo-google-fonts/baloo-bhai-2';\n\nconst Demo = () =\u003e {\n let [isFontLoaded] = useFonts({\n BalooBhai2_700Bold\n });\n \n if(!isFontLoaded){\n return null;\n }\n \n return(\n \u003cView\u003e\n \u003cText\n style={{fontFamily: 'BalooBhai2_700Bold'}}\n \u003e\n Hello\n \u003c/Text\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n* **For Downloaded Fonts:**\n```sh\nnpm install expo-font\n```\n***App.js***\n```js\nimport * as Font from 'expo-font'\n\n// Define load font function\nasync function loadFonts() {\n await Font.loadAsync({\n 'your-font-name': require('./path-to-your-font-file.ttf'),\n });\n}\n\n// Load font when component mounting\nuseEffect(() =\u003e {\n loadFonts()\n},[]);\n\n// Component\n\u003cText style={styles.text}\u003eHello\u003c/Text\u003e\n\n// Style\ntext: {\n fontFamily: 'your-font-name',\n fontSize: 20,\n },\n```\n* **FOR APPLY FONTS IN GLOBALLY:**\n * Import and load all fonts in *app.js*\n * And use in entire application\n ```js\n import React, { useState, useEffect } from 'react';\n import { Text, View, StyleSheet } from 'react-native';\n import AppLoading from 'expo-app-loading';\n import {\n useFonts,\n Inter_900Black,\n } from '@expo-google-fonts/inter';\n import {\n BalooBhai2_700Bold,\n } from '@expo-google-fonts/baloo-bhai-2';\n import Home from './components/Home.js';\n \n \n export default () =\u003e {\n let [fontsLoaded] = useFonts({\n Inter_900Black,\n BalooBhai2_700Bold\n });\n \n if (!fontsLoaded) {\n return null;\n } else {\n return (\n \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n \u003cHome/\u003e \n \u003c/View\u003e\n );\n }\n }; \n ```\n\n* **Another Way**\n ```js\n import { useEffect } from \"react\";\n import { View, Text } from \"react-native\";\n import { SplashScreen, Stack } from \"expo-router\";\n import { useFonts } from \"expo-font\";\n import { GlobalProvider } from \"../context/GlobalProvider.jsx\";\n import { SafeAreaView } from \"react-native-safe-area-context\";\n import { StatusBar } from \"expo-status-bar\";\n \n // Prevent the splash screen from auto-hiding before asset loading is complete.\n SplashScreen.preventAutoHideAsync();\n \n const RootLayout = () =\u003e {\n const [fontsLoaded, error] = useFonts({\n \"Poppins-Black\": require(\"../assets/fonts/Poppins-Black.ttf\"),\n \"Poppins-Bold\": require(\"../assets/fonts/Poppins-Bold.ttf\"),\n \"Poppins-ExtraBold\": require(\"../assets/fonts/Poppins-ExtraBold.ttf\"),\n \"Poppins-ExtraLight\": require(\"../assets/fonts/Poppins-ExtraLight.ttf\"),\n \"Poppins-Light\": require(\"../assets/fonts/Poppins-Light.ttf\"),\n \"Poppins-Medium\": require(\"../assets/fonts/Poppins-Medium.ttf\"),\n \"Poppins-Regular\": require(\"../assets/fonts/Poppins-Regular.ttf\"),\n \"Poppins-SemiBold\": require(\"../assets/fonts/Poppins-SemiBold.ttf\"),\n \"Poppins-Thin\": require(\"../assets/fonts/Poppins-Thin.ttf\")\n });\n \n useEffect(() =\u003e {\n if (error) throw error;\n \n if (fontsLoaded) {\n SplashScreen.hideAsync();\n }\n }, [fontsLoaded, error]);\n \n if (!fontsLoaded) {\n return null;\n }\n \n return (\n \u003cGlobalProvider\u003e\n \u003cStack\u003e\n \u003cStack.Screen name=\"(auth)\" options={{ headerShown: false }} /\u003e\n \u003cStack.Screen name=\"(tabs)\" options={{ headerShown: false }} /\u003e\n \u003cStack.Screen name=\"index\" options={{ headerShown: false }} /\u003e\n \u003cStack.Screen name=\"search/[query]\" options={{ headerShown: false }} /\u003e\n \u003c/Stack\u003e\n \u003c/GlobalProvider\u003e\n );\n };\n \n export default RootLayout;\n ```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n### πŸ“ Icons:\n* ***expo install @expo/vector-icons***\n```js\nimport {View,Text} from 'react-native';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cText\n style={{fontFamily: 'BalooBhai2_700Bold'}}\n \u003e\n \u003cFontAwesome5\n name='bars'\n size={26}\n color='red'\n /\u003e\n \u003c/Text\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Icons'\u003e\u003c/a\u003e\n\n### πŸ“ Icons:\n* ***npm i @expo/vector-icons***\n```js\nimport {\n View,Text\n} from 'react-native';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nexport default function Demo(){\n return(\n \u003cView\u003e\n \u003cFontAwesome5\n name='home'\n size={20}\n color='red'\n /\u003e\n \u003c/View\u003e\n );\n}\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='TextInput'\u003e\u003c/a\u003e\n\n### πŸ“ Text Input:\n```js\nimport {View,TextInput} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cTextInput\n // value='Hello'\n // onChangeText={}\n placeholder='Type your name...'\n // keyboardType='phone-pad' // --\u003e phone-pad\n selectionColor='red'\n // maxLength={5}\n editable={true}\n // multiline\n secureTextEntry\n /\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Switch'\u003e\u003c/a\u003e\n\n### πŸ“ Switch:\n```js\nimport {View,Switch} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cSwitch\n value={true}\n // onValueChange={}\n tintColor='red'\n thumbColor='blue'\n trackColor='blue'\n // disabled\n /\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Checkbox'\u003e\u003c/a\u003e\n\n### πŸ“ Checkbox:\n```js\nimport { useState } from 'react';\nimport {View,Text,Switch} from 'react-native';\nimport CheckBox from 'expo-checkbox';\n\nconst Demo = () =\u003e {\n const [checked,setChecked] = useState(false)\n \n function handleCheckbox(){\n setChecked(!checked);\n }\n \n return(\n \u003cView style={{margin:10,flexDirection:'row'}}\u003e\n \u003cCheckBox\n value={checked}\n onValueChange={handleCheckbox}\n color={checked?'teal':'red'}\n /\u003e\n \u003cText \n style={{marginLeft:5}}\n \u003eI agree all tos.\u003c/Text\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='StausBar'\u003e\u003c/a\u003e\n\n### πŸ“ StausBar:\n```js\nimport {View,StatusBar} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cStatusBar\n backgroundColor='red'\n barStyle='light-content'\n /\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Link'\u003e\u003c/a\u003e\n\n### πŸ“ Link:\n```js\nimport {View,Linking} from 'react-native';\n\nconst Demo = () =\u003e {\n return(\n \u003cView\u003e\n \u003cText onPress={Linking.openURL('https://example.com')}\u003e\n Click Me\n \u003c/Text\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Alert'\u003e\u003c/a\u003e\n\n### πŸ“ Alert \u0026 Toast Message:\n```js\nimport { useState } from 'react';\nimport {View,Text,Button,Alert,ToastAndroid} from 'react-native';\nimport CheckBox from 'expo-checkbox';\n\nconst Demo = () =\u003e {\n const [checked,setChecked] = useState(false)\n \n function handleAlert(){\n Alert.alert('Warning!','Are you sure you agree our terms of services...',[\n {text:'Ok',onPress:()=\u003econsole.log('Ok button pressed!')},\n {text:'Cancel',onPress:()=\u003econsole.log('Cancel button pressed!')},\n {text:'I know',onPress:()=\u003econsole.log('I know button pressed!')},\n ],{\n cancelable:true,\n onDismiss:()=\u003econsole.log('Back Button pressed!')\n });\n }\n \n function handleToast(){\n // ToastAndroid.show(\n // 'Hey there, im a toast message.',\n // ToastAndroid.SHORT // --\u003e SHORT/LONG\n // )\n \n // ToastAndroid.showWithGravity(\n // 'Hey there, im a toast message.',\n // ToastAndroid.SHORT, // --\u003e SHORT/LONG\n // ToastAndroid.CENTER // --\u003e TOP/BOTTOM/CENTER\n // )\n \n ToastAndroid.showWithGravityAndOffset(\n 'Hey there, im a toast message.',\n ToastAndroid.SHORT, // --\u003e SHORT/LONG\n ToastAndroid.TOP,0,0 // --\u003e width \u0026 height\n )\n }\n \n return(\n \u003cView style={{margin:10,flexDirection:'column'}}\u003e\n \u003cButton\n onPress={handleAlert}\n title='Alert'\n color='#784beb'\n /\u003e\n \n \u003cButton\n onPress={handleToast}\n title='Toast'\n color='red'\n /\u003e\n \u003c/View\u003e\n );\n};\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Modal'\u003e\u003c/a\u003e\n\n### πŸ“ Modal:\n```js\nimport { useState } from 'react';\nimport {\n View,Text,StyleSheet,\n Modal,Button\n} from 'react-native';\n\nconst Demo = () =\u003e {\n const [isModalOpen,setIsModalOpen] = useState(false)\n \n function handleModal(){\n setIsModalOpen(!isModalOpen);\n }\n \n return(\n \u003cView\u003e\n \u003cModal\n visible={isModalOpen}\n onRequestClose={handleModal}\n transparent\n animationType='fade'\n \u003e\n \u003cView style={styles.modalContainer}\u003e\n \u003cView style={[styles.modal]}\u003e\n \u003cText style={styles.title}\u003eWarning!\u003c/Text\u003e\n \u003cText style={styles.text}\u003eHey there, im a modal box.\u003c/Text\u003e\n \u003cButton\n onPress={handleModal}\n title='I know'\n color='teal'\n /\u003e\n \u003c/View\u003e\n \u003c/View\u003e\n \u003c/Modal\u003e\n \u003cButton\n onPress={handleModal}\n title='Open Modal'\n color='green'\n /\u003e\n \u003c/View\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n modalContainer:{\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center'\n },\n modal:{\n backgroundColor: 'black',\n padding: 20,\n borderRadius: 5,\n height: 300,\n width: '90%'\n },\n title:{\n fontSize: 40,\n color: 'white'\n },\n text:{\n fontSize: 22,\n color: '#ededed'\n }\n})\n\nexport default Demo;\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='AsyncStorage'\u003e\u003c/a\u003e\n\n### πŸ“ AsyncStorage:\n```js\n// It's like Javascript localStorage\nimport { AsyncStorage } from 'react-native';\n\nAsyncStorage.setItem()\nAsyncStorage.getItem()\nAsyncStorage.removeItem()\nAsyncStorage.mergeItem()\nAsyncStorage.clear()\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='ActivityIndicator'\u003e\u003c/a\u003e\n\n### πŸ“ Activity Indicator:\n```js\n// it's a spinner\nimport {ActivityIndicator} from 'react-native';\n\n\u003cActivityIndicator\n color='red'\n size={60}\n/\u003e\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='WebView'\u003e\u003c/a\u003e\n\n### πŸ“ Web View:\n* `$ npm i react-native-webview`\n```js\nimport {\n StatusBar\n} from 'expo-status-bar';\nimport React, {\n useState,\n useRef,\n useEffect\n} from 'react';\nimport {\n Alert,\n Button,\n ActivityIndicator,\n Linking,\n SafeAreaView,\n StyleSheet,\n BackHandler,View,Text\n} from 'react-native';\nimport {\n WebView\n} from 'react-native-webview';\n\nexport default function Web() {\n const webViewRef = useRef()\n const [isLoadong,setLoading] = useState(false);\n\n // Error component:\n function Err(){\n return(\n \u003cView style={{\n flex:1,\n height: 300,\n //width: '100%',\n backgroundColor: 'red'\n }}\u003e\n \u003cText\u003eError\u003c/Text\u003e\n \u003c/View\u003e \n );\n }\n \n // Go Back:\n function handleBackButtonPress(){\n try {\n webViewRef.current.goBack()\n } catch (err) {\n console.log(\"[handleBackButtonPress] Error : \", err.message)\n }\n }\n\n // Go Forword:\n function handleForwordButtonPress() {\n try {\n webViewRef.current.goForward()\n } catch (err) {\n console.log(\"[handleBackButtonPress] Error : \", err.message)\n }\n }\n \n // Stop Loading:\n function handleStopButtonPress() {\n try {\n webViewRef.current.stopLoading()\n } catch (err) {\n console.log(\"[handleBackButtonPress] Error : \", err.message)\n }\n }\n \n // Reload:\n function handleReloadButtonPress() {\n try {\n webViewRef.current.reload()\n } catch (err) {\n console.log(\"[handleBackButtonPress] Error : \", err.message)\n }\n }\n\n useEffect(() =\u003e {\n BackHandler.addEventListener(\"hardwareBackPress\", handleBackButtonPress)\n return () =\u003e {\n BackHandler.removeEventListener(\"hardwareBackPress\", handleBackButtonPress)\n };\n }, []);\n\n return (\n \u003cSafeAreaView style={styles.safeArea}\u003e\n \u003cButton\n title='Go Back'\n color='purple'\n onPress={handleBackButtonPress}\n /\u003e\n \u003cButton\n title='Go Forword'\n color='deeppink'\n onPress={handleForwordButtonPress}\n /\u003e\n \u003cButton\n title='Stop Loading'\n color='#222'\n onPress={handleStopButtonPress}\n /\u003e\n \u003cButton\n title='Reload'\n color='#6421db'\n onPress={handleReloadButtonPress}\n /\u003e\n \u003cErr/\u003e\n \u003cWebView\n // originWhiteList={['*']}\n source={ { uri: 'https://google.com' }}\n style={styles.container}\n ref={webViewRef}\n onError={()=\u003e {\n // Alert.alert('Error!', 'Please check your internet connection')\n return \u003cErr/\u003e\n }}\n onLoadStart={(syntheticEvent) =\u003e {\n setLoading(true);\n }}\n // onShouldStartLoadWithRequest={(event)=\u003e{\n // if (event.navigationType === 'click') {\n // if (!event.url.match(/(google\\.com\\/*)/) ) {\n // Linking.openURL(event.url)\n // return false\n // }\n // return true\n // }\n // else{\n // return true;\n // }\n // }}\n onLoadEnd={(syntheticEvent) =\u003e {\n setLoading(false);\n }}\n /\u003e\n {isLoadong \u0026\u0026 (\n \u003cActivityIndicator\n color=\"red\"\n size=\"large\"\n style={styles.loading}\n /\u003e\n )}\n \u003c/SafeAreaView\u003e\n );\n}\n\nconst styles = StyleSheet.create({\n safeArea: {\n flex: 1,\n backgroundColor: '#234356'\n },\n loading: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n alignItems: 'center',\n justifyContent: 'center'\n },\n container: {\n flex: 1,\n backgroundColor: '#fff',\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='Copy'\u003e\u003c/a\u003e\n\n### πŸ“ Copy Text:\n```js\n\u003cText selectable={true}\u003e\u003c/Text\u003e\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='BackHandler'\u003e\u003c/a\u003e\n\n### πŸ“ Back Button Handler:\n```js\nuseEffect(() =\u003e {\n const backAction = () =\u003e {\n Alert.alert(\"Hold on!\", \"Are you sure you want to go back?\", [\n {\n text: \"Cancel\",\n onPress: () =\u003e null,\n style: \"cancel\"\n },\n { text: \"YES\", onPress: () =\u003e BackHandler.exitApp() }\n ]);\n handleBackButtonPress()\n // return true;\n };\n\n const backHandler = BackHandler.addEventListener(\n \"hardwareBackPress\",\n backAction\n );\n\n return () =\u003e backHandler.remove();\n }, []);\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\u003ca id='copyToClipboard'\u003e\u003c/a\u003e\n\n### πŸ“ Copy To Clipboard:\n* ***expo install expo-clipboard***\n```\nimport * as Clipboard from 'expo-clipboard';\n\n// For copy:\nconst copyToClipboard = async (link) =\u003e {\n await Clipboard.setStringAsync(link);\n ToastAndroid.show(\n 'Copied successfuly!',\n ToastAndroid.SHORT\n )\n};\n \n// For Get Copied Text:\nconst getClipboardText = async (link) =\u003e {\n let text = await Clipboard.getStringAsync();\n};\n\n```\n\n[**⬆ Back to Top**](#Fundamentals)\n\n\n\n\n\n\n---\n\n\u003ch1 align='center'\u003eAdvanced\u003c/h1\u003e\n\u003cp id='globalStyle'\u003e\u003c/p\u003e\n\n### Apply Global Style\n* **style.js**\n```js\nimport { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n red:{\n color:'red',\n fontSize: 30\n }\n});\n\nexport default styles;\n```\n* **Test.js**\n```js\nimport { View, Text } from 'react-native'\nimport React from 'react'\nimport styles from './style.js'\n\nexport default function Test() {\n return (\n \u003cView\u003e\n \u003cText style={{fontFamily:\"Inter_900Black\"}}\u003eTest\u003c/Text\u003e\n \u003cText style={styles.red}\u003eIm Red Text\u003c/Text\u003e\n \u003c/View\u003e\n )\n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='playAudio'\u003e\u003c/p\u003e\n\n### Play Audio\n* ***npm i expo-av***\n```js\nimport React, { useState } from 'react';\nimport { Button } from 'react-native';\nimport { Audio } from 'expo-av';\n\nexport default function AudioPlayer() {\n const [sound, setSound] = useState(null);\n\n // Play Sound\n async function playSound() {\n const soundObject = new Audio.Sound();\n try {\n await soundObject.loadAsync(require('../../assets/300_weird.mp3'));\n await soundObject.playAsync();\n setSound(soundObject);\n } catch (error) {\n console.log(error);\n }\n }\n\n // Pause Sound\n async function pauseSound() {\n if (sound) {\n await sound.pauseAsync();\n }\n } \n \n // Resume Sound\n async function resumeSound() {\n if (sound) {\n await sound.playAsync();\n }\n } \n \n // Stop Sound\n async function stopSound() {\n if (sound) {\n await sound.stopAsync();\n await sound.unloadAsync();\n setSound(null);\n }\n } \n \n return (\n \u003c\u003e\n \u003cButton title=\"Play Audio\" onPress={playSound} /\u003e\n \u003cButton title=\"Pause Audio\" onPress={pauseSound} /\u003e\n \u003cButton title=\"Stop Audio\" onPress={stopSound} /\u003e\n \u003c/\u003e\n );\n}\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='playVideo'\u003e\u003c/p\u003e\n\n### Play Video\n```js\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Video } from 'expo-av';\n\nexport default function VideoPlayer() {\n const videoUri = 'http://23.20.142.224/video/CTE_OCTUBRE_V2.mp4'; // replace with your video URL\n\n return (\n \u003cView style={styles.container}\u003e\n \u003cVideo\n source={{ uri: videoUri }}\n rate={1.0}\n volume={1.0}\n isMuted={false}\n resizeMode=\"cover\"\n shouldPlay\n useNativeControls\n style={styles.videoPlayer}\n /\u003e\n \u003c/View\u003e\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n // flex: 1,\n // alignItems: 'center',\n // justifyContent: 'center',\n },\n videoPlayer: {\n width: '100%',\n height: 300,\n },\n});\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='getDeviceInfo'\u003e\u003c/p\u003e\n\n### Get Device Info\n* ***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:***\n * *eas build:configure*\n * *eas build -p android --profile development*\n * *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`\n```js\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport { Platform } from 'react-native';\nimport DeviceInfo from 'react-native-device-info';\n\nexport default function Device_info() {\n // Using DeviceInfo\n const [id,setId] = React.useState('')\n const [battery,setBattery] = React.useState('')\n const [carrierInfo,setCarrierInfo] = React.useState('')\n \n const deviceModel = DeviceInfo.getModel();\n // const deviceId = DeviceInfo.getUniqueId();\n const deviceId = DeviceInfo.getUniqueId();\n\n DeviceInfo.getAndroidId().then((androidId) =\u003e {\n // androidId here\n setId(androidId);\n });\n\n DeviceInfo.getBatteryLevel().then((label) =\u003e {\n setBattery(label)\n });\n\n DeviceInfo.getCarrier().then((carrier) =\u003e {\n setCarrierInfo(carrier)\n });\n \n return (\n \u003cView\u003e\n \u003cText\u003eDevice_info\u003c/Text\u003e\n \u003cText\u003e{JSON.stringify(Platform)}\u003c/Text\u003e\n \u003cText\u003e==========\u003c/Text\u003e\n \u003c/View\u003e\n )\n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\u003cp id='SQLite'\u003e\u003c/p\u003e\n\n### SQLite Database\n* **npm install expo-sqlite**\n```js\nimport * as SQLite from 'expo-sqlite'\n\n// Outside of the functiin\nconst db = SQLite.openDatabase('TodoApp.db');\n\nexport default function SqLite(){\n useEffect(() =\u003e {\n createTable()\n },[]);\n \n \n // Create Table\n function createTable(){\n db.transaction((tx)=\u003e{\n tx.executeSql(\n 'Create Table todos (id int auto increment primary key,title text)'\n ) \n });\n }\n \n \n // Create Data\n db.transaction(tx =\u003e {\n tx.executeSql(\n 'INSERT INTO users (name, email) VALUES (?, ?);',\n ['John Doe', 'johndoe@example.com']\n );\n }); \n \n \n // Read Data\n db.transaction(tx =\u003e {\n tx.executeSql(\n 'SELECT * FROM users;',\n [],\n (_, { rows }) =\u003e console.log(rows)\n );\n }); \n \n \n // Update Data\n function updateUserData(id, name, email) {\n db.transaction(tx =\u003e {\n tx.executeSql(\n 'UPDATE users SET name=?, email=? WHERE id=?;',\n [name, email, id],\n (_, { rowsAffected }) =\u003e {\n if (rowsAffected \u003e 0) {\n console.log(`User with id ${id} updated successfully.`);\n } else {\n console.log(`User with id ${id} not found.`);\n }\n }\n );\n });\n } \n \n // Delete Data\n function deleteUserData(id) {\n db.transaction(tx =\u003e {\n tx.executeSql(\n 'DELETE FROM users WHERE id=?;',\n [id],\n (_, { rowsAffected }) =\u003e {\n if (rowsAffected \u003e 0) {\n console.log(`User with id ${id} deleted successfully.`);\n } else {\n console.log(`User with id ${id} not found.`);\n }\n }\n );\n });\n }\n \n // return ...\n \n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='Admob'\u003e\u003c/p\u003e\n\n### Google Admob\n1. `npm i react-native-google-mobile-ads`\n2. `npm i -g eas-cli`\n3. `npm i expo-dev-client`\n4. **Now Build A development-client apk:**\n * By Using Bellow Commands:\n ```sh\n $ eas build:configure\n $ eas build -p android --profile development\n ```\n * `Download and install it and use this apk for view output of our app insted of` **Expo Go** \n * Now start app by using `expo start --dev-client` insted of **expo start**\n * View this \u003ca href=\"https://github.com/fh-rabbi/React-Native-Google-Ads\"\u003eSample\u003c/a\u003e\n\n[**⬆ Back to Top**](#Advanced)\n\n\u003cp id='bioMetrics'\u003e\u003c/p\u003e\n\n### Bio Metrics\n```js\n/* \n* =============================*\n * Fingerprint Authentication *\n* =============================*\n*/\nimport { View, Text, Alert } from 'react-native'\nimport React, {\n useEffect\n} from 'react'\nimport * as LocalAuthentication from 'expo-local-authentication';\n\nconst isLocked = true;\n\nexport default function Home() {\n useEffect(() =\u003e {\n \n if(isBiometricsAvailable){\n if(isBiometricsSaved){\n authenticateWithFingerprint();\n }\n else{\n passwordAuth();\n }\n }\n else{\n passwordAuth();\n }\n \n },[]);\n \n // Password Authencation\n async function passwordAuth(){\n Alert.alert(\"Not Found\", \"Biometrics not found in this device\")\n }\n \n // Check Biometrics Available or Not\n async function isBiometricsAvailable(){\n return await LocalAuthentication.hasHardwareAsync();\n }\n \n // Check Biometrics Saved in device or Not\n async function isBiometricsSaved(){\n return await LocalAuthentication.isEnrolledAsync();\n }\n \n // Fingerprint Authentication\n async function authenticateWithFingerprint() {\n const result = await LocalAuthentication.authenticateAsync({\n promptMessage: \"Verify it's you\"\n });\n if (result.success) {\n console.log(\"[*] Authenticated successfuly\")\n } else {\n console.log('[!] Authentication Canceled')\n authenticateWithFingerprint()\n }\n } \n \n return (\n \u003cView\u003e\n \u003cText\u003eHOME\u003c/Text\u003e\n \u003c/View\u003e\n )\n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='gradientBg'\u003e\u003c/p\u003e\n\n### Gradient Background\n```js\nimport { View, Text, StyleSheet } from 'react-native';\nimport React from 'react';\nimport { LinearGradient } from 'expo-linear-gradient';\n\nconst colors = ['#00ccff', '#00ff39', '#ff009f'];\nconst locations = [0, 0.5, 1];\n\n\nexport default function Home() {\n return (\n \u003cView\u003e\n \u003cLinearGradient\n colors={['#29e4ad', '#2647a2']}\n start={{ x: 0.1, y: 0.2 }}\n // end={{ x: 0.1, y: 0.2 }}\n // locations={[0.1,0.7]}\n style={styles.button}\n \u003e\n \u003cText style={styles.text}\u003eSign in with Facebook\u003c/Text\u003e\n \u003c/LinearGradient\u003e\n \u003c/View\u003e\n )\n}\n\n\nconst styles = StyleSheet.create({\n button:{\n padding:10,\n borderRadius: 5\n },\n text:{\n color: \"white\",\n textAlign: 'center'\n }\n}); \n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='realtimeDb'\u003e\u003c/p\u003e\n\n### Realtime Database\n```sh\n# install two module\n$ npm i firebase\n$ npm i react-firebase-hooks\n```\n* **Make a new project in firebase and add a web-app then copy the configuration code and paste in** `firebase.js` **file:**\n```js\n// Import the functions you need from the SDKs you need\nimport { initializeApp } from \"firebase/app\";\n\nconst firebaseConfig = {\n apiKey: 'removed for privacy,\n authDomain: \"expo-react-todo.firebaseapp.com\",\n databaseURL: 'removed for privacy',\n projectId: \"expo-react-todo\",\n storageBucket: \"expo-react-todo.appspot.com\",\n messagingSenderId: 'removed for privacy',\n appId: 'removed for privacy,\n measurementId: \"G-VTKDQXTSQK\"\n};\n\nconst app = initializeApp(firebaseConfig);\nconst db = getDatabase(app); // get reference to the Firebase Realtime Database\nexport default db;\n```\n* **App.js** `exmaple of todo app`\n```js\nimport db from '../firebase';\nimport {\n set,ref,onValue,remove\n} from 'firebase/database';\n\n // Create Data\n function handleSubmit(){\n if(title == '' || body == ''){\n Alert.alert(\"Warning!\",'Oops! please fill out all field');\n return;\n }\n set(ref(db,'notesData/'+title),{\n title,\n body,\n });\n fetchData();\n }\n \n\n // Read Data\n const fetchData = async (nodePath) =\u003e {\n const startCountRef = ref(db,'notesData');\n onValue(startCountRef, (snapshot) =\u003e {\n const data = snapshot.val();\n const keys = Object.keys(data);\n const notes = keys.map(key=\u003e{\n const newData = {\n id: key,\n ...data[key]\n };\n return newData;\n });\n console.log(notes)\n setAllNotes(notes);\n });\n };\n \n \n // Update note\n async function updateData(id){\n set(ref(db,'notesData/'+title),{\n title,\n body,\n });\n }\n \n \n // Delete Note \n async function deleteData(id){\n try {\n await remove(ref(db,'notesData/'+id));\n fetchData();\n showAlert(\"Success\",'Note deleted');\n } catch (e) {\n showAlert(\"Error\",'Something went wrong');\n }\n }\n```\n\n[**⬆ Back to Top**](#Advanced)\n\n\u003cp id='disableScreenshot'\u003e\u003c/p\u003e\n\n### Disable Taking Screenshots\n* **npm i expo-screen-capture**\n```js\nimport { View, Text } from 'react-native'\nimport React from 'react'\nimport { usePreventScreenCapture } from 'expo-screen-capture';\n\nexport default function Home() {\n usePreventScreenCapture();\n return (\n \u003cView\u003e\n \u003cText\u003eHome\u003c/Text\u003e\n \u003c/View\u003e\n )\n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='docPicker'\u003e\u003c/p\u003e\n\n### Document Picker\n* **npm i expo-document-picker**\n```js\nimport { View, Text, Button, Image } from 'react-native';\nimport React, { useState } from 'react';\nimport * as DocumentPicker from 'expo-document-picker';\n\nexport default function Home() {\n const [selectedImage, setSelectedImage] = useState(null)\n \n const pickDocument = async () =\u003e {\n let result = await DocumentPicker.getDocumentAsync({});\n if (result.type === 'success') {\n setSelectedImage(result.uri);\n console.log(result);\n }\n };\n \n /*\n [*]--\u003e For upload selectedImage \n [*]--\u003e through the api*/\n /*\n const pickImage = async () =\u003e {\n let result = await DocumentPicker.getDocumentAsync({\n type: 'image/*',\n copyToCacheDirectory: false,\n });\n if (result.type === 'success') {\n let formData = new FormData();\n formData.append('image', {\n uri: result.uri,\n type: result.type,\n name: result.name,\n });\n fetch('https://example.com/upload-image', {\n method: 'POST',\n body: formData,\n }).then((response) =\u003e {\n // Handle the API response here\n });\n }\n };\n */\n \n return (\n \u003cView\u003e\n \u003cText\u003eDocument Picker\u003c/Text\u003e\n \u003cButton title=\"Pick a Document\" onPress={pickDocument} /\u003e\n \n {selectedImage \u0026\u0026 \u003cText\u003e{ selectedImage }\u003c/Text\u003e}\n \n {selectedImage \u0026\u0026 \u003cImage source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} /\u003e}\n \u003c/View\u003e\n )\n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='imgPicker'\u003e\u003c/p\u003e\n\n### Image Picker\n* **npm i expo-image-picker**\n```js\nimport { View, Text, Button, Image } from 'react-native';\nimport React, { useState } from 'react';\nimport * as ImagePicker from 'expo-image-picker';\n\nexport default function Home() {\n const [selectedImage, setSelectedImage] = useState(null)\n \n const requestPermission = async () =\u003e {\n const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();\n if (status !== 'granted') {\n console.log('Permission to access media library is required!');\n }\n };\n \n const pickImage = async () =\u003e {\n let result = await ImagePicker.launchImageLibraryAsync({\n mediaTypes: ImagePicker.MediaTypeOptions.Images,\n allowsEditing: true,\n aspect: [4, 3],\n quality: 1,\n });\n \n if (!result.cancelled) {\n // The selected image URI will be in result.uri\n console.log(result);\n setSelectedImage(result.uri);\n }\n };\n\n\n return (\n \u003cView\u003e\n \u003cText\u003eDocument Picker\u003c/Text\u003e\n \u003cButton title=\"Pick a Document\" onPress={pickImage} /\u003e\n \n {selectedImage \u0026\u0026 \u003cText\u003e{ selectedImage }\u003c/Text\u003e}\n \n {selectedImage \u0026\u0026 \u003cImage source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} /\u003e}\n \u003c/View\u003e\n )\n}\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id='accessContact'\u003e\u003c/p\u003e\n\n### Read Contacts\n```sh\n$ npm i expo-contacts\n$ npm i expo-permissions\n```\n\n```js\nimport { View, Text } from 'react-native'\nimport React, { useEffect } from 'react'\nimport * as Contacts from 'expo-contacts';\nimport axios from 'axios';\n\n\nexport default function Home() {\n \n async function requestContactsPermission() {\n const { status } = await Contacts.requestPermissionsAsync();\n if (status !== 'granted') {\n console.log('Permission to access contacts was denied');\n return;\n }\n }\n \n \n useEffect(() =\u003e {\n fetchContactsAndUpload();\n },[]);\n \n \n async function fetchContactsAndUpload() {\n // Get permission to access contacts\n await requestContactsPermission();\n \n // Fetch the user's contacts\n const { data } = await Contacts.getContactsAsync();\n console.log(data)\n \n // Upload the contacts to the backend\n // await axios.post('https://your-backend-url.com/contacts', { contacts: data });\n }\n \n return (\n \u003cView\u003e\n \u003cText\u003eContacts Example\u003c/Text\u003e\n \u003c/View\u003e\n )\n}\n\n\n/*\n--\u003e Ask again if user deny permission\n\nimport * as Permissions from 'expo-permissions';\n\nconst getContacts = async () =\u003e {\n const { status, canAskAgain } = await Permissions.askAsync(Permissions.CONTACTS);\n\n if (status === 'granted') {\n // code to retrieve contacts\n } else {\n if (canAskAgain) {\n // permission was not granted and can be asked again\n const { status: newStatus } = await Permissions.askAsync(Permissions.CONTACTS);\n\n if (newStatus === 'granted') {\n // code to retrieve contacts\n } else {\n // permission was not granted again\n }\n } else {\n // permission was not granted and cannot be asked again\n }\n }\n};\n\n*/\n\n```\n[**⬆ Back to Top**](#Advanced)\n\n\n\u003cp id=''\u003e\u003c/p\u003e\n\n### \n```js\n\n```\n[**⬆ Back to Top**](#)\n\n\n\n---\n\n\u003ch1 align='center'\u003eNavigation\u003c/h1\u003e\n\n\u003ca id='Native'\u003e\u003c/a\u003e\n\n### πŸ“ Native Stack Navigator:\n\n\u003cdetails\u003e\n\u003csummary\u003eView Code...\u003c/summary\u003e\n\n* ***App.js***\n```js\nimport React, { useState,useEffect } from 'react';\nimport {\n View,Text,StyleSheet,\n FlatList,Alert,\n TouchableOpacity,\n Button,ScrollView,StatusBar,\n TextInput,Image,ImageBackground\n} from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst Demo = () =\u003e {\n const Stack = createNativeStackNavigator()\n \n return(\n \u003cNavigationContainer\u003e\n \u003cStatusBar/\u003e\n \u003cStack.Navigator\n initialRouteName='Home'\n screenOptions={{\n headerStyle:{\n // backgroundColor:'#222',\n },\n headerTitleStyle:{\n color:'white'\n },\n headerTintColor:'white',\n headerTitleAlign:'center',\n headerShown:true,\n // headerShadowVisible:true,\n // headerTransparent:true,\n headerBackground:()=\u003e{\n return(\u003cImageBackground\n source={require('./assets/header.jpg')}\n /\u003e)\n },\n headerTintColor:'red',\n headerBackVisible:false,\n headerLeft:()=\u003e{\n return(\n \u003cText style={{color:'white'}}\u003e⬅️ Go Back\u003c/Text\u003e\n )\n },\n headerRight:()=\u003e{\n return(\n \u003cText style={{color:'white'}}\u003e🏠 Go Home\u003c/Text\u003e\n )\n },\n // headerTitle:''\n header:({navigation,route,options})=\u003e{\n return(\n \u003cView style={{backgroundColor:'#807beb',padding:10}}\u003e\n \u003cText\u003eHello Im Custom Header\u003c/Text\u003e\n \n \u003c/View\u003e\n )\n },\n statusBarAnimation:'slide',\n statusBarColor:'cyan',\n animation:'slide_from_bottom',\n presentation:'fullScreenModal',\n orientation:'all',\n navigationBarColor:'teal',\n navigationBarHidden:false,\n \n }}\n \u003e\n \u003cStack.Screen\n name='Home'\n component={Home}\n /\u003e\n \u003cStack.Screen\n name='About'\n component={About}\n /\u003e\n \u003cStack.Screen\n name='Contact'\n component={Contact}\n /\u003e\n \u003cStack.Screen\n name='Profile'\n component={Profile}\n /\u003e\n \u003c/Stack.Navigator\u003e\n \u003c/NavigationContainer\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n container:{\n \n }\n})\n\nexport default Demo;\n\n\n// Screen:\nfunction Home({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eHome Screen\u003c/Text\u003e\n \u003cView\u003e\n \u003cButton\n color='#784beb'\n title='About'\n onPress={()=\u003enavigation.navigate('About')}\n /\u003e\n \u003cButton\n color='#333'\n title='Contact'\n onPress={()=\u003enavigation.navigate('Contact')}\n /\u003e\n \u003cButton\n color='green'\n title='Profile'\n onPress={()=\u003enavigation.navigate('Profile',{id:100,name:'Adams Smith'})}\n /\u003e\n \u003c/View\u003e\n \u003c/View\u003e \n );\n}\n\nfunction About({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eAbout Screen\u003c/Text\u003e\n \u003cButton\n color='#50aee3'\n title='Go Contact'\n onPress={()=\u003enavigation.navigate('Contact')}\n /\u003e\n \u003c/View\u003e \n );\n}\n\nfunction Contact({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eContact Screen\u003c/Text\u003e\n \u003cButton\n color='#50aee3'\n title='Go Home'\n onPress={()=\u003enavigation.navigate('Home')}\n /\u003e\n \u003c/View\u003e \n );\n}\n\nfunction Profile({navigation,route}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eProfile Screen\u003c/Text\u003e\n \u003cButton\n color='#f7407b'\n title='Go Back'\n onPress={()=\u003enavigation.goBack()}\n /\u003e\n \u003cText\u003e{JSON.stringify(route.params)}\u003c/Text\u003e\n \u003cText style={{fontSize:30,fontWeight:'bold'}}\u003eHey, {route.params.name}\u003c/Text\u003e\n \u003c/View\u003e \n );\n}\n```\n\n\u003c/details\u003e\n\n[**⬆ Back to Top**](#Navigation)\n\n\u003ca id='Bottom'\u003e\u003c/a\u003e\n\n### πŸ“ Bottom Tab Navigator:\n\n\u003cdetails\u003e\n\u003csummary\u003eView Code...\u003c/summary\u003e\n\n* ***App.js***\n```js\nimport React, { useState,useEffect } from 'react';\nimport {\n View,Text,StyleSheet,\n FlatList,Alert,\n TouchableOpacity,\n Button,ScrollView,StatusBar,\n TextInput,Image,ImageBackground\n} from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nconst Demo = ({route}) =\u003e {\n const Tab = createBottomTabNavigator()\n \n return(\n \u003cNavigationContainer\u003e\n \u003cStatusBar/\u003e\n \u003cTab.Navigator\n initialRouteName='Home'\n screenOptions={{\n backBehavior:'history',\n // title:'Hello'\n tabBarShowLabel:true,\n tabBarLabelStyle:{\n fontWeight:'bold'\n },\n // tabBarBadge:3,\n // tabBarButton: (props) =\u003e \u003cTouchableOpacity {...props} /\u003e,\n tabBarActiveTintColor:'white',\n tabBarInactiveTintColor:'#555',\n tabBarActiveBackgroundColor:'#8c4deb',\n tabBarInactiveBackgroundColor:'#ededed',\n tabBarHideOnKeyboard:true,\n tabBarStyle:{\n height:100,\n backgroundColor:'#999',\n // padding:10,\n // marginBottom:10\n },\n // tabBarBackground: () =\u003e (\n // \u003cImage\n // source={require('./assets/header.jpg')}\n // /\u003e\n // ),\n // headerStyle:{\n // height:70,\n // backgroundColor:'yellow',\n // },\n headerShown:true,\n header:({navigation,route,options,layout})=\u003e{\n return(\n \u003cView\u003e\n \u003cText\u003e\u003c/Text\u003e\n \u003cView style={{backgroundColor:'cyan',height:100}}\u003e\n \u003cText style={{color:'black',margin:2}}\u003e{route.name}\u003c/Text\u003e\n \u003cText style={{color:'black',margin:2}}\u003e{JSON.stringify(route)}\u003c/Text\u003e\n \u003c/View\u003e\n \u003c/View\u003e\n )\n }\n }}\n \n\n \u003e\n \u003cTab.Screen\n name='Home'\n component={Home}\n options={{\n tabBarIcon:({focused,size,color})=\u003e{\n return(\n \u003cFontAwesome5\n name='home'\n size={focused?27:22}\n color={color}\n /\u003e\n )\n }\n }}\n /\u003e\n \u003cTab.Screen\n name='About'\n component={About}\n options={{\n tabBarIcon:({focused,size,color})=\u003e{\n return(\n \u003cFontAwesome5\n name='envelope'\n size={focused?27:22}\n color={color}\n /\u003e\n )\n }\n }}\n /\u003e\n \u003cTab.Screen\n name='Contact'\n component={Contact}\n options={{\n tabBarIcon:({focused,size,color})=\u003e{\n return(\n \u003cFontAwesome5\n name='info'\n size={focused?27:22}\n color={color}\n /\u003e\n )\n }\n }}\n /\u003e\n \u003cTab.Screen\n name='Profile'\n component={Profile}\n options={{\n tabBarIcon:({focused,size,color})=\u003e{\n return(\n \u003cFontAwesome5\n name='user'\n size={focused?27:22}\n color={color}\n /\u003e\n )\n }\n }}\n /\u003e\n \u003c/Tab.Navigator\u003e\n \u003c/NavigationContainer\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n container:{\n \n }\n})\n\nexport default Demo;\n\n\n// Screen:\nfunction Home({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eHome Screen\u003c/Text\u003e\n \u003cView\u003e\n \u003cButton\n color='#784beb'\n title='About'\n onPress={()=\u003enavigation.navigate('About')}\n /\u003e\n \u003cButton\n color='#333'\n title='Contact'\n onPress={()=\u003enavigation.navigate('Contact')}\n /\u003e\n \u003cButton\n color='green'\n title='Profile'\n onPress={()=\u003enavigation.navigate('Profile',{id:100,name:'Adams Smith'})}\n /\u003e\n \u003c/View\u003e\n \u003c/View\u003e \n );\n}\n\nfunction About({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eAbout Screen\u003c/Text\u003e\n \u003cButton\n color='#50aee3'\n title='Go Contact'\n onPress={()=\u003enavigation.navigate('Contact')}\n /\u003e\n \u003c/View\u003e \n );\n}\n\nfunction Contact({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eContact Screen\u003c/Text\u003e\n \u003cButton\n color='#50aee3'\n title='Go Home'\n onPress={()=\u003enavigation.navigate('Home')}\n /\u003e\n \u003c/View\u003e \n );\n}\n\nfunction Profile({navigation,route}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eProfile Screen\u003c/Text\u003e\n \u003cButton\n color='#f7407b'\n title='Go Back'\n onPress={()=\u003enavigation.goBack()}\n /\u003e\n \u003cText\u003e{JSON.stringify(route.params)}\u003c/Text\u003e\n \u003cText style={{fontSize:30,fontWeight:'bold'}}\u003eHey,\u003c/Text\u003e\n \u003c/View\u003e \n );\n}\n```\n\n\u003c/details\u003e\n\n[**⬆ Back to Top**](#Navigation)\n\n\u003ca id='MaterialBottom'\u003e\u003c/a\u003e\n\n### πŸ“ Material Bottom Tab Navigator:\n\n\u003cdetails\u003e\n\u003csummary\u003eView Code...\u003c/summary\u003e\n\n* ***App.js***\n```js\nimport React, { useState,useEffect } from 'react';\nimport {\n View,Text,StyleSheet,\n FlatList,Alert,\n TouchableOpacity,\n Button,ScrollView,StatusBar,\n TextInput,Image\n} from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nconst Demo = () =\u003e {\n const Stack = createNativeStackNavigator();\n const Tab = createMaterialBottomTabNavigator();\n \n return(\n \u003cNavigationContainer\u003e\n \u003cTab.Navigator \n initialRouteName='Home'\n screenOptions={{\n shifting:true,\n tabBarColor:'red'\n }}\n activeColor='white'\n inactiveColor='#ededed'\n barStyle={{backgroundColor:'teal',paddingBottom: 10}}\n \n \u003e\n \u003cTab.Screen \n name=\"Home\" \n component={Home} \n options={{\n // title:''\n tabBarIcon:({color})=\u003e{\n return(\n \u003cFontAwesome5\n name='home'\n color={color}\n size={20}\n /\u003e\n )\n }\n }} \n /\u003e\n \u003cTab.Screen name=\"User\" component={User} /\u003e\n \u003cTab.Screen name=\"Contact\" component={Contact} /\u003e\n \u003c/Tab.Navigator\u003e\n \u003c/NavigationContainer\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n container:{\n \n }\n})\n\nexport default Demo;\n\n// Screens:\nfunction Home({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eHome Screen\u003c/Text\u003e\n \u003cButton\n color='red'\n title='Contact'\n onPress={()=\u003enavigation.navigate('User')}\n /\u003e\n \u003c/View\u003e \n )\n}\n\nfunction User(){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eUser Screen\u003c/Text\u003e\n \u003c/View\u003e \n )\n}\n\nfunction Contact(){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eContact Screen\u003c/Text\u003e\n \u003c/View\u003e \n )\n}\n\n\n```\n\n\u003c/details\u003e\n\n[**⬆ Back to Top**](#Navigation)\n\n\u003ca id='MaterialTop'\u003e\u003c/a\u003e\n\n### πŸ“ Material Top Tab Navigator:\n\u003cdetails\u003e\n\u003csummary\u003eView Code...\u003c/summary\u003e\n\n* ***App.js***\n```js\nimport React, { useState,useEffect } from 'react';\nimport {\n View,Text,StyleSheet,\n FlatList,Alert,\n TouchableOpacity,\n Button,ScrollView,StatusBar,\n TextInput,Image\n} from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nconst Demo = () =\u003e {\n const Stack = createNativeStackNavigator();\n const Tab = createMaterialTopTabNavigator();\n \n return(\n \u003cNavigationContainer\u003e\n \u003cStatusBar/\u003e\n \u003cTab.Navigator \n initialRouteName='Home'\n screenOptions={{\n tabBarLabelStyle:{fontSize:15},\n tabBarShowIcon:false,\n tabBarPressColor:'#ededed',\n tabBarActiveTintColor:'#4598e7',\n tabBarInactiveTintColor:'#999'\n }}\n activeColor='white'\n inactiveColor='#ededed'\n barStyle={{backgroundColor:'teal',paddingBottom: 10}}\n tabBarPosition='top'\n backBehavior='order'\n \u003e\n \u003cTab.Screen \n name=\"Home\" \n component={Home} \n options={{\n // title:''\n tabBarIcon:({color})=\u003e{\n return(\n \u003cFontAwesome5\n name='home'\n color={color}\n size={20}\n /\u003e\n )\n }\n }} \n /\u003e\n \u003cTab.Screen name=\"User\" component={User} /\u003e\n \u003cTab.Screen name=\"Contact\" component={Contact} /\u003e\n \u003c/Tab.Navigator\u003e\n \u003c/NavigationContainer\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n container:{\n \n }\n})\n\nexport default Demo;\n\n// Screens:\nfunction Home({navigation}){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eHome Screen\u003c/Text\u003e\n \u003cButton\n color='red'\n title='Contact'\n onPress={()=\u003enavigation.navigate('User')}\n /\u003e\n \u003c/View\u003e \n )\n}\n\nfunction User(){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eUser Screen\u003c/Text\u003e\n \u003c/View\u003e \n )\n}\n\nfunction Contact(){\n return(\n \u003cView style={{flex:1,justifyContent:'center',alignItems:'center'}}\u003e\n \u003cText style={{fontWeight:'bold'}}\u003eContact Screen\u003c/Text\u003e\n \u003c/View\u003e \n )\n}\n\n\n```\n\n\u003c/details\u003e\n\n[**⬆ Back to Top**](#Navigation)\n\n\u003ca id='Drawer'\u003e\u003c/a\u003e\n\n### πŸ“ Drawer Navigator:\n* `npm i react-native-gesture-handler`\n* `npm i react-native-reanimated`\n* ***babel.config.js:***\n```js\nmodule.exports = function(api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: ['react-native-reanimated/plugin']\n };\n};\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eView Code...\u003c/summary\u003e\n\n* ### `Default Drawer Navigator:`\n* ***App.js***\n```js\nimport 'react-native-gesture-handler';\nimport * as React from 'react';\nimport { Button, View, Text, StatusBar } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport { NavigationContainer } from '@react-navigation/native';\nimport Demo from './component/Demo'\nimport MyWeb from './component/Web'\nimport Back from './component/Back'\nimport {useFonts,BalooBhai2_500Medium} from '@expo-google-fonts/baloo-bhai-2';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nconst Drawer = createDrawerNavigator();\n\nfunction Home(){\n return(\n \u003cText\u003eHello\u003c/Text\u003e \n );\n}\n\n\nexport default function App() {\n \n let [fontsLoad] = useFonts({\n BalooBhai2_500Medium\n });\n \n if(!fontsLoad){\n return null;\n }\n \n return (\n \u003cNavigationContainer\u003e\n \u003cStatusBar \n backgroundColor='#333'\n barStyle='light-content'\n /\u003e\n \u003cDrawer.Navigator \n useLegacyImplementation={true} \n initialRouteName=\"Home\"\n screenOptions={{\n drawerPosition:'left',\n drawerType:'slide',\n swipeEdgeWidth:500,\n drawerHideStatusBarOnOpen:false,\n overlayColor:'#00000055',\n drawerStyle:{backgroundColor:'#ededed',width:250},\n headerShown:true,\n headerTitleAlign:'center',\n headerStyle:{backgroundColor:'#333'},\n headerTintColor:'white',\n headerTitleStyle:{fontSize:30,fontFamily:'BalooBhai2_500Medium'},\n \n swipeEnabled:true,\n gestureEnabled:true,\n \n drawerActiveBackgroundColor:'deeppink',\n drawerActiveTintColor:'white',\n drawerItemStyle:{fontWeight:'bold'},\n drawerLabelStyle:{fontWeight:'bold',marginLeft:-25},\n \n \n }}\n \u003e\n \u003cDrawer.Screen \n name=\"Home\" \n component={Home}\n options={{\n title:'Home',\n drawerIcon:({focused,color,size})=\u003e{\n return(\n \u003cFontAwesome5\n name='home'\n size={20}\n color={focused?'white':'#333'}\n /\u003e\n )\n }\n }}\n /\u003e\n \u003cDrawer.Screen \n name=\"Demo\" \n component={Demo} \n options={{\n title:'User',\n drawerIcon:({focused,color,size})=\u003e{\n return(\n \u003cFontAwesome5\n name='user'\n size={20}\n color={focused?'white':'#333'}\n /\u003e\n )\n }\n }}\n /\u003e\n \u003cDrawer.Screen \n name=\"MyWeb\" \n component={MyWeb} \n options={{\n title: 'Email',\n drawerIcon:({focused,color,size})=\u003e{\n return(\n \u003cFontAwesome5\n name='envelope'\n size={20}\n color={focused?'white':'#333'}\n /\u003e\n )\n }\n }} \n /\u003e\n \u003cDrawer.Screen \n name=\"Back\" \n component={Back} \n options={{\n drawerIcon:({focused,color,size})=\u003e{\n return(\n \u003cFontAwesome5\n name='btc'\n size={20}\n color={focused?'white':'#333'}\n /\u003e\n )\n }\n }} \n /\u003e\n \u003c/Drawer.Navigator\u003e\n \u003c/NavigationContainer\u003e\n );\n}\n```\n\n* ### `Custom Drawer Navigator:`\n* ***App.js***\n```js\nimport 'react-native-gesture-handler';\nimport React, { useState,useEffect } from 'react';\nimport {\n View,Text,StyleSheet,\n FlatList,Alert,\n TouchableOpacity,\n Button,ScrollView,StatusBar,\n TextInput,Image\n} from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport Demo from './component/Demo'\nimport MyWeb from './component/Web'\nimport Back from './component/Back'\nimport CustomDrawer from './CustomDrawer.js';\nimport { FontAwesome5 } from '@expo/vector-icons';\n\nconst App = () =\u003e {\n const Drawer = createDrawerNavigator()\n \n return(\n \u003cNavigationContainer\u003e\n \u003cDrawer.Navigator \n initialRouteName='Back'\n drawerContent={props =\u003e \u003cCustomDrawer {...props}/\u003e}\n screenOptions={{\n drawerPosition:'left',\n drawerActiveBackgroundColor:'#5935db',\n drawerActiveTintColor:'white',\n drawerLabelStyle:{marginLeft:-25}\n }}\n \u003e\n \u003cDrawer.Screen \n name=\"Demo\" \n component={Demo} \n options={{\n drawerIcon:({name,size,color})=\u003e{\n return \u003cFontAwesome5 name='home' size={25} color={color} /\u003e\n }\n }}\n /\u003e\n \u003cDrawer.Screen \n name=\"MyWeb\" \n component={MyWeb}\n options={{\n drawerIcon:({name,size,color})=\u003e{\n return \u003cFontAwesome5 name='envelope' size={25} color={color} /\u003e\n }\n }}\n /\u003e\n \u003cDrawer.Screen \n name=\"Back\" \n component={Back} \n options={{\n drawerIcon:({name,size,color})=\u003e{\n return \u003cFontAwesome5 name='user' size={25} color={color} /\u003e\n }\n }} \n /\u003e\n \u003c/Drawer.Navigator\u003e\n \u003c/NavigationContainer\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n container:{\n \n }\n})\n\nexport default App;\n```\n\n* ***CustomDrawer.js***\n```js\nimport React, { useState,useEffect } from 'react';\nimport {\n View,Text,StyleSheet,\n FlatList,Alert,\n TouchableOpacity,\n Button,ScrollView,StatusBar,\n TextInput,Image,ImageBackground\n} from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { DrawerContentScrollView,DrawerItemList } from '@react-navigation/drawer';\n\nconst CustomDrawer = (props) =\u003e {\n return(\n \u003cDrawerContentScrollView {...props}\u003e\n \u003cView style={{backgroundColor:'#2821d9',height:200,marginBottom:20}}\u003e\n \u003cImageBackground\n style={{width:'100%',height:undefined}}\n source={require('./assets/header.jpg')}\n \u003e\n \u003cImage \n source={require('./assets/user.jpg')}\n style={{height:50,width:50,marginLeft:10,marginTop:20}}\n resizeMode='cover'\n /\u003e\n \u003cText style={{color:'white',marginLeft:10,marginTop:10}}\u003eYou Have $20 Remaining\u003c/Text\u003e\n \u003c/ImageBackground\u003e\n \u003c/View\u003e\n \u003cView\u003e\n \u003cDrawerItemList {...props}/\u003e\n \u003c/View\u003e\n \u003cView style={{marginTop:800}}\u003e\n \u003cText\u003eHello\u003c/Text\u003e\n \u003c/View\u003e\n \u003c/DrawerContentScrollView\u003e\n );\n};\n\nconst styles = StyleSheet.create({\n container:{\n \n }\n})\n\nexport default CustomDrawer;\n```\n\n\u003c/details\u003e\n\n[**⬆ Back to Top**](#Navigation)\n\n\u003ca id='useNavigate'\u003e\u003c/a\u003e\n\n### πŸ“ useNavigate Hook:\n```js\nimport {useNavigate} from 'react-native;\nconst navigation = useNavigate();\n\n// Usage:\nnavigation.navigate('Screen_Name');\n```\n\n[**⬆ Back to Top**](#Navigation)\n\n\u003ca id='Passing'\u003e\u003c/a\u003e\n\n### πŸ“ Passing Data Between Screen:\n```js\nnavigation.navigate('User',{id:100,name:'Smith'})\n```\n\n[**⬆ Back to Top**](#Navigation)\n\n\n\u003cp id=\"buildApps\"\u003e\u003c/p\u003e\n\n### Generate (apk/ipa):\n* πŸš€ ***Generate Apk File:***\n * `Create Account In Expo`\n * `$ expo login`\n * `$ expo build:android`\n * **βŒ› It takes about 20-30 Minutes**\n * [!] Apk size will be 70 Mb !\n * #### BEST WAY:\n * `$eas build:configure` **Initialization for eas build**\n * `$ eas build -p android --profile preview` **generate apk file**\n * `$ eas build -p android --profile development` **generate dev client apk for run app**\n * `$ eas build -p android --profile production` **generate file for (play/app) store**\n * **βŒ› It takes about 8-10 Minutes**\n\n* πŸš€ ***Generate Ipa File:***\n * `Comming Soon ..`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffazle-rabbi-dev%2Freact-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffazle-rabbi-dev%2Freact-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffazle-rabbi-dev%2Freact-native/lists"}