Create NOIS React-Native Project

create-nois-react-native-project.md

1. Init project:

$ react-native init <project_name>

2. Add main dependencies:

$ yarn add moment lodash react-native-elements react-native-fetch-blob https://github.com/newoceaninfosys/react-native-gifted-form react-native-i18n react-native-image-crop-picker react-native-keyboard-aware-scroll-view react-native-loading-spinner-overlay react-native-navbar react-native-splash-screen react-native-vector-icons react-navigation realm

3. Update package.json with following:

{
  ...
  
  "rnpm": {
		"assets": [
			"assets/fonts"
		]
	}
}

4. Link modules to iOS/Android project:

$ RNFB_ANDROID_PERMISSIONS=true react-native link

5. Add Crash Report and Analytics:

# Goes to `https://mobile.azure.com` to create app and get AppId for Android and iOS

$ yarn add mobile-center mobile-center-analytics mobile-center-crashes
$ RNFB_ANDROID_PERMISSIONS=true react-native link

6. Update AppDeletegate.m:

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // other codes
  
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; // add this
  
  // other codes
}

@end

7. Update Info.plist:

<key>NSCameraUsageDescription</key>
<string>[Project_Name] would like to let you make a picture.</string>
<key>NSContactsUsageDescription</key>
<string>[Project_Name] would like to access your contacts</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>[Project_Name] would like to let you choose an item from your Photos.</string>

8. react-native-image-crop-picker

• iOS: Under Embedded Binaries click + and Add Others RSKImageCropper.framework and QBImagePicker.framework
• Android: Add following this to AndroidManifests.xml:

<uses-permission android:name="android.permission.CAMERA"/>

9. react-native-fetch-blob

• Android: Add following to AndroidManifests.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
...
<intent-filter>
  ...
  <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>

10. react-native-splash-screen

• iOS: Update AppDelegate.m with the following additions:

#import "AppDelegate.h"
#import "RCTRootView.h"
#import "SplashScreen.h"  // // add this

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [SplashScreen show];  // // add this
    return YES;
}

@end

• Android:
  • Update the MainActivity.java with followings:

    import org.devio.rn.splashscreen.SplashScreen;
    
    public class MainActivity extends ReactActivity {
       @Override
        protected void onCreate(Bundle savedInstanceState) {
            SplashScreen.show(this);  // here
            super.onCreate(savedInstanceState);
        }
        // ...other code
    }
    

  • Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
    </LinearLayout>