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.

React Native : Going fullscreen on Android

styles.xml:

in android/app/src/main/res/values/styles.xml configure like following:

<resources>

<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:navigationBarColor">#000000</item>
</style>
</resources>

AndroidManifest.xml:

in android/app/src/main/AndroidManifest.xml configure like following:

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen">
      <activity
     <!-- ... -->
      </activity>
     <activity
     <!-- ... -->
      </activity>
     <!-- ... -->
    </application>

Hiding Navigation Bar:

For making navigation go away completely simply put navigation bar into immersive sticky mode by putting MainActivity.java. In android/app/src/main/java/com/company/MainActivity.java like following:

//...
import android.os.Bundle;
import android.view.View;
import android.content.res.Configuration;

public class MainActivity extends ReactActivity {

//    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideNavigationBar();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }

    private void hideNavigationBar() {
        getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);

    }

    @Override
    protected void onResume() {
            super.onResume();
            hideNavigationBar();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        hideNavigationBar();
    }
    
}

Now navigation bar can only be accessed by tapping near at only the edge of screen.
References:
https://facebook.github.io/react-native/docs/statusbar.html
https://developer.android.com/jetpack/androidx/releases/appcompat

Cordova : App not appearing on OpenWith List on Android

This may happen if android file intent filter is misplaced in config.xml like following:

<platform name="android">
        <allow-intent href="market:*" />
        <config-file parent="./application/activity" target="AndroidManifest.xml">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="file" />
                <data android:mimeType="*/*" />
                <data android:pathPattern=".*\\.txt" />
            </intent-filter>
        </config-file>
</platform>

Note data tag inside config.xml:

<data android:scheme="file" /> <data android:mimeType="*/*" /> <data android:pathPattern=".*\\.txt" />

It infact should be a single one like:

<data android:host="*" android:mimeType="text/plain" android:pathPattern=".*\\.txt" />

Correct config.xml content for android platform to avoid this:

<platform name="android">
        <config-file parent="./application/activity" target="AndroidManifest.xml">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.EDIT" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:host="*"
                      android:mimeType="text/plain"
                      android:pathPattern=".*\\.txt" />
            </intent-filter>
        </config-file>
    </platform>

Getting started with PhoneGap/Cordova with iOS,Your first Helloworld iphone app using PhoneGap/Cordova on iOS

Install homebrew if already not installed:

1. ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Install nodejs npm utility:

1. brew install nodejs

Install cordova:

1. npm install -g cordova

Create a hello world project:

1. cordova create hello com.example.hello HelloWorld

cd into project root dir where config.xml is located:

1. cd hello

Add ios platform specific libraries.Run:

1. cordova platform add ios

Check add platforms by running:

1. cordova platforms ls

You should see something like this:
Installed platforms: ios 3.5.0
Available platforms: amazon-fireos, blackberry10, firefoxos, ubuntu

Install iphone emulator:

1. npm install -g ios-sim

Build helloworld project:

1. cordova build

Run helloworld app:

1. cordova emulate ios

You should see something like this:

Getting started with PhoneGap/Cordova with CentOS, First Helloworld android app using PhoneGap/Cordova

Install Cordova:

On Linux/CentOS:

To install Cordova you will first need to install the npm utility of  Node.js.

1. yum install nodejs
2. yum install npm

Then install cordova:

1. npm install -g cordova

Install Android-SDK:
If you haven't yet installed Android SDK do the following:

Install prequisite libs:

1. yum install glibc.i686 glibc-devel.i686 libstdc++.i686 zlib-devel.i686 ncurses-devel.i686 libX11-devel.i686 libXrender.i686 libXrandr.i686

Download android-sdk from http://developer.android.com/sdk/index.html

(For CentOS 32bit:

http://dl.google.com/android/adt/22.6.2/adt-bundle-linux-x86-20140321.zip)

Unzip it to a directory.It will be a good idea to rename it.(e.g. /usr/local/android/).Run the following commands:

1. cd /usr/local/
2. wget http://dl.google.com/android/adt/22.6.2/adt-bundle-linux-x86-20140321.zip
3. unzip adt-bundle-linux-x86-20140321.zip
4. #backup can be deleted now, your choice
5. rm adt-bundle-linux-x86-20140321.zip
6. mv adt-bundle-linux-x86-20140321/ android/

Browse it and make sure that the following directories exist and contain all files:
/usr/local/android/sdk/platforms
/usr/local/android/sdk/platform-tools
/usr/local/android/sdk/tools
Now add path variables to environment:

1. echo "export PATH=$PATH:/usr/local/android/sdk/platforms" >> ~/.profile
2. echo "export PATH=$PATH:/usr/local/android/sdk/platform-tools" >> ~/.profile
3. echo "export PATH=$PATH:/usr/local/android/sdk/tools" >> ~/.profile

Now load them for using in current session:

1. source ~/.profile

Now install Ant. Ant version 1.8+ is needed for this purpose.


Uninstall previous old ant version:

1. #uninstall if already old versions are there
2. yum remove ant

Run the script from here to install ant 1.9:
http://mohiplanet.blogspot.com/2014/06/centos-ant-19-install-scriptsh.html

You will also need ant apache regex utility.Install it by running :

1. yum install ant-apache-regexp

Create Helloworld Cordova Project:
cd to a convenient directory and run:

1. cordova create hello com.example.hello HelloWorld

This should create a hello directory in current location.Navigate to hello directory where the config.xml file is located:

1. cd hello/ && ls

You will see something like:
config.xml  hooks  merges  platforms  plugins  www

Run the following command to prepare the helloworld project for android platform:

1. cordova platform add android

This will generate required files for helloworld project to run in android.
Run the follwing command to see what platforms are already added in the project:

1. cordova platforms ls

You will see something like this:
Installed platforms: android 3.5.0
Available platforms: amazon-fireos, blackberry10, firefoxos, ubuntu
Build the project:
Build the project by following command:

1. cordova build

Run the project:
Run the following command to run the app on android emulator:

1. cordova emulate android

Now what you just see is the html page located at:
YOUR_PROJECT_ROOT_DIR/www/index.html
You can edit the file and run 'cordova emulate android' again to see the changes.
Debugging the application (Seeing logs):
You can run:

1. adb logcat

on a seperate window to see android logs.This will produce huge logs, so I would recommend using:

1. adb logcat|grep Cordova

This will produce logs created by only Cordova.Sample cordova logs:
 adb logcat|grep Cordova
- waiting for device -
I/CordovaLog(  958): Changing log level to DEBUG(3)
I/CordovaLog(  958): Found start page location: index.html
D/CordovaActivity(  958): CordovaActivity.onCreate()
D/CordovaWebView(  958): CordovaWebView is running on device made by: unknown
D/CordovaActivity(  958): CordovaActivity.init()
D/CordovaWebView(  958): >>> loadUrl(file:///android_asset/www/index.html)
W/System.err(  958):  at org.apache.cordova.CordovaWebView.loadUrlIntoView(CordovaWebView.java:457)
W/System.err(  958):  at org.apache.cordova.CordovaWebView.loadUrlIntoView(CordovaWebView.java:444)
W/System.err(  958):  at org.apache.cordova.CordovaWebView.loadUrl(CordovaWebView.java:414)
W/System.err(  958):  at org.apache.cordova.CordovaActivity.loadUrl(CordovaActivity.java:395)
D/CordovaWebView(  958): >>> loadUrlNow()

Distributing your app(Generating .apk):

When you run:

1. cordova build

A distributable .apk is genarated at  YOUR_PROJECT_ROOT_DIR/platforms/android/ant-build/
In this example the auto-generated .apk will  be YOUR_PROJECT_ROOT_DIR/platforms/android/ant-build/HelloWorld-debug.apk
But this a debug version.To build release version simply do:

1. cordova build --release

This will generate an unsigned release version of your app like YOUR_PROJECT_ROOT_DIR/platforms/android/ant-build/HelloWorld-release-unsigned.apk 

To sign your app with your company profile please visit:

http://developer.android.com/tools/publishing/app-signing.html

References:-
http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html
https://wiki.echocat.org/display/ECHOCAT/2012/08/17/Configure+Android+SDK+on+CentOS+6+x86_64