Cefalo School - React Native Class 06

Cefalo School - React Native Class 06.md

Cefalo School - React Native Class 06

---

BASICS

• Build native mobile apps using JavaScript and React

Sample Code 1

• With React Native, you don't build a mobile web app, an HTML5 app, or a hybrid app. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java.
  • React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

Sample Code 2

INSTALLATION

• Install the command line tool for creating a react native project.

npm install -g create-react-native-app

• Now as the tool is installed - creating project without installing or configuring any tools to build native code - no Xcode or Android Studio is required.

create-react-native-app cefaloSchoolProj1

• Now running the app will require installation of Expo app in your phone and expo command line client in your machine.

npm install -g exp

• If you use react-native-cli tool you can also create new project using the command:

react-native init cefaloSchoolProj1

RUNNING

• To run the previously created RN project - run yarn start

  • A QR code will be visible
  • Scan the code from your expo app in mobile
  • The packager will run - and the app will be visible
  • Any code change will be take effect instantly.
  • Exporting app for publishing in play store or app store is very easy.

• This expo system has some issues such as:

  • This system do not permit to use custom native module (hence almost all third party modules)
  • You cannot add React Native to your existing native app in this way.

• If you want to run the app in device or simulator - Or if you want to add react native to your existing native apps you need some extra steps:

  • First you have to eject the project from the existing system using command yarn run eject
  • You will be asked some questions about moving to regular react native project, using expo sdk or cancel.
  • You will be asked the projects name and how it will appear on phone - based on which the json file will be updated and entry points will be created.
  • You need to install react-native-cli using command npm install -g react-native-cli
  • You need to install watchmen Installing Watchmen for different platforms
  • For iOS projects -- you need to show Xcode the command line tool from Preferences >> Locations >> Command Line Tools
  • For Android projects -- you need to install and configure Android Studio for:
    • Android SDK
    • Android SDK Platform
    • Android Virtual Device
  • For details and for all platform support: React Native Getting Started in the "Building Project with Native Code".
  • The command to run in the iOS simulator is:

  react-native run-ios

  • To run in android - first you have to run the android emulator (either from Android Studio device manager or from command line: emulator @Nexus_6_API_25). Then run:

  react-native run-android

Inside the Codebase

• The index.js is the main entry point the main module is loaded here.

• AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.

• The App.js is the main component of our application. This can be used as the frame of the application or even can hold main layout or such functionality.

• For different implementation for iOS or Android platform we can check via Platform API of react native or on a higher end change we can create two separate files for Android and iOS named:

  • App.ios.js
  • App.android.js (this is true for all other component files too)

• We will create three (or more) based on design preferences and requirements in the root directory for further operations:

  • components
  • services
  • styles

• We can design the components in either horizontal or vertical approach:

  • Horizontal:
    • Create component js files in component directory;
    • Create all API calls or other contextual processing in services directory
    • Create stylesheets for all the components (either by same name of the components or by common names) in styles directory
  • Vertical:
    • Create directory named after the component within components directory [lets say the component name is login].
    • Inside the login directory put login.js, login-style.js and login-services.js files. Follow this for other components too.

INTEGRATION WITH EXISTING NATIVE APPS

• For starting:
  • Adding React Native to your app
  • Medium article on adding RN to Android App
  • Medium article on adding RN to ios App
• We will cover more on this at Class#11 [January 03, 2018]

https://snack.expo.io/BkNzfZ3xG