feat: add separate option to generate view modules

src/create.ts

@@ -13,14 +13,41 @@ import pack from '../package.json';
 const BINARIES = /(gradlew|\.(jar|keystore|png|jpg|gif))$/;
 
 const COMMON_FILES = path.resolve(__dirname, '../templates/common');
-const NATIVE_FILES = path.resolve(__dirname, '../templates/native-library');
 const JS_FILES = path.resolve(__dirname, '../templates/js-library');
 const EXPO_FILES = path.resolve(__dirname, '../templates/expo-library');
 const CPP_FILES = path.resolve(__dirname, '../templates/cpp-library');
-const OBJC_FILES = path.resolve(__dirname, '../templates/objc-library');
-const SWIFT_FILES = path.resolve(__dirname, '../templates/swift-library');
 const EXAMPLE_FILES = path.resolve(__dirname, '../templates/example');
 
+// Android
+const NATIVE_FILES = (moduleType: ModuleType) => {
+ switch (moduleType) {
+ case 'module':
+ return path.resolve(__dirname, '../templates/native-library');
+ case 'view':
+ return path.resolve(__dirname, '../templates/native-view-library');
+ }
+};
+
+// Objc
+const OBJC_FILES = (moduleType: ModuleType) => {
+ switch (moduleType) {
+ case 'module':
+ return path.resolve(__dirname, '../templates/objc-library');
+ case 'view':
+ return path.resolve(__dirname, '../templates/objc-view-library');
+ }
+};
+
+// Swift
+const SWIFT_FILES = (moduleType: ModuleType) => {
+ switch (moduleType) {
+ case 'module':
+ return path.resolve(__dirname, '../templates/swift-library');
+ case 'view':
+ return path.resolve(__dirname, '../templates/swift-view-library');
+ }
+};
+
 type ArgName =
  | 'slug'
  | 'description'
@@ -30,14 +57,25 @@ type ArgName =
  | 'repo-url'
  | 'type';
 
+type ModuleType = 'module' | 'view';
+
+type LibraryType =
+ | 'native-view'
+ | 'native-view-swift'
+ | 'native'
+ | 'native-swift'
+ | 'js'
+ | 'cpp'
+ | 'expo';
+
 type Answers = {
  slug: string;
  description: string;
  authorName: string;
  authorEmail: string;
  authorUrl: string;
  repoUrl: string;
- type: 'native' | 'native-swift' | 'js' | 'cpp' | 'expo';
+ type: LibraryType;
 };
 
 export const args: Record<ArgName, yargs.Options> = {
@@ -168,6 +206,8 @@ export default async function create(argv: yargs.Arguments<any>) {
  message: 'What type of package do you want to develop?',
  // @ts-ignore - seems types are wrong for inquirer
  choices: [
+ { name: 'Native view in Kotlin and Objective-C', value: 'native-view' },
+ { name: 'Native view in Kotlin and Swift', value: 'native-view-swift' },
  { name: 'Native module in Kotlin and Objective-C', value: 'native' },
  { name: 'Native module in Kotlin and Swift', value: 'native-swift' },
  { name: 'Native module with C++ code', value: 'cpp' },
@@ -211,6 +251,8 @@ export default async function create(argv: yargs.Arguments<any>) {
  } as Answers;
 
  const project = slug.replace(/^(react-native-|@[^/]+\/)/, '');
+ const moduleType: ModuleType =
+ type === 'native-view' || type === 'native-view-swift' ? 'view' : 'module';
 
  const options = {
  bob: {
@@ -226,10 +268,16 @@ export default async function create(argv: yargs.Arguments<any>) {
  .slice(1)}`,
  package: slug.replace(/[^a-z0-9]/g, '').toLowerCase(),
  podspec: slug.replace(/[^a-z0-9]+/g, '-').replace(/^-/, ''),
- native: type === 'native' || type === 'cpp' || 'native-swift',
+ native:
+ type === 'native' ||
+ type === 'cpp' ||
+ 'native-swift' ||
+ 'native-view' ||
+ 'native-view-swift',
  cpp: type === 'cpp',
- swift: type === 'native-swift',
+ swift: type === 'native-swift' || 'native-view-swift',
  module: type !== 'js',
+ moduleType,
  },
  author: {
  name: authorName,
@@ -284,14 +332,15 @@ export default async function create(argv: yargs.Arguments<any>) {
  path.join(EXAMPLE_FILES, 'example'),
  path.join(folder, 'example')
  );
- await copyDir(NATIVE_FILES, folder);
+
+ await copyDir(NATIVE_FILES(moduleType), folder);
 
  if (type === 'cpp') {
  await copyDir(CPP_FILES, folder);
  } else if (type === 'native-swift') {
- await copyDir(SWIFT_FILES, folder);
+ await copyDir(SWIFT_FILES(moduleType), folder);
  } else {
- await copyDir(OBJC_FILES, folder);
+ await copyDir(OBJC_FILES(moduleType), folder);
  }
  }
 

templates/common/example/src/App.tsx

@@ -1,7 +1,21 @@
 import * as React from 'react';
+<% if (project.moduleType === "view") { %>
+import { StyleSheet, View } from 'react-native';
+import <%= project.name %>ViewManager from '<%= project.slug %>';
+<% } else {%>
 import { StyleSheet, View, Text } from 'react-native';
-import <%= project.name %>, { <%= project.name %>ViewManager } from '<%= project.slug %>';
+import <%= project.name %> from '<%= project.slug %>';
+<% }%>
 
+<% if (project.moduleType === "view") { %>
+export default function App() {
+ return (
+ <View style={styles.container}>
+ <<%= project.name %>ViewManager color="#32a852" style={styles.box} />
+ </View>
+ );
+}
+<% } else {%>
 export default function App() {
  const [result, setResult] = React.useState<number | undefined>();
 
@@ -12,10 +26,10 @@ export default function App() {
  return (
  <View style={styles.container}>
  <Text>Result: {result}</Text>
- <<%= project.name %>ViewManager color="#32a852" style={styles.box} />
  </View>
  );
-}
+} 
+<% }%>
 
 const styles = StyleSheet.create({
  container: {
@@ -28,4 +42,4 @@ const styles = StyleSheet.create({
  height: 60,
  marginVertical: 20,
  },
-});
+});

templates/native-library/android/src/main/java/com/{%= project.package %}/{%= project.name %}Package.kt

@@ -12,6 +12,6 @@ class <%= project.name %>Package : ReactPackage {
  }
 
  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
- return listOf(<%= project.name %>ViewManager())
+ return emptyList()
  }
 }

templates/native-library/src/index.tsx

@@ -1,18 +1,9 @@
-import { NativeModules, requireNativeComponent, ViewStyle } from 'react-native';
+import { NativeModules } from 'react-native';
 
 type <%= project.name %>Type = {
  multiply(a: number, b: number): Promise<number>;
 };
 
-type <%= project.name %>Props = {
- color: string;
- style: ViewStyle;
-};
-
 const { <%= project.name %> } = NativeModules;
 
-export const <%= project.name %>ViewManager = requireNativeComponent<<%= project.name %>Props>(
- '<%= project.name %>View'
-);
-
 export default <%= project.name %> as <%= project.name %>Type;

templates/native-view-library/android/build.gradle

@@ -0,0 +1,143 @@
+buildscript {
+ // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+ def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['<%= project.name %>_kotlinVersion']
+
+ repositories {
+ google()
+ jcenter()
+ }
+
+ dependencies {
+ classpath 'com.android.tools.build:gradle:3.2.1'
+ // noinspection DifferentKotlinGradleVersion
+ classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+ }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+def getExtOrDefault(name) {
+ return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['<%= project.name %>_' + name]
+}
+
+def getExtOrIntegerDefault(name) {
+ return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['<%= project.name %>_' + name]).toInteger()
+}
+
+android {
+ compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
+ buildToolsVersion getExtOrDefault('buildToolsVersion')
+ defaultConfig {
+ minSdkVersion 16
+ targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
+ versionCode 1
+ versionName "1.0"
+ <% if (project.cpp) {%>
+ externalNativeBuild {
+ cmake {
+ cppFlags "-O2 -frtti -fexceptions -Wall -fstack-protector-all"
+ abiFilters 'x86', 'x86_64', 'armeabi-v7a', 'arm64-v8a'
+ }
+ }
+ <% } %>
+ }
+ <% if (project.cpp) {%>
+ externalNativeBuild {
+ cmake {
+ path "CMakeLists.txt"
+ }
+ }
+ <% } %>
+ buildTypes {
+ release {
+ minifyEnabled false
+ }
+ }
+ lintOptions {
+ disable 'GradleCompatible'
+ }
+ compileOptions {
+ sourceCompatibility JavaVersion.VERSION_1_8
+ targetCompatibility JavaVersion.VERSION_1_8
+ }
+}
+
+repositories {
+ mavenCentral()
+ jcenter()
+ google()
+
+ def found = false
+ def defaultDir = null
+ def androidSourcesName = 'React Native sources'
+
+ if (rootProject.ext.has('reactNativeAndroidRoot')) {
+ defaultDir = rootProject.ext.get('reactNativeAndroidRoot')
+ } else {
+ defaultDir = new File(
+ projectDir,
+ '/../../../node_modules/react-native/android'
+ )
+ }
+
+ if (defaultDir.exists()) {
+ maven {
+ url defaultDir.toString()
+ name androidSourcesName
+ }
+
+ logger.info(":${project.name}:reactNativeAndroidRoot ${defaultDir.canonicalPath}")
+ found = true
+ } else {
+ def parentDir = rootProject.projectDir
+
+ 1.upto(5, {
+ if (found) return true
+ parentDir = parentDir.parentFile
+
+ def androidSourcesDir = new File(
+ parentDir,
+ 'node_modules/react-native'
+ )
+
+ def androidPrebuiltBinaryDir = new File(
+ parentDir,
+ 'node_modules/react-native/android'
+ )
+
+ if (androidPrebuiltBinaryDir.exists()) {
+ maven {
+ url androidPrebuiltBinaryDir.toString()
+ name androidSourcesName
+ }
+
+ logger.info(":${project.name}:reactNativeAndroidRoot ${androidPrebuiltBinaryDir.canonicalPath}")
+ found = true
+ } else if (androidSourcesDir.exists()) {
+ maven {
+ url androidSourcesDir.toString()
+ name androidSourcesName
+ }
+
+ logger.info(":${project.name}:reactNativeAndroidRoot ${androidSourcesDir.canonicalPath}")
+ found = true
+ }
+ })
+ }
+
+ if (!found) {
+ throw new GradleException(
+ "${project.name}: unable to locate React Native android sources. " +
+ "Ensure you have you installed React Native as a dependency in your project and try again."
+ )
+ }
+}
+
+def kotlin_version = getExtOrDefault('kotlinVersion')
+
+dependencies {
+ // noinspection GradleDynamicVersion
+ api 'com.facebook.react:react-native:+'
+ implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

templates/native-view-library/android/gradle.properties

@@ -0,0 +1,4 @@
+<%= project.name %>_kotlinVersion=1.3.50
+<%= project.name %>_compileSdkVersion=28
+<%= project.name %>_buildToolsVersion=28.0.3
+<%= project.name %>_targetSdkVersion=28

templates/native-view-library/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+ package="com.<%= project.package %>">
+
+</manifest>

templates/native-view-library/android/src/main/java/com/{%= project.package %}/{%= project.name %}Package.kt

@@ -0,0 +1,17 @@
+package com.<%= project.package %>
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+
+class <%= project.name %>Package : ReactPackage {
+ override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+ return emptyList()
+ }
+
+ override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+ return listOf(<%= project.name %>ViewManager())
+ }
+}