Upgraded docs and packages

with-storybook/.gitignore

@@ -0,0 +1 @@
+/storybook-static

with-storybook/.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@storybook/react';
+import { configure } from "@storybook/react";
 
 // automatically import all files ending in *.stories.js
-configure(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context("../stories", true, /\.stories\.js$/), module);

with-storybook/.storybook/config.native.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import {
-  addDecorator,
-  configure,
-  getStorybookUI
-} from '@storybook/react-native';
-import { View } from 'react-native';
-
-// Since require.context doesn't exist in metro bundler world, we have to
-// manually import files ending in *.stories.js
-const getStories = () => require('../stories');
-
-// Lazy margin at top for notches etc
-addDecorator(StoryFn => (
-  <View style={{ marginTop: 40, marginHorizontal: 10 }}>
-    <StoryFn />
-  </View>
-));
-
-configure(() => {
-  getStories();
-}, module);
-
-export const OnDeviceStorybookUI = getStorybookUI();

with-storybook/.storybook/webpack.config.js

@@ -1,9 +1,6 @@
-const { resolve } = require('path');
-const withUnimodules = require('@expo/webpack-config/withUnimodules');
+const { resolve } = require("path");
+const { withUnimodules } = require("@expo/webpack-config/addons");
 
 module.exports = ({ config }) => {
-  return withUnimodules(
-    config,
-    { projectRoot: resolve(__dirname, '../') }
-  );
+  return withUnimodules(config, { projectRoot: resolve(__dirname, "../") });
 };

with-storybook/App.tsx

@@ -1,14 +1,9 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { OnDeviceStorybookUI } from './.storybook/config';
+import { configure, getStorybookUI } from "@storybook/react-native";
 
-export default OnDeviceStorybookUI;
+configure(() => {
+  // Since require.context doesn't exist in metro bundler world, we have to
+  // manually import files ending in *.stories.js
+  require("./stories");
+}, module);
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export default getStorybookUI();

with-storybook/README.md

@@ -1,35 +1,123 @@
 # Storybook Example
 
-### Running in the browser
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
 
-1. Create Expo project `expo init`
-2. cd into the project and run `npx -p @storybook/cli sb init --type react` to bootstrap a new React project
-3. Install the expo webpack config so we can add unimodules support `yarn add -D @expo/webpack-config`
-4. Create a [custom webpack config](/.storybook/webpack.config.js) `touch .storybook/webpack.config.js`
+You can use Storybook to test and share your component library quickly and easily! This example shows how to use Expo modules with Storybook CLI and Expo CLI.
 
-   ```js
-   const { resolve } = require('path');
-   const webpack = require('webpack');
-   const withUnimodules = require('@expo/webpack-config/withUnimodules');
+## Running with Storybook CLI
 
-   module.exports = ({ config }) => {
-     return withUnimodules(
-       config,
-       {
-         projectRoot: resolve(__dirname, '../'),
-       }
-     );
-   };
-   ```
+![expo web with storybook-cli](.gh-assets/expo-with-storybook-cli.png "expo web with storybook-cli")
 
-5. Run `yarn storybook` to try it out!
+> web only
 
-### Running in the client
+This method runs your Expo components in a Storybook-React environment. This is different to Expo web, but may prove helpful as the Storybook-React community is more robust than the Storybook-React Native community.
 
-TBD... Feel free to open a PR!
+- Create Expo project `expo init my-project`
+  - You can use any template, we'll use the managed blank TypeScript project for this example.
+- `cd` into the project and run `npx -p @storybook/cli sb init --type react` to bootstrap a new React project
+- Install the expo webpack config so we can add unimodules support `yarn add -D @expo/webpack-config`
+- Create a [custom webpack config](/.storybook/webpack.config.js) `touch .storybook/webpack.config.js`
 
--> Usage with React Native (not universal) https://storybook.js.org/docs/guides/guide-react-native/
+  ```js
+  const { resolve } = require("path");
+  const { withUnimodules } = require("@expo/webpack-config/addons");
 
-## The idea behind the example
+  module.exports = ({ config }) => {
+    return withUnimodules(config, { projectRoot: resolve(__dirname, "../") });
+  };
+  ```
 
-This example shows how to use Unimodules with Storybook for web. You can use Storybook to test and share your component library quickly and easily.
+- Run `yarn web` to try it out!
+  - The example should open to `http://localhost:6006/`
+- You may also want to add `storybook-static` to your `.gitignore`
+
+### 📁 File Structure
+
+```
+Expo with Storybook CLI
+├── stories
+│ └── Example.stories.js ➡️ A Storybook page to render
+├── .storybook
+│ ├── config.js ➡️ The entry point / config for a typical Storybook project.
+│ └── webpack.config.js ➡️ The custom Webpack config used to add Expo support to Storybook CLI.
+├── assets ➡️ All static assets for your project
+├── storybook-static ➡️ Generated Storybook files (should be ignored)
+└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)
+```
+
+## Running with Expo CLI
+
+![storybook with expo-cli](.gh-assets/storybook-with-expo-cli.png "storybook with expo-cli")
+
+> This method is universal :]
+
+This project can be used for iOS, Android, and web! You may find that it's better to use it for native only, and to use the "Running with Storybook" method for web. Unlike the Expo + Next.js flow, you can use both web methods at the same time!
+
+- Create Expo project `expo init my-project`
+  - You can use any template, we'll use the managed blank TypeScript project for this example.
+- `cd` into the project and run `npx -p @storybook/cli sb init --type react` to bootstrap a new React project.
+- Install the Storybook React Native package:
+  - `yarn add -D @storybook/react-native`
+- In your `App.tsx` or `App.js`
+
+```ts
+import { configure, getStorybookUI } from "@storybook/react-native";
+
+configure(() => {
+  // Since require.context doesn't exist in metro bundler world, we have to
+  // manually import files ending in *.stories.js
+  require("./stories");
+}, module);
+
+export default getStorybookUI();
+```
+
+- Create a file for importing all of the stories ([`stories/index.js`](./stories/index.js)):
+
+  - `touch stories/index.js`
+  - Import all of your stories in this file. Ex:
+
+  ```js
+  // stories/index.js
+  import "./1-Button.stories";
+  ```
+
+- Register your stories for React Native:
+
+```diff
+// Example.stories.js
++ import { storiesOf } from '@storybook/react-native';
+
+export const text = () => ( /_ Example JSX _/ );
+
+// Register your story with the `module`, name, and React functional component.
+
++ storiesOf('Button', module).add('Text', text);
+
+```
+
+- Now run `expo start` to see it in action!
+
+### 📁 File Structure
+
+```
+Storybook with Expo CLI
+├── stories
+│   ├── index.js ➡️ Native story imports
+│   └── Example.stories.js ➡️ A Storybook page to render
+├── assets ➡️ All static assets for your project
+├── App.tsx ➡️ Entry Point for universal Expo apps
+├── app.json ➡️ Expo config file
+└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)
+```
+
+## 📝 Notes
+
+- [Storybook React Native](https://storybook.js.org/docs/guides/guide-react-native/)

with-storybook/app.json

@@ -1,30 +1,12 @@
 {
   "expo": {
     "name": "with-storybook",
-    "slug": "with-storybook",
-    "privacy": "public",
-    "sdkVersion": "35.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
     "version": "1.0.0",
-    "orientation": "portrait",
     "icon": "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/icon.png?raw=true",
     "splash": {
       "image": "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/splash.png?raw=true",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
     }
   }
-}
+}

with-storybook/package.json

@@ -3,8 +3,7 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web",
-    "storybook": "start-storybook -p 6006",
+    "web": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
@@ -15,8 +14,8 @@
     "react-native-web": "^0.11.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@expo/webpack-config": "^0.7.11",
+    "@babel/core": "^7.9.0",
+    "@expo/webpack-config": "^0.11.11",
     "@storybook/addon-actions": "^5.2.1",
     "@storybook/addon-links": "^5.2.1",
     "@storybook/addons": "^5.2.1",