# 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](https://github.com/facebook/react-native/issues/637) on React Native, I use the [wml](https://github.com/wix/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.