React Native Notes for Professionals - GoalKicker.com

1 React NativeNotes for ProfessionalsReact NativeNotes for Programming BooksDisclaimerThis is an uno cial free book created for educational purposes and isnot a liated with o cial React Native group(s) or company(s).All trademarks and registered trademarks arethe property of their respective owners80+ pagesof professional hints and tricksContentsAbout 1 .. Chapter 1: Getting started with React Native 2 .. Section : Setup for Mac 2 .. Section : Setup for Linux (Ubuntu) 8 .. Section : Setup for Windows 10 .. Chapter 2: Hello World 12 .. Section : Editing or 12 .. Section : Hello world! 12 .. Chapter 3: Props 13 .. Section : PropTypes 13 .. Section : What are props? 14 .. Section : Use of props 14 .. Section : Default Props 15 .. Chapter 4: Multiple props rendering 16 .. Section : render multiple variables 16 .. Chapter 5: Modal 17 .. Section : Modal Basic Example 17 .. Section : Transparent Modal Example 18 .. Chapter 6: State 20 .. Section : setState 20.

2 Section : Initialize State 22 .. Chapter 7: Routing 23 .. Section : Navigator component 23 .. Chapter 8: Styling 24 .. Section : Conditional Styling 24 .. Section : Styling using inline styles 24 .. Section : Styling using a stylesheet 24 .. Section : Adding multiple styles 24 .. Chapter 9: Layout 26 .. Section : Flexbox 26 .. Chapter 10: Components 35 .. Section : Basic Component 35 .. Section : Stateful Component 35 .. Section : Stateless Component 35 .. Chapter 11: ListView 37 .. Section : Simple Example 37 .. Chapter 12: RefreshControl with ListView 38 .. Section : Refresh Control with ListView Full Example 38 .. Section : Refresh Control 39 .. Section : onRefresh function Example 39 .. Chapter 13: WebView 41 .. Section : Simple component using webview 41 .. Chapter 14: Command Line Instructions 42 .. Section : Check version installed 42 .. Section : Initialize and getting started with React Native project 42 .. Section : Upgrade existing project to latest RN version 42.

3 Section : Add android project for your app 42 .. Section : Logging 43 .. Section : Start React Native Packager 43 .. Chapter 15: HTTP Requests 44 .. Section : Using Promises with the fetch API and Redux 44 .. Section : HTTP with the fetch API 44 .. Section : Networking with XMLHttpRequest 45 .. Section : WebSockets 45 .. Section : Http with axios 45 .. Section : Web Socket with 47 .. Chapter 16: Platform Module 49 .. Section : Find the OS Type/Version 49 .. Chapter 17: Images 50 .. Section : Image Module 50 .. Section : Image Example 50 .. Section : Conditional Image Source 50 .. Section : Using variable for image path 50 .. Section : To fit an Image 51 .. Chapter 18: Custom Fonts 52 .. Section : Custom fonts for both Android and IOS 52 .. Section : Steps to use custom fonts in React Native (Android) 53 .. Section : Steps to use custom fonts in React Native (iOS) 53 .. Chapter 19: Animation API 56 .. Section : Animate an Image 56 .. Chapter 20: Android - Hardware Back Button 57.

4 Section : Detect Hardware back button presses in Android 57 .. Section : Example of BackAndroid along with Navigator 57 .. Section : Hardware back button handling using BackHandler and Navigation Properties (withoutusing deprecated BackAndroid & deprecated Navigator) 58 .. Section : Example of Hardware back button detection using BackHandler 59 .. Chapter 21: Run an app on device (Android Version) 60 .. Section : Running an app on Android Device 60 .. Chapter 22: Native Modules 61 .. Section : Create your Native Module (IOS) 61 .. Chapter 23: Linking Native API 63 .. Section : Outgoing Links 63 .. Section : Incomming Links 63 .. Chapter 24: ESLint in React Native 65 .. Section : How to start 65 .. Chapter 25: Integration with Firebase for Authentication 66 .. Section : Authentication In React Native Using Firebase 66 .. Section : React Native - ListView with Firebase 66 .. Chapter 26: Navigator Best Practices 69 .. Section : Navigator 69 .. Section : Use React -navigation for navigation in React Native apps 71.

5 Section : React - Native Navigation with React - Native -router-flux 72 .. Chapter 27: Navigator with buttons injected from pages 74 .. Section : Introduction 74 .. Section : Full commented example 74 .. Chapter 28: Create a shareable APK for android 77 .. Section : Create a key to sign the APK 77 .. Section : Once the key is generated, use it to generate the installable build: 77 .. Section : Generate the build using gradle 77 .. Section : Upload or share the generated APK 77 .. Chapter 29: PushNotification 78 .. Section : Push Notification Simple Setup 78 .. Section : Navigating to scene from Notification 80 .. Chapter 30: Render Best Practises 82 .. Section : Functions in JSX 82 .. Chapter 31: Debugging 83 .. Section : Start Remote JS Debugging in Android 83 .. Section : Using () 83 .. Chapter 32: Unit Testing 84 .. Section : Unit Test In React Native Using Jest 84 .. Credits 85 .. You may also like 87 .. React Native Notes for Professionals1 AboutPlease feel free to share this PDF with anyone for free,latest version of this book can be downloaded from: React Native Notes for Professionals book is compiled from Stack OverflowDocumentation, the content is written by the beautiful people at Stack content is released under Creative Commons BY-SA, see credits at the endof this book whom contributed to the various chapters.

6 Images may be copyrightof their respective owners unless otherwise specifiedThis is an unofficial free book created for educational purposes and is notaffiliated with official React Native group(s) or company(s) nor Stack Overflow. Alltrademarks and registered trademarks are the property of their respectivecompany ownersThe information presented in this book is not guaranteed to be correct noraccurate, use at your own riskPlease send feedback and corrections to React Native Notes for Professionals2 Chapter 1: Getting started with ReactNativeSection : Setup for MacInstalling package manager Homebrew brewPaste that at a Terminal -e "$(curl -fsSL )"Installing Xcode IDED ownload it using link below or find it on Mac App : If you have installed along with production version of , make sure youare using production version of xcodebuild tool. You can set it with:sudo xcode-select -switch / Android environmentGit git*If you have installed XCode, Git is already installed, otherwise run the followingbrew install gitLatest JDKA ndroid StudioChoose a Custom React Native Notes for Professionals3 Choose both Performance and Android Virtual React Native Notes for Professionals4 After installation, choose Configure -> SDK Manager from the Android Studio welcome React Native Notes for Professionals5In the SDK Platforms window, choose Show Package Details and under Android (Marshmallow)

7 , makesure that Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image, and Google APIs Intelx86 Atom_64 System Image are React Native Notes for Professionals6In the SDK Tools window, choose Show Package Details and under Android SDK Build Tools, make sure thatAndroid SDK Build-Tools is React Native Notes for Professionals7 Environment Variable ANDROID_HOMEE nsure the ANDROID_HOME environment variable points to your existing Android SDK. To do that, add thisto your ~/.bashrc, ~/.bash_profile (or whatever your shell uses) and re-open your terminal:If you installed the SDK without Android Studio, then it may be something like: /usr/local/opt/android-sdkexport ANDROID_HOME=~/Library/Android/sdkDepend encies for MacYou will need Xcode for iOS and Android Studio for android, , the React Native command line tools, recommend installing node and watchman via install nodebrew install watchmanWatchman is a tool by Facebook for watching changes in the filesystem.

8 It is highly recommended youinstall it for better performance. It is comes with npm, which lets you install the React Native command line install -g React - Native -cliIf you get a permission error, try with sudo:sudo npm install -g iOS the easiest way to install Xcode is via the Mac App Store. And for android download and install you plan to make changes in Java code, we recommend Gradle Daemon which speeds up the your React Native InstallationUse the React Native command line tools to generate a new React Native project called "AwesomeProject", then runreact- Native run-ios inside the newly created init AwesomeProjectcd AwesomeProjectreact- Native run-iosYou should see your new app running in the iOS Simulator shortly. React - Native run-ios is just one way to run yourapp - you can also run it directly from within Xcode or your appNow that you have successfully run the app, let's modify or in your text editor of choice and edit some React Native Notes for Professionals8 Hit Command + R in your iOS Simulator to reload the app and see your change!

9 That's it!Congratulations! You've successfully run and modified your first React Native : Getting Started - React -NativeSection : Setup for Linux (Ubuntu)1) Setup the terminal and run the following commands to install nodeJS:curl -sL | sudo -E bash -sudo apt-get install nodejsIf node command is unavailablesudo ln -s /usr/bin/nodejs /usr/bin/nodeAlternatives NodeJS instalations:curl -sL | sudo -E bash -sudo apt-get install -y nodejsorcurl -sL | 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 SDK e ENVexport ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDKexpo rt 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 next to "Android React Native Notes for Professionals9(Nougat)".

10 In case it is not, click on the checkbox and then "Apply".5) Start a projectExample app initreact- Native init ReactNativeDemo && cd ReactNativeDemoObs: Always check if the version on android/ is the same as the Build Tools downloaded onyour android SDKandroid { compileSdkVersion XX buildToolsVersion " "..6) Run the projectOpen Android AVD to set up a virtual android. Execute the command line:android avdFollow the instructions to create a virtual device and start itOpen another terminal and run the command lines: React - Native React Native Notes for Professionals10react- Native startSection : Setup for WindowsNote: You cannot develop React - Native apps for iOS on Windows, only React - Native android official setup docs for React - Native on windows can be found here. If you need more details there is a granularguide 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 if you want to usean emulator)1) Setup your machine for React Native developmentStart the command line as an administrator run the following commands:choco install install python2 Restart 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.}