Getting started with Android development with React Native without an IDE

PC checklist:

• install android SDK
• install android build tools ( for building from the command line ) and set PATH variables
• install nodejs 12(>= recommended)

ANDROID device checklist:

• enable developer mode
• enable usb debugging within developer mode
• connect your android phone to laptop and tap allow on your phone

On PC:

Install React Native:

npm install react react-native yarn

Install React Native CLI

npm install react-natice-cli -g

Create new project:

react-native init myproject

Setting project package name:

npm install react-native-rename -g react-native-rename “myproject” -b com.mycompany.myapp

This is at the moment a workaround, because of issue: https://github.com/facebook/react-native/issues/12721. Future releases are suppossed to support --package

Clean / Build project:

react-native run-android –tasks clean

Build:

react-native run-android –tasks build

Installing app on connected android device and starting up the app:

react-native run-android –tasks installRelease

Project structure:

• App.js
• index.js
• app.json
• babel.config.js
• android/…
• ios/…
• __tests__/App-test.js
• package.json

Seeing logs:

react-native log-android

Or:

adb logcat|grep React

–

Sample logs for putting:

 console.log('#####Hi'); 

in App.js:

App.js:

import React, {Fragment} from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Button
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
    
  return (
        
        <ScrollView>
            <View style={styles.sectionContainer}>
            <Button
                onPress={() => {
                    alert('Helloworld!');
                    console.log('#####Hi');
                }}
                title="Click Me"
            />
            </View>
        </ScrollView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    color: '#00FF00',
    backgroundColor: '#000',
  },
});

export default App;

Output logs:

09-16 16:10:41.813 28599 28616 D ReactNative: Initializing React Xplat Bridge after initializeBridge
09-16 16:10:41.814 28599 28616 D ReactNative: CatalystInstanceImpl.runJSBundle()
09-16 16:10:41.840 28599 28621 D ReactNative: ReactInstanceManager.setupReactContext()
09-16 16:10:41.840 28599 28621 D ReactNative: CatalystInstanceImpl.initialize()
09-16 16:10:41.845 28599 28621 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
09-16 16:10:42.166 28599 28620 I ReactNativeJS: #####Hi
09-16 16:10:42.206 28599 28620 I ReactNativeJS: Running application “MyTestProject” with appParams: {“rootTag”:1}. DEV === false, development-level warning are OFF, performance optimizations

Unit Testing:

React Native preconfigures Jest for unit testing. Running:

yarn test

should give:

yarn run v1.12.3
$ jest
 PASS  __tests__/App-test.js (10.046s)
  ✓ renders correctly (7236ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.149s
Ran all test suites.
Done in 12.92s. 

Lets put some unit tests in __tests__/App-test.js:

function testSum(a,b){return a+b;}

it('adds 4 + 5 to equal 9', () => {
  expect(testSum(4, 5)).toBe(9);
});

Next yarn test should give us:

yarn run v1.12.3
$ jest
 PASS  __tests__/App-test.js
  ✓ adds 4 + 5 to equal 9 (3ms)
  ✓ renders correctly (377ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.555s
Ran all test suites.
Done in 2.27s.

Debugging App Crashes / App sudden stop:

For facing REs start Metro JS bundler and run app on debug mode. Simply run react-native start on a new terminal window. Or running this in current terminal should start up a new window running Metro:

xterm -e 'react-native start' &

now run:

react-native run-android --tasks installDebug

This should start app up in debug mode:

Now saving any changes on App.js should refresh android app istance window instantly running on device while designing UI. And any exception messages whould should right appear on app window.