react-native-kite v0.0.5

react-native-kite

Steps

1. npm install --save react-native-kite or yarn add react-native-kite --save
2. react-native link
3. cd ios
4. pod init
5. Add to Podfile

  # Pods for Sample
  ...
  pod 'react-native-kite', path: '../node_modules/react-native-kite/'

6. pod install
7. Add to info.plist

  <key>NSCameraUsageDescription</key>
  <string>Pick Image to create product!</string>


  <key>NSPhotoLibraryUsageDescription</key>
  <string>Pick Image to create product!</string>

Android

react-native-link should do all you need, if not follow th Manual Link

Manual link

In /android/settings.gradle, add the following code:

include ':react-native-kite'
project(':react-native-kite').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-kite/android')

In /android/app/build.gradle, add the following code inside dependencies:

compile project(':react-native-kite')

Int android/app/src/main/java/.../MainActivity.java

import com.rnkite.RNKitePackage;

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            ...
            new RNKitePackage()
      );
    }

Possible issue

...Sample/android/app/build/intermediates/res/merged/debug/values-v24/values-v24.xml:3: AAPT: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'.

...

• Solution

On build.gradle changes the compile to 24

android {
    compileSdkVersion 24
    ....
}

iOS

react-native-link and the steps should do all you need, if not follow the Manual Link

Manual Link

• Open your project generated on Pod my-project.xcworkspace
• On Library right-clik and select Add files to My-Project
• Select RNKite.xcodeproj on ../node_modules/react-native-kite/ios
• On Targets > Your-Project > General > Linked Frameworks and Libraries
• Add + and Select libRNKite.a

Methods

    initWithApiKey: (apiKey) => {
        return RNKite.initWithApiKey(apiKey,"",[]);
    },
    initWithApiKeyAndAssets: (apiKey,groupName,assets) => {
        return RNKite.initWithApiKey(apiKey,groupName,assets);
    }

Creating the module and integrate to SDK

Motivation

Crate and bridge module to integrate the native modules of yout ReacNativeSDK to React Native

Steps to create the module

• mkdir react-native-awesome
• cd react-native-awesome && npm init
• Fill the questions of package name, description, etc
• It will generate the package.json

{
  "name": "react-native-awesome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Lucas Rocali",
  "license": "ISC"
}

Creating android module

• Create the android folder mkdir android

android
-- build.gradle
-- src
---- main
------ AndroidManifest.xml
------ java
-------- com
---------- rnawesome
------------ RNAwesomeModule.java
------------ RNAwesomePackage.java

• build.gradle should be similar to:

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.3'
    }
}


apply plugin: 'com.android.library'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.3"

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
    }
}

repositories {
    mavenCentral()
}

dependencies {
    compile "com.facebook.react:react-native:+"
    compile 'com.android.support:appcompat-v7:25.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'some-awesome-sdk:1.+'
}

• AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rnawesomemodule"  android:installLocation="preferExternal">
</manifest>

• RNAwesomeModule.java

package com.rnkite;

import com.AwesomeSDK
...

public class RNAwesomeModule extends ReactContextBaseJavaModule {

    private final ReactApplicationContext reactContext;

    public RNAwesomeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "RNAwesome";
    }

    @ReactMethod
    public void myAwesomeMethod(String foo, String bar, final Promise promise) {

        AwesomeSDK awesomeSDK = AwesomeSDK();

        awesomeSDK.someMethod();

        ...

        promise.resolve(true)
    }

}

• RNAwesomePackage.java

public class RNAwesomePackage implements ReactPackage {

    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new RNAwesomePackage(reactContext));

        return modules;
    }
}

• Open the project (android file) in Android Studio and Sync the Project
• It may be some issues related to sync the version of sdk, with the version you are building the project
• Once the project is built successfully the android module it's done

Creating iOS module

• On xCode: File > New > Project
• Select Cocoa Touch Static Library
• Select the name of the project to the same name of yout project module in Android name RNAwesome
• Select to create the folder on your react-native-awesome directory
• Changes the name of the folder to ios
• The folder should have

ios
-- RNAwesome
---- RNAwesome.h
---- RNAwesome.m
-- RNAwesome.xcodeproj

• RNAwesome.h update to

#import <React/RCTBridgeModule.h>
#import <MyAwesomeSDK.h>

@interface RNAwesome : NSObject <RCTBridgeModule>

@end

• RNAwesome.m update to

#import "RNAwesome.h"
#import <React/RCTConvert.h>

@implementation RNAwesome

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(myAwesomeMethod: (NSString *)foo bar: (NSString *)bar resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{

      [MyAwesomeSDK myAwesomeSDKMethod];

      ...

      resolve(@YES);

}
@end

• Don't worry about building this project or integrate the SDK now, it will be integrate later to the project that uses this module
• Most Important -- Open RNAwesome.xcodeproject Go to Targets > RNAwesome > BuildSettings -- Search for Framework Search Paths and includes on +

$(inherited)                                    non-recursive
$(PROJECT_DIR)                                  non-recursive
$(PROJECT_DIR)/../../../ios/Frameworks          recursive
$(PROJECT_DIR)/../../../ios/Pods                recursive

-- Search for Header Search Paths and includes on +

$(inherited)                                            non-recursive
${SRCROOT}/../../../ios/Pods/MyAwesomeSDK/Awesome-SDK   recursive

• To include your AwesomeSDK via Pod you should create a react-native-awesome.podspec to the root of yout directory
• react-native-awesome.podspec

require 'json'

package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

Pod::Spec.new do |s|
  s.name           = 'react-native-awesome'
  s.version        = package['version']
  s.summary        = package['description']
  s.description    = package['description']
  s.license        = package['license']
  s.author         = package['author']
  s.homepage       = package['homepage']
  s.source         = { git: 'https://your-git-repository.com/react-native-awesome' }

  s.requires_arc   = true
  s.platform       = :ios, '8.0'

  s.preserve_paths = 'LICENSE', 'README.md', 'package.json', 'index.js'
  s.source_files   = 'ios/*.{h,m}'

  s.dependency 'React'
  s.dependency 'MyAwesomeSDK'
end

Your android and ios modules should be done for now

Exporting your module

Create an index.js at the root of your project

You can directly export your module

import { NativeModules } from 'react-native';

const { RNAwesome } = NativeModules;

const Awesome = {
    ...RNAwesome,
    myAwesomeMethod: (foo) => {
        return RNAwesome.myAwesomeMethod(foo,"default_bar");
    },
    myAwesomeMethodWithBar: (foo,bar) => {
        return RNKite.myAwesomeMethod(foo,bar);
    },
    
}

export { Awesome };

Integration

On your project 1. npm install --save https://your-git-repository.com/react-native-awesome.git 2. react-native link 3. cd ios 4. pod init 5. Add to Podfile

  # Pods for Sample
  ...
  pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/yoga.podspec'
  pod 'React', path: '../node_modules/react-native', :subspecs => [
  'DevSupport',
  'ART',
  'Core',
  'RCTActionSheet',
  'RCTGeolocation',
  'RCTImage',
  'RCTLinkingIOS',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  'RCTVibration',
  'RCTWebSocket']
  pod 'react-native-kite', path: '../node_modules/react-native-awesome/'

react-native link and opening the .xcworkspace generated by Pod on iOS should do all the work for you, if not you can manually integrate the module