native view option on Android & iOS

Author: Christopher J. Brody

README.md

@@ -1,6 +1,6 @@
 # create-react-native-module
 
-Tool to create a React Native library module with a single command (based on [`react-native-create-library`](https://www.npmjs.com/package/react-native-create-library))
+Tool to create a React Native library module, optionally as an extremely simple view component, with a single command (based on [`react-native-create-library`](https://www.npmjs.com/package/react-native-create-library))
 
 <!-- GONE:
 ![](https://github.com/frostney/react-native-create-library/blob/master/docs/usage.gif)
@@ -15,8 +15,6 @@ If you are looking to create a native module for React Native, you need some nat
 This is where this tool comes in. It creates a boilerplate with all current best practices in mind.
 Why not use `react-native new-library`? Unfortunately that command doesn't create an up-to-date library, requires an already initialized React Native project and only sets up the iOS side of things.
 
-Caution: This only creates native modules without a view component.
-
 ### Alternatives
 
 - [`react-native-create-library`](https://www.npmjs.com/package/react-native-create-library)
@@ -58,6 +56,7 @@ Options:
   --author-name <name>                      The author's name (Default: `Your Name`)
   --author-email <email>                    The author's email (Default: `yourname@email.com`)
   --license <license>                       The license type of this library (Default: `Apache-2.0`)
+  --view                                    Generate the module as a very simple native view component (Default: `false`)
   --generate-example <shouldGenerate>       Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally (Default: `false`)
 ```
 
@@ -86,6 +85,7 @@ createLibrary({
   authorName: String, /* The author's name (Default: `Your Name`) */
   authorEmail: String, /* The author's email (Default: `yourname@email.com`) */
   license: String, /* The license type of this library (Default: `Apache-2.0`) */
+  view: Boolean, /* Generate the module as a very simple native view component (Default: `false`) */
   generateExample: Boolean, /* Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally (Default: `false`) */
 }
 ```

command.js

@@ -17,6 +17,7 @@ module.exports = {
     const authorName = options.authorName;
     const authorEmail = options.authorEmail;
     const license = options.license;
+    const view = options.view;
     const generateExample = options.generateExample;
 
     const beforeCreation = Date.now();
@@ -31,6 +32,7 @@ module.exports = {
       authorName,
       authorEmail,
       license,
+      view,
       generateExample,
     }).then(() => {
       console.log(`
@@ -80,6 +82,9 @@ ${emoji.get('arrow_right')}  To get started type \`cd ./${name}\` and run \`npm
     command: '--license [license]',
     description: 'The license type (Default: `Apache-2.0`)',
     default: 'Apache-2.0',
+  }, {
+    command: '--view',
+    description: 'Generate the module as a very simple native view component (Default: `false`)',
   }, {
     command: '--generate-example',
     description: 'Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally (Default: `false`)',

lib.js

@@ -45,6 +45,7 @@ module.exports = ({
   authorName = DEFAULT_AUTHOR_NAME,
   authorEmail = DEFAULT_AUTHOR_EMAIL,
   license = DEFAULT_LICENSE,
+  view = false,
   generateExample = DEFAULT_GENERATE_EXAMPLE,
 }) => {
   if (!overridePrefix) {
@@ -119,6 +120,7 @@ module.exports = ({
           authorName,
           authorEmail,
           license,
+          view,
           generateExample,
         };
 
@@ -140,6 +142,7 @@ module.exports = ({
           const templateArgs = {
             name: className,
             moduleName,
+            view,
           };
 
           return Promise.all(

templates/android.js

@@ -133,9 +133,13 @@ afterEvaluate { project ->
 </manifest>
 `,
 }, {
-  name: ({ packageIdentifier, name }) =>
-    `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Module.java`,
-  content: ({ packageIdentifier, name }) => `package ${packageIdentifier};
+  // for module without view:
+  name: ({ packageIdentifier, name, view }) =>
+    !view &&
+      `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Module.java`,
+  content: ({ packageIdentifier, name, view }) =>
+    !view &&
+      `package ${packageIdentifier};
 
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
@@ -164,9 +168,47 @@ public class ${name}Module extends ReactContextBaseJavaModule {
 }
 `,
 }, {
-  name: ({ packageIdentifier, name }) =>
-    `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Package.java`,
-  content: ({ packageIdentifier, name }) => `package ${packageIdentifier};
+  // manager for view:
+  name: ({ packageIdentifier, name, view }) =>
+    view &&
+      `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Manager.java`,
+  content: ({ packageIdentifier, name, view }) =>
+    view &&
+      `package ${packageIdentifier};
+
+import android.view.View;
+
+import android.support.v7.widget.AppCompatCheckBox;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+public class ${name}Manager extends SimpleViewManager<View> {
+
+    public static final String REACT_CLASS = "${name}";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    public View createViewInstance(ThemedReactContext c) {
+        // TODO: Implement some real useful functionality
+        AppCompatCheckBox cb = new AppCompatCheckBox(c);
+        cb.setChecked(true);
+        return cb;
+    }
+}
+`,
+}, {
+  // package for module without view:
+  name: ({ packageIdentifier, name, view }) =>
+    !view &&
+      `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Package.java`,
+  content: ({ packageIdentifier, name, view }) =>
+    !view &&
+      `package ${packageIdentifier};
 
 import java.util.Arrays;
 import java.util.Collections;
@@ -190,6 +232,38 @@ public class ${name}Package implements ReactPackage {
     }
 }
 `,
+}, {
+  // package for manager for view:
+  name: ({ packageIdentifier, name, view }) =>
+    view &&
+      `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Package.java`,
+  content: ({ packageIdentifier, name, view }) =>
+    view &&
+      `package ${packageIdentifier};
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.bridge.JavaScriptModule;
+
+public class ${name}Package implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Arrays.<ViewManager>asList(new ${name}Manager());
+    }
+}
+`,
+}, {
 }, {
   name: () => `${platform}/README.md`,
   content: () => `README

templates/example.js

@@ -117,7 +117,7 @@ module.exports = [{
 `
 }, {
   name: () => 'example/App.js',
-  content: ({ moduleName, name }) =>
+  content: ({ moduleName, name, view }) =>
 `/**
  * Sample React Native App
  *
@@ -130,7 +130,9 @@ module.exports = [{
 
 import React, { Component } from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
-import ${name} from '${moduleName}';
+import ${name} from '${moduleName}';` +
+    (!view
+      ?  `
 
 export default class App extends Component<{}> {
   state = {
@@ -155,7 +157,22 @@ export default class App extends Component<{}> {
       </View>
     );
   }
-}
+}`
+      :  `
+
+export default class App extends Component<{}> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>☆${name} example☆</Text>
+        <Text style={styles.instructions}>STATUS: loaded</Text>
+        <Text style={styles.welcome}>☆☆☆</Text>
+        <${name} />
+      </View>
+    );
+  }
+}`) +
+      `
 
 const styles = StyleSheet.create({
   container: {

templates/general.js

@@ -112,11 +112,21 @@ ${name};
 `;
   },
 }, {
-  name: () => 'index.js',
+  // for module without view:
+  name: ({ view }) => !view && 'index.js',
   content: ({ name }) =>`import { NativeModules } from 'react-native';
 
 const { ${name} } = NativeModules;
 
+export default ${name};
+`,
+}, {
+  // for module with view:
+  name: ({ view }) => view && 'index.js',
+  content: ({ name }) =>`import { requireNativeComponent } from 'react-native';
+
+const ${name} = requireNativeComponent('${name}', null);
+
 export default ${name};
 `,
 }, {

templates/ios.js

@@ -29,15 +29,17 @@ end
 
 `,
 }, {
-  name: ({ name }) => `${platform}/${name}.h`,
+  // header for module without view:
+  name: ({ name, view }) => !view && `${platform}/${name}.h`,
   content: ({ name }) => `#import <React/RCTBridgeModule.h>
 
 @interface ${name} : NSObject <RCTBridgeModule>
 
 @end
 `,
 }, {
-  name: ({ name }) => `${platform}/${name}.m`,
+  // implementation of module without view:
+  name: ({ name, view }) => !view && `${platform}/${name}.m`,
   content: ({ name }) => `#import "${name}.h"
 
 @implementation ${name}
@@ -50,6 +52,38 @@ RCT_EXPORT_METHOD(sampleMethod:(NSString *)stringArgument numberParameter:(nonnu
     callback(@[[NSString stringWithFormat: @"numberArgument: %@ stringArgument: %@", numberArgument, stringArgument]]);
 }
 
+@end
+`,
+}, {
+  // header for module with view:
+  name: ({ name, view }) => view && `${platform}/${name}.h`,
+  content: ({ name }) => `#import <React/RCTViewManager.h>
+
+@interface ${name} : RCTViewManager
+
+@end
+`,
+}, {
+  // implementation of module with view:
+  name: ({ name, view }) => view && `${platform}/${name}.m`,
+  content: ({ name }) => `#import "${name}.h"
+
+@implementation ${name}
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+    // TODO: Implement some real useful functionality
+    UILabel * label = [[UILabel alloc] init];
+    [label setTextColor:[UIColor redColor]];
+    [label setText: @"*****"];
+    [label sizeToFit];
+    UIView * wrapper = [[UIView alloc] init];
+    [wrapper addSubview:label];
+    return wrapper;
+}
+
 @end
 `,
 }, {