# react-native-kite

> Kite.ly module integration from iOS (https://github.com/OceanLabs/iOS-Print-SDK) and Android (https://github.com/OceanLabs/Android-Print-SDK) SDKs

Latest version **0.0.5** (published 2018-06-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-kite
pnpm add react-native-kite
yarn add react-native-kite
bun add react-native-kite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-06-06 |
| First published | 2018-04-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lucas Rocali |
| Maintainers | lucasappress |

## Links

- npm: https://www.npmjs.com/package/react-native-kite
- Homepage: https://www.npmjs.com/package/react-native-kite
- npm.io page: https://npm.io/package/react-native-kite

## Recent versions

- 0.0.5 (latest) — 2018-06-06
- 0.0.4 — 2018-04-30
- 0.0.3 — 2018-04-25
- 0.0.2 — 2018-04-19
- 0.0.1 — 2018-04-19

## README

# 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

---
_Source: https://npm.io/package/react-native-kite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._