React-native - RIP Tutorial
react-native#reactnative
Table of ContentsAbout1Chapter 1: Getting started with react-native2Remarks2Examples2Setup for Mac2Setup for Windows14Setup for Linux (Ubuntu)15Start the terminal and run the following commands to install nodeJS:15If node command is unavailable15Alternatives NodeJS instalations:16check if you have the current version16Run the npm to install the react-native16Android SDK or Android Studio16Android SDK e ENV16Example app init17Obs: Always check if the version on android/app/build.gradle is the same as the Build Tool17Open Android AVD to set up a virtual android. Execute the command line:18Chapter 2: Android - Hardware Back ButtonExamples1919Detect Hardware back button presses in Android19Example of BackAndroid along with Navigator19Example of Hardware back button detection using BackHandler20Hardware back button handling using BackHandler and Navigation Properties (without using d20Chapter 3: Animation APIExamplesAnimate an ImageChapter 4: Command Line InstructionsExamples2222222323Check version installed23Upgrade existing project to latest RN version23
Logging23Initialize and getting started with React Native project23Start React Native Packager24Add android project for your app24Chapter 5: ComponentsExamples2525Basic Component25Stateful Component25Stateless Component25Chapter 6: Create a shareable APK for android27Introduction27Remarks27Examples27Create a key to sign the APK27Once the key is generated, use it to generate the installable build:27Generate the build using gradle27Upload or share the generated APK27Chapter 7: Custom FontsExamples2929Steps to use custom fonts in React Native (Android)29Steps to use custom fonts in React Native (iOS)29Custom fonts for both Android and IOS30Android31iOS31Chapter 8: Debugging33Syntax33Examples33Start Remote JS Debugging in Android33Using console.log()33Chapter 9: ESLint in react-native34Introduction34Examples34
How to startChapter 10: Hello WorldExamples343535Editing index.ios.js or index.android.js35Hello world!35Chapter 11: HTTP TTP with the fetch API36Networking with XMLHttpRequest37Using Promises with the fetch API and Redux37Web Socket with Socket.io38Http with axios39Chapter 12: Images41Examples41Image Module41Image Example41Conditional Image Source41Using variable for image path41To fit an Image42Chapter 13: Integration with Firebase for Authentication43Introduction43Examples43React Native - ListView with Firebase43Authentication In React Native Using Firebase44Chapter 14: t axis47
Alignment49Flex size49Chapter 15: Linking Native API50Introduction50Examples50Outgoing LinksURI SchemesIncomming LinksChapter 16: ListViewExamplesSimple ExampleChapter 17: les53Modal Basic Example53Transparent Modal Example54Chapter 18: Multiple props renderingExamples5656render multiple variables56Chapter 19: Native Modules57ExamplesCreate your Native Module (IOS)5757Introduction57Example57Chapter 20: Navigator Best Practices59Examples59Navigator59Use react-navigation for navigation in react native apps61react-native Navigation with react-native-router-flux62Chapter 21: Navigator with buttons injected from pages64
Examples64Introduction64Full commented example64Chapter 22: Platform Module68ExamplesFind the OS Type/VersionChapter 23: Props686869Introduction69Examples69What are props?69Use of props69PropTypes70Default Props71Chapter 24: 2Push Notification Simple Setup72Navigating to scene from Notification74Chapter 25: RefreshControl with ListView77Remarks77Examples77Refresh Control77onRefresh function Example77Refresh Control with ListView Full Example77Chapter 26: Render Best Practises80Introduction80Examples80Functions in JSXChapter 27: RoutingIntroduction808282
ExamplesNavigator componentChapter 28: Run an app on device (Android Version)828283Remarks83Examples83Running an app on Android Device.Chapter 29: State8384Syntax84Examples84setState84Full ExampleInitialize StateChapter 30: es87Styling using inline styles87Styling using a stylesheet87Adding multiple styles88Conditional Styling88Chapter 31: Unit Testing90Introduction90Examples90Unit testing with jest90Unit Test In React Native Using Jest91Chapter 32: WebView92Introduction92Examples92Simple component using webviewCredits9293
AboutYou can share this PDF with anyone you feel could benefit from it, downloaded the latest versionfrom: react-nativeIt is an unofficial and free react-native ebook created for educational purposes. All the content isextracted from Stack Overflow Documentation, which is written by many hardworking individuals atStack Overflow. It is neither affiliated with Stack Overflow nor official react-native.The content is released under Creative Commons BY-SA, and the list of contributors to eachchapter are provided in the credits section at the end of this book. Images may be copyright oftheir respective owners unless otherwise specified. All trademarks and registered trademarks arethe property of their respective company owners.Use the content presented in this book at your own risk; it is not guaranteed to be correct noraccurate, please send your feedback and corrections to info@zzzprojects.comhttps://riptutorial.com/1
Chapter 1: Getting started with react-nativeRemarksReact Native lets you build mobile apps using only JavaScript. It uses the same design as React,letting you compose a rich mobile UI from declarative components.With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. Youbuild a real mobile app that's indistinguishable from an app built using Objective-C or Java. ReactNative uses the same fundamental UI building blocks as regular iOS and Android apps. You justput those building blocks together using JavaScript and React.It is open-source and maintained by Facebook. Website Documentation GitHub RepositorySource: React Native websiteExamplesSetup for MacInstalling package manager Homebrew brewPaste that at a Terminal prompt./usr/bin/ruby -e " (curl stall/master/install)"Installing Xcode IDEDownload it using link below or find it on Mac App Storehttps://developer.apple.com/download/NOTE: If you have Xcode-beta.app installed along with production version ofXcode.app, make sure you are using production version of xcodebuild tool. You canset it with:sudo xcode-select -switch ing Android environment Git git*If you have installed XCode, Git is already installed, otherwise run the followinghttps://riptutorial.com/2
brew install git Latest JDK Android StudioChoose a Custom installationhttps://riptutorial.com/3
https://riptutorial.com/4
Choose both Performance and Android Virtual Devicehttps://riptutorial.com/5
https://riptutorial.com/6
After installation, choose Configure - SDK Manager from the Android Studio welcomewindow.https://riptutorial.com/7
https://riptutorial.com/8
In the SDK Platforms window, choose Show Package Details and under Android 6.0(Marshmallow), make sure that Google APIs, Intel x86 Atom System Image, Intel x86Atom 64 System Image, and Google APIs Intel x86 Atom 64 System Image are checked.https://riptutorial.com/9
https://riptutorial.com/10
In the SDK Tools window, choose Show Package Details and under Android SDK BuildTools, make sure that Android SDK Build-Tools 23.0.1 is selected.https://riptutorial.com/11
https://riptutorial.com/12
Environment Variable ANDROID HOMEEnsure the ANDROID HOME environment variable points to your existing Android SDK. Todo that, add this to your /.bashrc, /.bash profile (or whatever your shell uses) and re-openyour terminal:If you installed the SDK without Android Studio, then it may be something like:/usr/local/opt/android-sdkexport ANDROID HOME /Library/Android/sdkDependencies for MacYou will need Xcode for iOS and Android Studio for android, node.js, the React Native commandline tools, and Watchman.We recommend installing node and watchman via Homebrew.brew install nodebrew install watchmanWatchman is a tool by Facebook for watching changes in the filesystem. It is highlyrecommended you install it for better performance. It is optional.Node comes with npm, which lets you install the React Native command line interface.npm install -g react-native-cliIf you get a permission error, try with sudo:sudo npm install -g react-native-cli.For iOS the easiest way to install Xcode is via the Mac App Store. And for android download andinstall Android Studio.If you plan to make changes in Java code, we recommend Gradle Daemon which speeds up thebuild.Testing your React Native InstallationUse the React Native command line tools to generate a new React Native project called"AwesomeProject", then run react-native run-ios inside the newly created folder.react-native init AwesomeProjectcd AwesomeProjectreact-native run-iosYou should see your new app running in the iOS Simulator shortly. react-native run-ios is just oneway to run your app - you can also run it directly from within Xcode or Nuclide.https://riptutorial.com/13
Modifying your appNow that you have successfully run the app, let's modify it. Open index.ios.js or index.android.js in your text editor of choice and edit some lines. Hit Command R in your iOS Simulator to reload the app and see your change! That's it!Congratulations! You've successfully run and modified your first React Native app.source: Getting Started - React-NativeSetup for WindowsNote: You cannot develop react-native apps for iOS on Windows, only react-native android apps.The official setup docs for react-native on windows can be found here. If you need more detailsthere is a granular guide here.Tools/Environment Windows 10command line tool (eg Powershell or windows command line)Chocolatey (steps to setup via PowerShell)The JDK (version 8)Android StudioAn Intel machine with Virtualization technology enabled for HAXM (optional, only needed ifyou want to use an emulator)1) Setup your machine for react native developmentStart the command line as an administrator run the following commands:choco install nodejs.installchoco install python2Restart command line as an administrator so you can run npmnpm install -g react-native-cliAfter running the last command copy the directory that react-native was installed in. You will needthis for Step 4. I tried this on two computers in one case it was: C:\Program Files (x86)\Nodist\vx64\6.2.2. In the other it was: C:\Users\admin\AppData\Roaming\npm2) Set your Environment VariablesA Step by Step guide with images can be found here for this section.Open the Environment Variables window by navigating to:[Right click] "Start" menu - System - Advanced System Settings - Environment Variableshttps://riptutorial.com/14
In the bottom section find the "Path" System Variable and add the location that react-native wasinstalled to in step 1.If you haven't added an ANDROID HOME environment variable you will have to do that here too.While still in the "Environment Variables" window, add a new System Variable with the name"ANDROID HOME" and value as the path to your android sdk.Then restart the command line as an admin so you can run react-native commands in it.3) Create your project In command line, navigate to the folder you want to place your project andrun the following command:react-native init ProjectName4) Run your project Start an emulator from android studio Navigate to the root directory of yourproject in command line and run it:cd ProjectNamereact-native run-androidYou may run into dependency issues. For example, there may be an error that you do not havethe correct build tools version. To fix this you will have to open the sdk manager in Android Studioand download the build tools from there.Congrats!To refresh the ui you can press the r key twice while in the emulator and running the app. To seedeveloper options you can press ctrl m.Setup for Linux (Ubuntu)1) Setup Node.JSStart the terminal and run the followingcommands to install nodeJS:curl -sL https://deb.nodesource.com/setup 5.x sudo -E bash sudo apt-get install nodejsIf node command is unavailablesudo ln -s /usr/bin/nodejs /usr/bin/nodehttps://riptutorial.com/15
Alternatives NodeJS instalations:curl -sL https://deb.nodesource.com/setup 6.x sudo -E bash sudo apt-get install -y nodejsorcurl -sL https://deb.nodesource.com/setup 7.x sudo -E bash sudo apt-get install -y nodejscheck if you have the current versionnode -vRun the npm to install the react-nativesudo npm install -g react-native-cli2) Setup Javasudo apt-get install lib32stdc 6 lib32z1 openjdk-7-jdk3) Setup Android Studio:Android SDK or Android ndroid SDK e ENVexport ANDROID HOME /YOUR/LOCAL/ANDROID/SDKexport PATH PATH: ANDROID HOME/tools: ANDROID HOME/platform-tools4) Setup emulator:On the terminal run the commandandroidSelect "SDK Platforms" from within the SDK Manager and you should see a blue checkmark nextto "Android 7.0 (Nougat)". In case it is not, click on the checkbox and then "Apply".https://riptutorial.com/16
5) Start a projectExample app initreact-native init ReactNativeDemo && cd ReactNativeDemoObs: Always check if the version on android/app/build.gradle is thesame as the Build Tools downloaded on your android SDKandroid {compileSdkVersion XXbuildToolsVersion "XX.X.X".6) Run the projecthttps://riptutorial.com/17
Open Android AVD to set up a virtual android. Execute thecommand line:android avdFollow the instructions to create a virtual device and start itOpen another terminal and run the command lines:react-native run-androidreact-native startRead Getting started with react-native online: om/18
Chapter 2: Android - Hardware Back ButtonExamplesDetect Hardware back button presses in ress', function() {if (!this.onMainScreen()) {this.goBack();return true;}return false;});Note: this.onMainScreen() and this.goBack() are not built in functions, you also need to implementthose. 0fb31d842c63e8b8dc77ce795fac86e0f712)Example of BackAndroid along with NavigatorThis is an example on how to use React Native's BackAndroid along with the Navigator.registers an event listener to handle the taps on the back button. It checks ifthere is another view in the history stack, and if there is one, it goes back -otherwise it keeps thedefault behaviour.componentWillMountMore information on the BackAndroid docs and the Navigator docs.import React, { Component } from 'react'; // eslint-disable-line no-unused-varsimport {BackAndroid,Navigator,} from 'react-native';import SceneContainer from './Navigation/SceneContainer';import RouteMapper from './Navigation/RouteMapper';export default class AppContainer extends Component {constructor(props) {super(props);this.navigator;}componentWillMount() {BackAndroid.addEventListener('hardwareBackPress', () {if (this.navigator && this.navigator.getCurrentRoutes().length 1) {this.navigator.pop();return true;}https://riptutorial.com/19
return false;});}renderScene(route, navigator) {this.navigator navigator;return ( SceneContainertitle {route.title}route {route}navigator {navigator}onBack {() {if (route.index 0) {navigator.pop();}}}{.this.props} / );}render() {return ( NavigatorinitialRoute { View / }renderScene {this.renderScene.bind(this)}navigationBar { Navigator.NavigationBarstyle {{backgroundColor: 'gray'}}routeMapper {RouteMapper} / } / );}};Example of Hardware back button detection using BackHandlerSince BackAndroid is deprecated. Use BackHandler instead of BackAndroid.import { BackHandler } from .addEventListener('hardwareBackPress',() {if (!this.onMainScreen()) {this.goBack();return true;}return false;});}Hardware back button handling using BackHandler and Navigation Properties(without using deprecated BackAndroid & deprecated Navigator)This example will show you back navigation which is expected generally in most of the flows. Youwill have to add following code to every screen depending on expected behavior. There are 2https://riptutorial.com/20
cases:1. If there are more than 1 screen on stack, device back button will show previous screen.2. If there is only 1 screen on stack, device back button will exit app.Case 1: Show previous screenimport { BackHandler } from 'react-native';constructor(props) {super(props)this.handleBackButtonClick llMount() {BackHandler.addEventListener('hardwareBackPress', ) s', () {this.props.navigation.goBack(null);return true;}Important: Don't forget to bind method in constructor and to remove listener incomponentWillUnmount.Case 2: Exit AppIn this case, no need to handle anything on that screen where you want to exit app.Important: This should be only screen on stack.Read Android - Hardware Back Button online: /21
Chapter 3: Animation APIExamplesAnimate an Imageclass AnimatedImage extends Component {constructor(props){super(props)this.state {logoMarginTop: new timing(this.state.logoMarginTop,{ toValue: 100 }).start()}render () {return ( View Animated.Image source {require('./images/Logo.png')} style {[baseStyles.logo, {marginTop: this.state.logoMarginTop}]} / /View )}}This example is animating the image position by changing the margin.Read Animation API online: imation-apihttps://riptutorial.com/22
Chapter 4: Command Line InstructionsExamplesCheck version installed react-native -vExample Outputreact-native-cli: 0.2.0react-native: n/a - not inside a React Native project directory //Output from differentfolderreact-native: react-native: 0.30.0 // Output from the react native project directoryUpgrade existing project to latest RN versionIn the app folder find package.json and modify the following line to include the latest version, savethe file and close."react-native": "0.32.0"In terminal: npm installFollowed by react-native upgradeLoggingAndroid react-native log-androidiOS react-native log-iosInitialize and getting started with React Native projectTo initializehttps://riptutorial.com/23
react-native init MyAwesomeProjectTo initialize with a specific version of React Nativereact-native init --version "0.36.0" MyAwesomeProjectTo Run for Androidcd MyAwesomeProjectreact-native run-androidTo Run for iOScd MyAwesomeProjectreact-native run-iosStart React Native Packager react-native startOn latest version of React Native, no need to run the packager. It will run automatically.By default this starts the server at port 8081. To specify which port the server is on react-native start --port PORTNUMBERAdd android project for your appIf you either have apps generated with pre-android support or just did that on purpose, you canalways add android project to your app. react-native androidThis will generate android folder and index.android.js inside your app.Read Command Line Instructions online: mmandline-instructionshttps://riptutorial.com/24
Chapter 5: ComponentsExamplesBasic Componentimport React, { Component } from 'react'import { View, Text, AppRegistry } from 'react-native'class Example extends Component {rend
If you plan to make changes in Java code, we recommend Gradle Daemon which speeds up the build. Testing your React Native Installation Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-ios inside the newly created folder. react-native init AwesomeProject cd .
12. Describing Networking in React Native and how to make AJAX network calls in React Native? 13. List down Key Points to integrate React Native in an existing Android mobile application React Native Intermediate Interview Questions 14. How is the entire React Native code processed to show the final output on a mobile screen 15.
11 am - Bernie O'Malley, RIP Kevin O'Brien, RIP 5 pm - Gary Gilliland, RIP Mon. April 19th - 9 am - John Blair, Jr., RIP Tues. April 20th - 9 am - Michael & Gwen LaHair, RIP Wed. April 21st - 9 am - Anthony Dunn Thurs. April 22nd - 9 am - David Acevedo, RIP Fri. April 23rd - 9 am - Edmund Kelly, RIP Sat. April 24th - 9 am - Louis White, RIP
Rip Van Winkle! Rip Van Winkle! NARRATOR: Rip looked all around but could see no one. RIP: Did you hear that, boy? STRANGER: (distantly yelling) Rip Van Winkle! Rip Van Winkle! WOLF: Grrrr. NARRATOR: Wolf bristled up his back, looking down the valley. Then Rip saw a strange figure slowly toiling up the side of
have configured react, redux and react-router., If you haven't, Please do so. Note: While react-router in not a dependency of react-redux, It's very likely that we will using it in our react application for routing and this makes it really easy for us to use react-redux. FILENAME: app.js 'use strict'; import React from 'react';
React-Native Apps JS components render as native ones Learn once, write everywhere 13 Android Android SDKs Native UI JS Runtime React Native 3rd Party Libs NPM Pkgs (e.g., React) Bridge Your App Your App (JS) (Native UI & Modules) iOS iOS SDKs Native UI JS Runtime React Native 3 Party Libs NPM Pkgs (e
React Native apps lack support for the CLI tools that are officially supported for build automation. CONCLUSION Flutter vs. React Native 14 Having worked with both Flutter and React Native, we can say that even though Flutter is a younger framework, it does not lag behind on React Native
stands out with React Native is that most of the other mobile application frameworks uses programming languages like Objective-C, Java and so on. Meanwhile React Native gives the web developer a chance to easily work with native mobile applications. React Native uses all of the technology used for React
ARO37: Wilkhouse: An Archaeological Innvestigation . noted that this 75-year term was a breach of the 1705 entail which limited wadsets on the . Sutherland lands to 19 years and was deemed to be “a mark of exceptional favour” towards Hugh Gordon. Hugh Gordon was succeeded by his son John Gordon of Carrol who in turn died in 1807. He was then succeeded by his son, Joseph Gordon of Carrol .
