Skip to content

Repository files navigation

This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

  1. Open App.tsx in your text editor of choice and edit some lines.

  2. For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

    For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Now what?

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Publish apk of your application

  • Here's the detail view how to publish your application to Google Play Store

  • Publish an apk and install it to your phone :

    • On Windows keytool must be run from C:\Program Files\Java\jdkx.x.x_x\bin, as administrator.
    keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

    NOTICE: This is important to keep in mind that the password should remember for later use. It command generates the keystore as a file called my-upload-key.keystore in the C:\Program Files\Java\jdkx.x.x_x\bin.

    • Copy the my-upload-key.keystore file to the ./android/app/ directory.

    • Setting up Gradle variables :

      1. Place the my-upload-key.keystore file under the android/app directory in your project folder.
      2. Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and add the following (replace ***** with the correct keystore password, alias and key password).
      MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
      MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
      MYAPP_UPLOAD_STORE_PASSWORD=*****
      MYAPP_UPLOAD_KEY_PASSWORD=*****
    • Adding signing config to your app's Gradle config

      Edit the file android/app/build.gradle in your project folder, and add the signing config

      ...
      android {
         ...
         defaultConfig { ... }
         signingConfigs {
            release {
                  if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                     storeFile file(MYAPP_UPLOAD_STORE_FILE)
                     storePassword MYAPP_UPLOAD_STORE_PASSWORD
                     keyAlias MYAPP_UPLOAD_KEY_ALIAS
                     keyPassword MYAPP_UPLOAD_KEY_PASSWORD
                  }
            }
         }
         buildTypes {
            release {
                  ...
                  # its import to change from debug to release
                  signingConfig signingConfigs.release 
            }
         }
      }
      ...
    • Clean the previous gradle data and build the new apk

      # run this command in your project's ./android directory
      ./gradlew clean
      
      # run this command for build apk
      ./gradlew assembleRelease

      You can find the apk file in the android\app\build\outputs\apk\release directory.

Learn More

To learn more about React Native, take a look at the following resources:

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages