feat(splitting): split ui components into their own templates

templates/android-kotlin/TemplatePackage.kt → templates/combined/android-kotlin/TemplatePackage.kt

@@ -13,8 +13,8 @@ import java.util.Arrays
 class {{template}}Package : ReactPackage {
 
     override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-      // Register your native module
-      // https://facebook.github.io/react-native/docs/native-modules-android.html#register-the-module
+        // Register your native module
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#register-the-module
         return Arrays.asList<NativeModule>(
             {{template}}Module(reactContext)
         )

templates/ios-objc/TemplateManager.m → templates/combined/ios-objc/TemplateManager.m

@@ -27,6 +27,8 @@ @implementation {{template}}
 // https://facebook.github.io/react-native/docs/native-modules-ios.html
 RCT_EXPORT_MODULE();
 
+// Export constants
+// https://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#exporting-constants
 - (NSDictionary *)constantsToExport
 {
   return @{

templates/combined/ios-swift/Template-Bridging-Header.h

@@ -0,0 +1,12 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//
+
+// import RCTViewManager
+#if __has_include(<React/RCTViewManager.h>)
+#import <React/RCTViewManager.h>
+#elif __has_include(“RCTViewManager.h”)
+#import “RCTViewManager.h”
+#else
+#import “React/RCTViewManager.h” // Required when used as a Pod in a Swift project
+#endif

templates/js/TemplateNativeView.js → templates/combined/js/TemplateNativeView.js

@@ -3,9 +3,9 @@
 import React, { Component } from 'react'
 import { requireNativeComponent } from 'react-native'
 
-const {{template}} = requireNativeComponent('{{template}}', null)
+const {{template}} = requireNativeComponent('{{template}}', {{template}}View)
 
-class {{template}}View extends Component {
+export default class {{template}}View extends Component {
   render () {
     return <{{template}} {...this.props} />
   }
@@ -14,5 +14,3 @@ class {{template}}View extends Component {
 {{template}}View.propTypes = {
   exampleProp: React.PropTypes.any
 }
-
-export default {{template}}View

templates/modules/android-java/TemplateModule.java

@@ -0,0 +1,56 @@
+//  Created by react-native-create-bridge
+
+package com.{{app}}.{{packageName}};
+
+import android.support.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class {{template}}Module extends ReactContextBaseJavaModule {
+    public static final String REACT_CLASS = "{{template}}";
+    private static ReactApplicationContext reactContext = null;
+
+    public {{template}}Module(ReactApplicationContext context) {
+        // Pass in the context to the constructor and save it so you can emit events
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+        super(context);
+
+        reactContext = context;
+    }
+
+    @Override
+    public String getName() {
+        // Tell React the name of the module
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+        return REACT_CLASS;
+    }
+
+    @Override
+    public Map<String, Object> getConstants() {
+        // Export any constants to be used in your native module
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+        final Map<String, Object> constants = new HashMap<>();
+        constants.put("EXAMPLE_CONSTANT", "example");
+
+        return constants;
+    }
+
+    @ReactMethod
+    public void exampleMethod () {
+        // An example native method that you will expose to React
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+    }
+
+    private static void emitDeviceEvent(String eventName, @Nullable WritableMap eventData) {
+        // A method for emitting from the native side to JS
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript
+        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, eventData);
+    }
+}

templates/modules/android-java/TemplatePackage.java

@@ -0,0 +1,33 @@
+//  Created by react-native-create-bridge
+
+package com.{{app}}.{{packageName}};
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+public class {{template}}Package implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+      // Register your native module
+      // https://facebook.github.io/react-native/docs/native-modules-android.html#register-the-module
+      return Arrays.<NativeModule>asList(
+          new {{template}}Module(reactContext)
+      );
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

templates/modules/android-kotlin/TemplateModule.kt

@@ -0,0 +1,52 @@
+//  Created by react-native-create-bridge
+
+package com.{{app}}.{{packageName}}
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
+
+import java.util.Map
+
+class {{template}}Module(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+
+    init {
+        // Here we're saving the context we passed into the constructor to a variable so we can emit events
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+        reactContext = context
+    }
+
+    override fun getName(): String {
+        // Tell React the name of the module
+        // https://facebook.github.io/react-native/docs/native-components-android.html#1-create-the-viewmanager-subclass
+        return REACT_CLASS
+    }
+
+    override fun getConstants(): Map<String, Any>? {
+        // Export any constants to be used in your native module
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+        val reactConstants = Map<String, Any>()
+        constants.put("EXAMPLE_CONSTANT", "example")
+
+        return constants
+    }
+
+    @ReactMethod
+    fun exampleMethod () {
+        // An example native method that you will expose to React
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
+    }
+
+    companion object {
+        val REACT_CLASS = "{{template}}"
+        private var reactContext: ReactApplicationContext = null
+
+        private fun emitDeviceEvent(eventName: String, eventData: WritableMap?) {
+            // A method for emitting from the native side to JS
+            // https://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript
+            reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java).emit(eventName, eventData)
+        }
+    }
+}

templates/modules/android-kotlin/TemplatePackage.kt

@@ -0,0 +1,31 @@
+//  Created by react-native-create-bridge
+
+package com.{{app}}.{{packageName}}
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.JavaScriptModule
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+import java.util.Arrays
+
+class {{template}}Package : ReactPackage {
+
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        // Register your native module
+        // https://facebook.github.io/react-native/docs/native-modules-android.html#register-the-module
+        return Arrays.asList<NativeModule>(
+            {{template}}Module(reactContext)
+        )
+    }
+
+    override fun createJSModules(): List<Class<out JavaScriptModule>> {
+        return emptyList()
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return emptyList()
+    }
+
+}

templates/modules/ios-objc/Template.h

@@ -0,0 +1,14 @@
+//  Created by react-native-create-bridge
+
+// import RCTBridgeModule
+#if __has_include(<React/RCTBridgeModule.h>)
+#import <React/RCTBridgeModule.h>
+#elif __has_include(“RCTBridgeModule.h”)
+#import “RCTBridgeModule.h”
+#else
+#import “React/RCTBridgeModule.h” // Required when used as a Pod in a Swift project
+#endif
+
+@interface {{template}} : NSObject <RCTBridgeModule>
+  // Define class properties here with @property
+@end

templates/modules/ios-objc/TemplateManager.m

@@ -0,0 +1,55 @@
+//  Created by react-native-create-bridge
+
+#import "{{template}}.h"
+
+// import RCTBridge
+#if __has_include(<React/RCTBridge.h>)
+#import <React/RCTBridge.h>
+#elif __has_include(“RCTBridge.h”)
+#import “RCTBridge.h”
+#else
+#import “React/RCTBridge.h” // Required when used as a Pod in a Swift project
+#endif
+
+// import RCTEventDispatcher
+#if __has_include(<React/RCTEventDispatcher.h>)
+#import <React/RCTEventDispatcher.h>
+#elif __has_include(“RCTEventDispatcher.h”)
+#import “RCTEventDispatcher.h”
+#else
+#import “React/RCTEventDispatcher.h” // Required when used as a Pod in a Swift project
+#endif
+
+@implementation {{template}}
+@synthesize bridge = _bridge;
+
+// Export a native module
+// https://facebook.github.io/react-native/docs/native-modules-ios.html
+RCT_EXPORT_MODULE();
+
+// Export constants
+// https://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#exporting-constants
+- (NSDictionary *)constantsToExport
+{
+  return @{
+           @"EXAMPLE": @"example"
+         };
+}
+
+// Export methods to a native module
+// https://facebook.github.io/react-native/docs/native-modules-ios.html
+RCT_EXPORT_METHOD(exampleMethod)
+{
+  [self.emitMessageToRN:@"EXAMPLE_EVENT" :nil]
+}
+
+#pragma mark - Private methods
+
+// Implement methods that you want to export to the native module
+- (void) emitMessageToRN: (NSString *)eventName :(NSDictionary *)params {
+  // The bridge eventDispatcher is used to send events from native to JS env
+  // No documentation yet on DeviceEventEmitter: https://github.com/facebook/react-native/issues/2819
+  [self.bridge.eventDispatcher sendAppEventWithName: eventName body: params];
+}
+
+@end

templates/modules/js/TemplateNativeModule.js

@@ -0,0 +1,13 @@
+//  Created by react-native-create-bridge
+
+import { NativeModules } from 'react-native'
+
+const { {{template}} } = NativeModules
+
+export default {
+  exampleMethod () {
+    return {{template}}.exampleMethod()
+  },
+
+  EXAMPLE_CONSTANT: {{template}}.EXAMPLE_CONSTANT
+}

templates/ui-components/android-java/TemplateManager.java

@@ -0,0 +1,34 @@
+//  Created by react-native-create-bridge
+
+package com.{{app}}.{{packageName}};
+
+import android.view.View;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+public class {{template}}Manager extends SimpleViewManager<View> {
+    public static final String REACT_CLASS = "{{template}}";
+
+    @Override
+    public String getName() {
+        // Tell React the name of the module
+        // https://facebook.github.io/react-native/docs/native-components-android.html#1-create-the-viewmanager-subclass
+        return REACT_CLASS;
+    }
+
+    @Override
+    public View createViewInstance(ThemedReactContext context){
+        // Create a view here
+        // https://facebook.github.io/react-native/docs/native-components-android.html#2-implement-method-createviewinstance
+        return new View(context);
+    }
+
+    @ReactProp(name = "exampleProp")
+    public void setExampleProp(View view, String prop) {
+        // Set properties from React onto your native component
+        // https://facebook.github.io/react-native/docs/native-components-android.html#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation
+    }
+}

templates/ui-components/android-java/TemplatePackage.java

@@ -0,0 +1,33 @@
+//  Created by react-native-create-bridge
+
+package com.{{app}}.{{packageName}};
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+public class {{template}}Package implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        // Register your native component's view manager
+        // https://facebook.github.io/react-native/docs/native-components-android.html#4-register-the-viewmanager
+        return Arrays.<ViewManager>asList(
+            new {{template}}Manager()
+        );
+    }
+}