RN Codemi Learning Module

Warning

Please make sure the project RN Version is equal with this library (0.57.8)

Installation

1. react-native init --version="0.57.8" project_name
2. Open package.json, copy dependencies except react and react-native and paste it to project dependencies in package.json.
3. copy devDependencies and paste it to project devDependencies
4. npm install
5. react-native link
6. cd ios && pod init
7. Update Podfile

     platform :ios, '9.0'
   
     target 'project_name' do
       # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
       # use_frameworks!
       rn_path = "../node_modules/react-native"
       pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
       pod 'React', path: rn_path, subspecs: [
         'Core',
         'CxxBridge',
         'DevSupport',
         'RCTActionSheet',
         'RCTAnimation',
         'RCTGeolocation',
         'RCTImage',
         'RCTLinkingIOS',
         'RCTNetwork',
         'RCTSettings',
         'RCTText',
         'RCTVibration',
         'RCTWebSocket',
       ]
       pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
       pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
       pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
       
   
       # Pods for codemi_apps
       pod 'Firebase/Core', '~> 5.14.0'
       pod 'Firebase/Messaging'
   
       pod 'RNSVG', :path => '../node_modules/react-native-svg'
       pod 'rn-fetch-blob',
         :path => '../node_modules/rn-fetch-blob'
   
       pod 'react-native-youtube', :path => '../node_modules/react-native-youtube'
   
       pod 'Fabric', '~> 1.7.13'
       pod 'Crashlytics', '~> 3.10.7'
   
   
       pod 'react-native-background-upload', :path => '../node_modules/react-native-background-upload'
   
       pod 'react-native-fast-image', :path => '../node_modules/react-native-fast-image'
   
       post_install do |installer|
         installer.pods_project.targets.each do |target|
             if target.name == "React"
                 target.remove_from_project
             end
         end
       end
   
       target 'project_nameTests' do
         inherit! :search_paths
         # Pods for testing
       end
   
     end
   

8. pod install
9. Update Gradle version on android/gradle/wrapper/gradle-wrapper.properties to 4.6
10. Update android/build.gradle with this

      // Top-level build file where you can add configuration options common to all sub-projects/modules.
    
      buildscript {
          ext {
              buildToolsVersion = "27.0.3"
              minSdkVersion = 16
              compileSdkVersion = 27
              targetSdkVersion = 26
              supportLibVersion = "27.1.1"
          }
          repositories {
              google()
              jcenter()
              maven {
                  url 'https://maven.fabric.io/public'
              }
          }
          dependencies {
              classpath 'com.android.tools.build:gradle:3.2.0'
              classpath 'com.google.gms:google-services:4.0.1'
              classpath 'io.fabric.tools:gradle:1.25.4'
    
              // NOTE: Do not place your application dependencies here; they belong
              // in the individual module build.gradle files
          }
      }
    
      allprojects {
          repositories {
              mavenLocal()
              google()
              jcenter()
              
              maven {
                url 'https://maven.google.com/'
            }
              maven {
                  // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                  url "$rootDir/../node_modules/react-native/android"
              }
              
          }
      }
    
      subprojects {
          afterEvaluate { project ->
              if (project.hasProperty("android")) {
                  android {
                      compileSdkVersion 27        // version of compile sdk used for project
                      buildToolsVersion '27.0.3'    // version of build tool used for project
                  }
              }
          }
      }
    
    
      task wrapper(type: Wrapper) {
          gradleVersion = '4.6'
          distributionUrl = distributionUrl.replace("bin", "all")
      }
    

11. Update android/app/build.gradle with this

      android {
        ...
    
          defaultConfig {
            ...
            multiDexEnabled true
            vectorDrawables.useSupportLibrary = true
            ...
          }
          // add this line
          compileOptions {
            targetCompatibility JavaVersion.VERSION_1_8
          }
        ...
      }
    
      dependencies {
        // add all this dependencies
          implementation project(':react-native-fast-image')
          implementation('com.crashlytics.sdk.android:crashlytics:2.9.5@aar') {
              transitive = true
          }
          implementation project(':react-native-youtube')
          implementation 'com.android.support:multidex:1.0.2'
          implementation project(':react-native-svg')
          implementation project(':react-native-firebase')
          implementation project(':rn-fetch-blob')
          implementation project(':react-native-pdf')
          implementation project(':react-native-webview-bridge')
          implementation project(':react-native-linear-gradient')
          implementation project(':react-native-thumbnail')
          implementation project(':react-native-fs')
          implementation project(':react-native-orientation')
          implementation project(':react-native-video')
          implementation project(':react-native-image-picker')
          implementation (project(':react-native-camera')) {
              exclude group:"com.google.android.gms", module:"play-services-vision"
          }
          implementation "com.google.android.gms:play-services-vision:16.2.0"
          implementation project(':react-native-vector-icons')
          implementation project(':react-native-device-info')
          implementation fileTree(dir: "libs", include: ["*.jar"])
          implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    
          // Firebase dependencies
          implementation "com.google.android.gms:play-services-base:16.0.1"
          implementation "com.google.android.gms:play-services-basement:16.0.1"
          implementation "com.google.firebase:firebase-core:16.0.4"
          implementation "com.google.firebase:firebase-messaging:17.3.4"
          implementation 'me.leolin:ShortcutBadger:1.1.21@aar'
          
          implementation "com.facebook.react:react-native:+"  // From node_modules
      }
    

12. Update android/..../MainApplication.java with this

      import android.app.Application;
      import android.content.Context;
      import android.support.multidex.MultiDex;
    
      import com.BV.LinearGradient.LinearGradientPackage;
      import com.brentvatne.react.ReactVideoPackage;
      import com.facebook.react.ReactApplication;
      import com.dylanvann.fastimage.FastImageViewPackage;
      import com.inprogress.reactnativeyoutube.ReactNativeYouTube;
      import com.horcrux.svg.SvgPackage;
      import io.invertase.firebase.RNFirebasePackage;
      import com.facebook.react.ReactNativeHost;
      import com.facebook.react.ReactPackage;
      import com.facebook.react.shell.MainReactPackage;
      import com.facebook.soloader.SoLoader;
      import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
      import com.github.yamill.orientation.OrientationPackage;
      import com.imagepicker.ImagePickerPackage;
      import com.learnium.RNDeviceInfo.RNDeviceInfo;
      import com.oblador.vectoricons.VectorIconsPackage;
      import com.rnfs.RNFSPackage;
      import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
      import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
      import io.invertase.firebase.fabric.crashlytics.RNFirebaseCrashlyticsPackage;
    
      import org.reactnative.camera.RNCameraPackage;
      import com.RNFetchBlob.RNFetchBlobPackage;
      import org.wonday.pdf.RCTPdfView;
    
      import java.util.Arrays;
      import java.util.List;
    
      import com.project_name.BuildConfig;
      import me.hauvo.thumbnail.RNThumbnailPackage;
    
      public class MainApplication extends Application implements ReactApplication {
    
        protected void attachBaseContext(Context base) {
          super.attachBaseContext(base);
          MultiDex.install(this);
        }
    
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
          @Override
          public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
          }
    
          @Override
          protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                  new FastImageViewPackage(), new ReactNativeYouTube(),
                new WebViewBridgePackage(), new LinearGradientPackage(),
                new RNThumbnailPackage(), new RNFSPackage(), new OrientationPackage(),
                new ReactVideoPackage(), new ImagePickerPackage(),
                new RNCameraPackage(), new VectorIconsPackage(), new RNDeviceInfo(),
                new RNFirebasePackage(), new RNFirebaseMessagingPackage(),
                new RNFetchBlobPackage(), new RCTPdfView(),
                new RNFirebaseNotificationsPackage(), new SvgPackage(),
                new RNFirebaseCrashlyticsPackage());
          }
    
          @Override
          protected String getJSMainModuleName() {
            return "index";
          }
        };
    
        @Override
        public ReactNativeHost getReactNativeHost() {
          return mReactNativeHost;
        }
    
        @Override
        public void onCreate() {
          super.onCreate();
          SoLoader.init(this, /* native exopackage */ false);
        }
      }
    
    

Usage

import App from 'rn-codemi-learning'


...

render () {
  return <App config={{
    domain: 'frontend.devel.pawonmburi.com',
    token: 'some random token'
  }}>
}

...

Properties

Contribute

Since symlink support is still lacking on React Native, I use the wml cli tool created by the nice folks at wix.

wml add /path/to/this/library/rn-codemi-learning /path/to/another/rn/project/Example/node_modules/rn-codemi-learning

Sample

wml add ~/Workspace/npm/rn-codemi-learning ~/Workspace/react-native/jm-click/node_modules/rn-codemi-learning

wml start

This script will watch your changes and automatically copy all files changed to project node modules directory.