Skip to content
/ react-native-setup Public

This tutorial shall help setting up your React Native environment and shows a sample App with Firebase backend.

License

MIT license
4 stars 3 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

herrkraatz/react-native-setup

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
manager_app_src
manager_app_src
 
 
.gitignore
.gitignore
 
 
LICENSE.md
LICENSE.md
 
 
README.md
README.md
 
 

Repository files navigation

Sorry !! Gosh ... 4 years went by.

I hope to find time soon to update this tutorial.

React Native Setup

This tutorial shall help setting up your React Native environment and running your first React Native App.

IMPORTANT UPDATE: As of https://github.com/react-community/create-react-native-app#getting-started the new way of getting started ...

  • ... for Option 1 below is:
> npm install -g expo-cli
> expo init AwesomeProject
> cd AwesomeProject
> npm start

instead of

> npm install -g create-react-native-app
> create-react-native-app AwesomeProject
> cd AwesomeProject
> npm start
  • ... for Option 3 below DO NOT USE:
> expo init AwesomeProject
> cd AwesomeProject
> npm run eject

But still use:

> react-native init my_rn_cli_project

IMPORTANT CAUTION:

The npm packages might have discovered vulnerabilities by now. So do not use the combination of our npm versions in your production environment, but within a test environment instead that is sandboxed from your production network. Unfortunately the author has no time right now to always keep the npm packages at their latest versions and ensure that their combination still plays successfully together. The tuturial is supposed to show how it works and should help building working prototypes to make life easier for you.

Table of Contents

  1. Getting Started - 3 Options
    1. Quickstart with Create React Native App + Expo Client
    2. For most convenience: Expo Development Server (as GUI or CLI) + Expo Client + Expo SDK (Components)
    3. Advanced: With react-native-cli + Xcode + Android Studio/Genymotion
  2. Example React Native App with Firebase backend
    1. Clone repository and preparation
    2. Setting up your own Firebase account
    3. Run app on iOS Simulator
  3. Links

1. Getting Started - 3 Options

Here are the 3 standard options how to set it up:

  1. For a quickstart use both

    To once leave the path of standard React Native Components / APIs you can "eject" from Create React Native App

  2. For most convenience (pre-configured components like Camera, Push Notifications, etc through Expo SDK) and if you're sure that you DO NOT leave the path of standard React Native Components / APIs, use

  3. Advanced: If you need to integrate React Native into an existing native iOS / Android application OR want to create custom native modules beyond the standard React Native Components / APIs,

Node.js installed ? Needed for all 3 options !

If you haven't Node.js installed on your machine, please install current (latest) version of Node.js (By download, By package manager).

Note: LTS version is more stable, but better use latest version as React Native is under permanent development, and chances are pretty high that RN developers use (at least partly) latest Node.js features instead of taking care of time consuming regression tests for all older Node.js versions. RN developers, please forgive me if I'm wrong.

This will install Node.js (JavaScript engine) on your machine, and allows JavaScript code to execute not only in your browser. Node.js also ships with npm package manager we will need below.

Notes:

  • No Mac needed, but tutorial was created using

    • Mac OS X version High Sierra, 10.13.4 (sw_vers)
    • Xcode Version 9.3
    • Node.js version v9.11.1 (node -v)
    • Watchman version 4.9.0 (watchman -v)
    • React Native CLI version 2.0.1 (react-native -v)

i. Quickstart with Create React Native App + Expo Client

Install Create React Native App

Now we follow this tutorial: https://facebook.github.io/react-native/docs/getting-started.html

Open a Terminal window and run:

> npm install -g create-react-native-app

When done, cd into your preferred projects root folder, and run:

> create-react-native-app AwesomeProject

When done, run:

> cd AwesomeProject
> npm start

This will start a development server for you with this output:

> npm start

> AwesomeProject@0.1.0 start /Users/User1/Desktop/Projects/react-native-setup/AwesomeProject
> react-native-scripts start

12:03:51 PM: Starting packager...
Packager started!

QR - CODE HERE
QR - CODE HERE                                                           
QR - CODE HERE                                                           
QR - CODE HERE                                                           
QR - CODE HERE                                                           
QR - CODE HERE                                                      

Your app is now running at URL: exp://192.168.14.18:19000

View your app with live reloading:

  Android device:
    -> Point the Expo app to the QR code above.
       (You'll find the QR scanner on the Projects tab of the app.)
  iOS device:
    -> Press s to email/text the app URL to your phone.
  Emulator:
    -> Press a (Android) or i (iOS) to start an emulator.

Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

Shortcut for iOS:

npm run ios

Documentation says: "Like npm start, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed."

Shortcut for Android:

npm run android

Documentation says: "Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup)."

Note:

  • If you run it the first time on a Simulator / Emulator, the Expo Client will be installed automatically on the Simulator / Emulator.

If you want to run it on a device, follow next step:

Install the Expo Client App on your iOS or Android phone

iOS: Search for Expo Client in App Store and install it.

Android: Search for Expo Client in Play Store and install it.

Both: Connect to the same wireless network as your computer.

On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.

Folder Structure

.expo/
  packager-info.json
  settings.json
node_modules/
.babelrc
.gitignore
.watchmanconfig
App.js
app.json
App.test.js
package.json
package-lock.json
README.md

Debugging

Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

More details on setting up debugging on iOS Simulators / Android Emulators: https://facebook.github.io/react-native/docs/getting-started.html

ii. For most convenience: Expo Development Server (as GUI or CLI) + Expo Client + Expo SDK (Components)

  1. First install the Expo Client App on your iOS or Android phone

    iOS: Search for Expo Client in App Store and install it.

    Android: Search for Expo Client in Play Store and install it.

  2. Install the Expo Development Server (as GUI or CLI) on your machine and run a first React Native App on your device

    Note: Your device should be on the same WiFi connection as your machine to make Live Reloads fast. Also works with 3G on device, but is much slower.

    We should try out both ways of starting your local Development Server:

    1. The Expo CLI first:

      > npm install exp --global

      We shouldn't worry about the warnings: https://forums.expo.io/t/installing-exp-without-warnings/8132/4

      Now create your first project, cd into the project folder, and run exp start

      > exp init my-new-project
> cd my-new-project
> exp start
[12:40:12] Using project at /Users/User1/Projects/react-native-setup/my-new-project
[12:40:22] Starting Metro Bundler on port 19001.
[12:40:22] Metro Bundler ready.
[12:40:26] Tunnel ready.
[12:40:26] Expo is ready.

QR - CODE HERE
QR - CODE HERE                                                           
QR - CODE HERE                                                           
QR - CODE HERE                                                           
QR - CODE HERE                                                           
QR - CODE HERE                                                           

[12:40:28] Your URL is: exp://ne-bhr.herrkraatz.my-new-project.exp.direct:80

[12:40:28] Instructions to open this project on a physical device
[12:40:28] Android devices: scan the above QR code.
[12:40:28] iOS devices: run exp send -s <your-phone-number-or-email> in this project directory in another terminal window to send the URL to your device.

[12:40:28] Instructions to open this project on a simulator
[12:40:28] If you already have the simulator installed, run exp ios or exp android in this project directory in another terminal window.

[12:40:28] Logs for your project will appear below. Press Ctrl+C to exit.

      Debugging on your Device:

      • iOS Device:

        Run exp send -s +49151..... in the same project directory, but in another terminal window (DON'T CLOSE the window above !) to send the URL to your device.

        When the message arrived at your device, just click on the link and your first app gets opened within the Expo Client.

      • Android Device:

        • Open Expo Client and scan the QR - CODE above
        • Or connect your Android device with an USB cable to your machine and run exp android in the same project directory, but in another terminal window (DON'T CLOSE the window above !).

      • Both:

        Shaking your device shows the menu. Enable Live Reloading, so that each change in, e.g. in screens/HomeScreen.js will automatically be reloaded on device for debugging.

      Debugging on Simulators / Emulators (see https://docs.expo.io/versions/v28.0.0/workflow/debugging)

      • iOS Simulator:

        Run exp ios in the same project directory, but in another terminal window (DON'T CLOSE the window above !).

        You need to have Xcode installed.

        Then Expo Client gets installed on the Simulator, and opens the app within it.

      • Android Emulator:

        Run exp android in the same project directory, but in another terminal window (DON'T CLOSE the window above !).

        You need to have have Genymotion or Android Studio installed (IMPORTANT: see https://docs.expo.io/versions/latest/workflow/genymotion).

        Then Expo Client gets installed on the Emulator, and opens the app within it.

    2. Now the GUI Expo XDE (https://github.com/expo/xde/releases)

      Download and install the GUI, then sign in if you have signed up within the Expo Client already, otherwise sign up here.

      Then hit Project >> New Project >> Choose Blank or Tab Navigation and hit CREATE

      Debugging on your Device:

      • iOS Device:

        Hit Share button (upper right corner) and hit "Send Link" to your mobile number +49151.....

        When the message arrived at your device, just click on the link and your first app gets opened within the Expo Client.

      • Android Device:

        • Open Expo Client and scan the QR - CODE shown when you hit the Share button (upper right corner)
        • Or connect your Android device with an USB cable to your machine and hit Device button (upper right corner) >> "Open on Android"

      • Both:

        Shaking your device shows the menu. Enable Live Reloading, so that each change in, e.g. in screens/HomeScreen.js will automatically be reloaded on device for debugging.

      Debugging on Simulators / Emulators (see https://docs.expo.io/versions/v28.0.0/workflow/debugging)

      • iOS Simulator:

        Hit Device button (upper right corner) >> "Open on iOS Simulator"

        You need to have Xcode installed.

        Then Expo Client gets installed on the Simulator, and opens the app within it.

      • Android Emulator:

        Hit Device button (upper right corner) >> "Open on Android"

        You need to have have Genymotion or Android Studio installed (IMPORTANT: see https://docs.expo.io/versions/latest/workflow/genymotion).

        Then Expo Client gets installed on the Emulator, and opens the app within it.

  3. Finally install the Expo SDK (https://docs.expo.io/versions/v28.0.0/sdk/) to take advantage of many many components (install it in your project root)

    > cd my-new-project
> npm install --save expo

    Example:

    Importing Contacts component (https://docs.expo.io/versions/v28.0.0/sdk/contacts) into your component:

    import { Contacts } from 'expo';

    Make sure you're using the most current SDK version. At the time of writing we were on Version 28.0.0

Folder Structure

.expo/
  packager-info.json
  settings.json
__tests__/
  App-test.js
assets/
  fonts/
  images/
components/
  __tests__/
    StyledText-test.js
  StyledText.js
  TabBarIcon.js
constants/
  Colors.js
  Layout.js
navigation/
  AppNavigator.js
  MainTabNavigator.js
node_modules/
screens/
  HomeScreen.js
  LinksScreen.js
  SettingsScreen.js
.babelrc
.gitignore
.watchmanconfig
App.js
app.json
package.json
package-lock.json

iii. Advanced: With react-native-cli + Xcode + Android Studio/Genymotion

Before you start !

  • iOS Setup: If you have Xcode installed, upgrade to latest version.

  • Android Setup: If you have Android Studio installed, upgrade to latest version. It can also work WITHOUT Android Studio. Think about Genymotion, too.

  • Both: Upgrade Node.js to latest version.

Android Setup

Hit Tab "Building Projects with Native Code" on https://facebook.github.io/react-native/docs/getting-started.html

Choose Target OS: Android

Follow instructions :)

You will need Watchman, JDK >= 8, React Native CLI, and either Android Studio or Genymotion

iOS Setup

iOS Projects are a bit easier to set up than Android Projects:

  1. Install Watchman (also from facebook)

    > brew install watchman

    Note: This failed initially: https://stackoverflow.com/questions/47513024/how-to-fix-permissions-on-home-brew-on-macos-high-sierra/47721925) Needed to run sudo mkdir /usr/local/Frameworks first.

  2. Install React Native CLI

    > npm install -g react-native-cli

Create first React Native App with React Native CLI

Now where all is set up, we can create our first React Native project using the React Native CLI.

CD into your preferred projects folder and let's call the app "my_rn_cli_project" (only alphanumeric values are allowed, no dashes)

> react-native init my_rn_cli_project

Folder Structure

android/
  app/
  gradle/
  keystores/
  build.gradle
  gradle.properties
  gradlew
  gradlew.bat
  settings.gradle
ios/
  react_native_clean_setup/
  react_native_clean_setup.xcodeproj/
  react_native_clean_setup-tvOS/
  react_native_clean_setup-tvOSTests/
  react_native_clean_setupTests/
node_modules/
.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
App.js
app.json
index.js
package.json
package-lock.json

Debugging

Debugging on Simulators / Emulators (see https://facebook.github.io/react-native/docs/debugging.html):

Debugging on your Device (see https://facebook.github.io/react-native/docs/debugging.html and https://facebook.github.io/react-native/docs/running-on-device.html):

IMPORTANT: Debugging Tools for BOTH Simulator/Emulator AND Device !

2. Example React Native App with Firebase backend

The following app is a simple shift manager/planning app which includes

  • Login/Signup Screen checked against Firebase backend
  • An Employee List
  • Shift Planning Screen
  • Top Navigation

It is based on react-native-cli, but can easily be ported to Expo as we don't use any customized React Native Components.

Great many thanks to Stephen Grider who showed in his Udemy Course how to setup Firebase and Authentication with his React Native App "Manager" which is the basis of this repo (see links below).

i. Clone repository and preparation

  1. First clone this repo into your preferred projects directory.

    Open a Terminal window and cd into your preferred projects directory, then run:

    > git clone https://github.com/herrkraatz/react-native-setup.git

  2. When repo cloned successfully, cd into folder react-native-setup and run

    > react-native init manager_app

  3. When done, copy manager_app_src/src into manager_app folder:

    > cp -R manager_app_src/src manager_app

  4. Then copy manager_app_src/package.json into manager_app folder (replacing existing package.json file)

    > cp manager_app_src/package.json manager_app

  5. Edit manager_app/index.js file:

    import App from './App'; becomes import App from './src/app';

  6. Delete manager_app/App.js file:

    > rm App.js

  7. Finally cd into manager_app folder and run:

    > npm install

    Troubleshooting if you found vulnerabilities (we ignore lodash's low severity)

    [!] 2 vulnerabilities found [34587 packages audited]
         Severity: 1 low | 1 high
         Run `npm audit` for more detail

    Check out:

    Ways out:

ii. Setting up your own Firebase account

Steps:

  1. First go to https://firebase.google.com/ and create an account.

  2. Then go to Console, and add a Project.

  3. Enable "Email/Password" under Authentication >> Sign-in method

  4. Add Rules to Realtime Database to protect your database from public inserting of data !

    Open Database >> Rules and insert

    {
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
    		".write": "$uid === auth.uid"
      }
    }
  }
}

  5. Go to Project Overview >> "Add Firebase to your web app" and copy the config parameters

    config = {
    apiKey: "AIzaSyD_bli",
    authDomain: "bli.firebaseapp.com",
    databaseURL: "https://bli.firebaseio.com",
    projectId: "bli",
    storageBucket: "bli.appspot.com",
    messagingSenderId: "bla"
};

    Then replace the config parameters in manager_app/src/app.js with the above copied config parameters.

iii. Run app on iOS Simulator

Now let's try it out on iOS Simulator !

Cd into manager_app and run:

> react-native run-ios

A cool side effect in Firebase is the visualization of live updates in its Realtime Database

Each time you insert/edit an employee, the employee pops up yellow under Database >> Realtime Database >> Data

Have fun being manager ! But don't fire too many of your peers !

Troubleshooting

If the App only shows up a second in the iOS Simulator, please open Xcode and you'll probably see this under the General Tab: Signing for "manager_app" requires a development team.

Solution:

  • Hit Build Settings Tab and set Code Signing Identity >> Debug to your preferred Identity
  • Then hit Play in Xcode

3. Links

Have a look !

Create React Native App (CRNA) Starter Kit:

Expo:

React Native CLI:

Boilerplates & Examples:

Debugging:

Styling:

React Native Components used:

Credits to the authors of above links ! Thank you very much !

And credits to the reader: Thanks for your visit !

About

This tutorial shall help setting up your React Native environment and shows a sample App with Firebase backend.

Resources

Readme

License

MIT license
Activity

Stars

4 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages