v8 (#10)

* v8 * 1.0.5-0 * fix * 1.0.6-0 * fix * fix * fix * 1.0.7-0 * fix * 1.0.8-0

Author: dannyhw

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-native-template-storybook",
- "version": "1.0.4",
+ "version": "1.0.8-0",
  "description": "React Native template for a quick start with storybook.",
  "scripts": {
  "test": "exit 0"

template.config.js

@@ -1,5 +1,6 @@
 module.exports = {
  placeholderName: "HelloWorld",
+ titlePlaceholder: "Hello App Display Name",
  templateDir: "./template",
  postInitScript: "./after_init.js",
 };

template/Gemfile

@@ -3,5 +3,6 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.13'
-gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'

template/__tests__/App-test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shipped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+ renderer.create(<App />);
+});

template/__tests__/App.test.tsx

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -56,11 +56,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
 # testing
 /coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

template/_gitignore

@@ -1,6 +1,5 @@
 /* do not change this file, it is auto generated by storybook. */
-
-import { start } from "@storybook/react-native";
+import { start, updateView } from "@storybook/react-native";
 
 import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -23,14 +22,29 @@ const normalizedStories = [
  },
 ];
 
-// @ts-ignore
+declare global {
+ var view: ReturnType<typeof start>;
+ var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+ require("./preview"),
+ require("@storybook/react-native/dist/preview"),
+ require("@storybook/addon-actions/preview"),
+];
+
 global.STORIES = normalizedStories;
 
-export const view = start({
- annotations: [
- require("./preview"),
- require("@storybook/react-native/dist/preview"),
- require("@storybook/addon-actions/preview"),
- ],
- storyEntries: normalizedStories,
-});
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+ global.view = start({
+ annotations,
+ storyEntries: normalizedStories,
+ });
+} else {
+ updateView(global.view, annotations, normalizedStories);
+}
+
+export const view = global.view;

template/_ondevice/storybook.requires.ts

@@ -1,16 +1,26 @@
 /** @type{import("@storybook/react-webpack5").StorybookConfig} */
 module.exports = {
- stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
+ stories: [
+ "../components/**/*.stories.mdx",
+ "../components/**/*.stories.@(js|jsx|ts|tsx)",
+ ],
+
  addons: [
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/addon-react-native-web',
+ "@storybook/addon-links",
+ "@storybook/addon-essentials",
+ "@storybook/addon-webpack5-compiler-babel",
+ "@chromatic-com/storybook",
+ "@storybook/addon-react-native-web",
  ],
+
  framework: {
- name: '@storybook/react-webpack5',
+ name: "@storybook/react-webpack5",
  options: {},
  },
- docs: {
- autodocs: true,
+
+ docs: {},
+
+ typescript: {
+ reactDocgen: "react-docgen-typescript",
  },
 };

template/_storybook/main.ts

@@ -8,14 +8,14 @@ apply plugin: "com.facebook.react"
  */
 react {
  /* Folders */
- // The root of your project, i.e. where "package.json" lives. Default is '..'
- // root = file("../")
- // The folder where the react-native NPM package is. Default is ../node_modules/react-native
- // reactNativeDir = file("../node_modules/react-native")
- // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
- // codegenDir = file("../node_modules/@react-native/codegen")
- // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
- // cliFile = file("../node_modules/react-native/cli.js")
+ // The root of your project, i.e. where "package.json" lives. Default is '../..'
+ // root = file("../../")
+ // The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+ // reactNativeDir = file("../../node_modules/react-native")
+ // The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+ // codegenDir = file("../../node_modules/@react-native/codegen")
+ // The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+ // cliFile = file("../../node_modules/react-native/cli.js")
 
  /* Variants */
  // The list of variants to that are debuggable. For those we're going to
@@ -49,6 +49,9 @@ react {
  //
  // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
  // hermesFlags = ["-O", "-output-source-map"]
+
+ /* Autolinking */
+ autolinkLibrariesWithApp()
 }
 
 /**
@@ -107,13 +110,10 @@ android {
 dependencies {
  // The version of react-native is set by the React Native Gradle Plugin
  implementation("com.facebook.react:react-android")
- implementation("com.facebook.react:flipper-integration")
 
  if (hermesEnabled.toBoolean()) {
  implementation("com.facebook.react:hermes-android")
  } else {
  implementation jscFlavor
  }
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

template/android/app/build.gradle

@@ -8,7 +8,8 @@
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
- android:theme="@style/AppTheme">
+ android:theme="@style/AppTheme"
+ android:supportsRtl="true">
  <activity
  android:name=".MainActivity"
  android:label="@string/app_name"