feat: print an error when library is not linked (#202)

We should show better error messages when the library is not linked than the cryptic `"BlaBlaView" was not found in the UIManager` or `Native module cannot be null` error messages.

Author: satya164

packages/create-react-native-library/src/index.ts

@@ -9,6 +9,8 @@ import validateNpmPackage from 'validate-npm-package-name';
 import githubUsername from 'github-username';
 import prompts, { PromptObject } from './utils/prompts';
 
+const FALLBACK_BOB_VERSION = '0.18.0';
+
 const BINARIES = /(gradlew|\.(jar|keystore|png|jpg|gif))$/;
 
 const COMMON_FILES = path.resolve(__dirname, '../templates/common');
@@ -21,46 +23,29 @@ const NATIVE_COMMON_FILES = path.resolve(
   '../templates/native-common'
 );
 
-const FALLBACK_BOB_VERSION = '0.18.0';
+const NATIVE_FILES = {
+  module: path.resolve(__dirname, '../templates/native-library'),
+  view: path.resolve(__dirname, '../templates/native-view-library'),
+};
 
-// Java
-const JAVA_FILES = (moduleType: ModuleType) => {
-  switch (moduleType) {
-    case 'module':
-      return path.resolve(__dirname, '../templates/java-library');
-    case 'view':
-      return path.resolve(__dirname, '../templates/java-view-library');
-  }
+const JAVA_FILES = {
+  module: path.resolve(__dirname, '../templates/java-library'),
+  view: path.resolve(__dirname, '../templates/java-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');
-  }
+const OBJC_FILES = {
+  module: path.resolve(__dirname, '../templates/objc-library'),
+  view: path.resolve(__dirname, '../templates/objc-view-library'),
 };
 
-// Kotlin
-const KOTLIN_FILES = (moduleType: ModuleType) => {
-  switch (moduleType) {
-    case 'module':
-      return path.resolve(__dirname, '../templates/kotlin-library');
-    case 'view':
-      return path.resolve(__dirname, '../templates/kotlin-view-library');
-  }
+const KOTLIN_FILES = {
+  module: path.resolve(__dirname, '../templates/kotlin-library'),
+  view: path.resolve(__dirname, '../templates/kotlin-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');
-  }
+const SWIFT_FILES = {
+  module: path.resolve(__dirname, '../templates/swift-library'),
+  view: path.resolve(__dirname, '../templates/swift-view-library'),
 };
 
 type ArgName =
@@ -74,8 +59,6 @@ type ArgName =
   | 'type'
   | 'example';
 
-type ModuleType = 'module' | 'view';
-
 type Answers = {
   slug: string;
   description: string;
@@ -416,23 +399,24 @@ async function create(argv: yargs.Arguments<any>) {
     );
 
     await copyDir(NATIVE_COMMON_FILES, folder);
+    await copyDir(NATIVE_FILES[type], folder);
 
     if (options.project.swift) {
-      await copyDir(SWIFT_FILES(type), folder);
+      await copyDir(SWIFT_FILES[type], folder);
     } else {
-      await copyDir(OBJC_FILES(type), folder);
+      await copyDir(OBJC_FILES[type], folder);
+    }
+
+    if (options.project.kotlin) {
+      await copyDir(KOTLIN_FILES[type], folder);
+    } else {
+      await copyDir(JAVA_FILES[type], folder);
     }
 
     if (options.project.cpp) {
       await copyDir(CPP_FILES, folder);
       await fs.remove(path.join(folder, 'ios', `${options.project.name}.m`));
     }
-
-    if (options.project.kotlin) {
-      await copyDir(KOTLIN_FILES(type), folder);
-    } else {
-      await copyDir(JAVA_FILES(type), folder);
-    }
   }
 
   try {

packages/create-react-native-library/templates/common/README.md

@@ -10,13 +10,23 @@ npm install <%- project.slug %>
 
 ## Usage
 
+<% if (project.moduleType === "view") { -%>
 ```js
-import <%- project.name %> from "<%- project.slug %>";
+import { <%- project.name %>View } from "<%- project.slug %>";
 
 // ...
 
-const result = await <%- project.name %>.multiply(3, 7);
+<<%- project.name %>View color="tomato" />
 ```
+<% } else { -%>
+```js
+import { multiply } from "<%- project.slug %>";
+
+// ...
+
+const result = await multiply(3, 7);
+```
+<% } -%>
 
 ## Contributing
 

packages/create-react-native-library/templates/common/example/src/App.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 
 <% if (project.moduleType === "view") { -%>
 import { StyleSheet, View } from 'react-native';
-import <%- project.name %>ViewManager from '<%- project.slug %>';
+import { <%- project.name %>View } from '<%- project.slug %>';
 <% } else { -%>
 import { StyleSheet, View, Text } from 'react-native';
-import <%- project.name %> from '<%- project.slug %>';
+import { multiply } from '<%- project.slug %>';
 <% } -%>
 
 <% if (project.moduleType === "view") { -%>
@@ -21,7 +21,7 @@ export default function App() {
   const [result, setResult] = React.useState<number | undefined>();
 
   React.useEffect(() => {
-    <%- project.name %>.multiply(3, 7).then(setResult);
+    multiply(3, 7).then(setResult);
   }, []);
 
   return (

packages/create-react-native-library/templates/js-library/src/index.tsx

@@ -1,5 +1,3 @@
-export default {
-  multiply(a: number, b: number) {
-    return Promise.resolve(a * b);
-  },
-};
+export function multiply(a: number, b: number): Promise<number> {
+  return Promise.resolve(a * b);
+}

packages/create-react-native-library/templates/native-common/src/index.tsx

@@ -0,0 +1,22 @@
+import { NativeModules, Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package '<%- project.slug %>' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+const <%- project.name %> = NativeModules.<%- project.name %>
+  ? NativeModules.<%- project.name %>
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export function multiply(a: number, b: number): Promise<number> {
+  return <%- project.name %>.multiply(a, b);
+}

packages/create-react-native-library/templates/native-library/src/index.tsx

@@ -0,0 +1,26 @@
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  ViewStyle,
+} from 'react-native';
+
+const LINKING_ERROR =
+  `The package '<%- project.slug %>' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+type <%- project.name %>Props = {
+  color: string;
+  style: ViewStyle;
+};
+
+const ComponentName = '<%- project.name %>View';
+
+export const <%- project.name %>View =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<<%- project.name %>Props>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };