React Native Basics

React Native

Learn once, write anywhere.

Create native apps for Android and iOS using React

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

Written in JavaScript—rendered with native code

React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do.

Many platforms, one React. Create platform-specific versions of components so a single codebase can share code across platforms. With React Native, one team can maintain two platforms and share a common technology—React.

import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';

const WelcomeScreen = () => (
  <View>
    <Header title="Welcome to React Native"/>
    <Text style={heading}>Step One</Text>
    <Text>
      Edit App.js to change this screen and turn it
      into your app.
    </Text>
    <Text style={heading}>See Your Changes</Text>
    <Text>
      Press Cmd + R inside the simulator to reload
      your app’s code.
    </Text>
    <Text style={heading}>Debug</Text>
    <Text>
      Press Cmd + M or Shake your device to open the
      React Native Debug Menu.
    </Text>
    <Text style={heading}>Learn</Text>
    <Text>
      Read the docs to discover what to do next:
    </Text>
   </View>
);
  

Native Development For Everyone

React Native lets you create truly native apps and doesn't compromise your users' experiences. It provides a core set of platform agnostic native components like View, Text, and Image that map directly to the platform’s native UI building blocks.

Seamless Cross-Platform

React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.

Fast Refresh

See your changes as soon as you save. With the power of JavaScript, React Native lets you iterate at lightning speed. No more waiting for native builds to finish. Save, see, repeat.

Give it a try

• npx react-native init MyTestApp
• cd MyTestApp
• npx react-native run-android OR npx react-native run-ios

Install dependencies to native projects

• npm install [LIBRARY-NAME]
• react-native link [LIBRARY-NAME]

Clear bundle

If something don’t run as expected, maybe you need to clear and create a new bundle with this command.

• watchman watch-del-all

Export APK to run in device

With the following commands you will have and unsigned apk so you can install and share with your colleagues for testing purposes. Just remember that this apk is not ready to upload to the App Store or production. You will find your fresh apk in android/app/build/outputs/apk/app-debug.apk.

1. Bundle debug build
   react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest./android/app/build/intermediates/res/merged/debug


2. Create debug build
   cd android && ./gradlew assembleDebug


3. Create testing build
   cd android && ./gradlew assembleRelease


4. Create release build
   cd android && ./gradlew bundleRelease


5. Install apk in devise
   open terminal && adb install app-release.apk