scandy-core-rn's Introduction

scandy-core-rn

This is a React Native interface for Scandy Core

Installation and How to use

Step 1 - NPM Install

npm install --save scandy-core-rn

Step 2 - Update Gradle Settings

// file: android/settings.gradle
...

include ':scandy-core-rn', ':app'
project(':scandy-core-rn').projectDir = new File(rootProject.projectDir, '../libs/scandy-core/android')

Step 3 - Update app Gradle Build

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':scandy-core-rn')
}

Step 4 - Register React Package

// file: android/app/source/main/java/com/{projectName}.MainApplication.java
...
import co.scandy.scandycore.RNScandyCorePackage; // import

public class MainApplication extends Application implements ReactApplication {
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new RNScandyCorePackage()
          , new MainReactPackage()
      );
    }
...

Step 5 - Require and use in Javascript

// file: index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import ScandyCoreVisualizer from 'scandy-core';

export default class ReactNativeDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScandyCoreVisualizer.ScandyCoreVisualizerInterface
          style={styles.scandycore}
          >
        </ScandyCoreVisualizer.ScandyCoreVisualizerInterface>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  scandycore: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff0000',
  },
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);