Mm/webpack config

expo-rn/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

expo-rn/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

expo-rn/App.tsx

@@ -0,0 +1,20 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.tsx to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

expo-rn/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "expo-rn",
+    "slug": "expo-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

expo-rn/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

expo-rn/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "expo-rn",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "storybook": "start-storybook -p 7007",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "expo": "~45.0.0",
+    "expo-status-bar": "~1.3.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-web": "0.17.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@storybook/addon-actions": "^5.3",
+    "@storybook/addon-knobs": "^5.3",
+    "@storybook/addon-links": "^5.3",
+    "@storybook/addon-ondevice-actions": "^5.3.23",
+    "@storybook/addon-ondevice-knobs": "^5.3.25",
+    "@storybook/react-native": "^5.3.25",
+    "@storybook/react-native-server": "^5.3.23",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.66.13",
+    "babel-loader": "^8.2.5",
+    "typescript": "~4.3.5"
+  },
+  "private": true
+}

expo-rn/storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

expo-rn/storybook/index.js

@@ -0,0 +1,25 @@
+// if you use expo remove this line
+import { AppRegistry } from 'react-native';
+
+import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import './rn-addons';
+
+// enables knobs for all stories
+addDecorator(withKnobs);
+
+// import stories
+configure(() => {
+  require('./stories');
+}, module);
+
+// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
+// To find allowed options for getStorybookUI
+const StorybookUIRoot = getStorybookUI({});
+
+// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
+// If you use Expo you should remove this line.
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
+
+export default StorybookUIRoot;

expo-rn/storybook/rn-addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-knobs/register';

expo-rn/storybook/stories/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+import Button from '.';
+import CenterView from '../CenterView';
+
+storiesOf('Button', module)
+  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+  .add('with text', () => (
+    <Button onPress={action('clicked-text')}>
+      <Text>{text('Button text', 'Hello Button')}</Text>
+    </Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </Button>
+  ));

expo-rn/storybook/stories/Button/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableHighlight } from 'react-native';
+
+export default function Button({ onPress, children }) {
+  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
+}
+
+Button.defaultProps = {
+  children: null,
+  onPress: () => {},
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+};

expo-rn/storybook/stories/CenterView/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import style from './style';
+
+export default function CenterView({ children }) {
+  return <View style={style.main}>{children}</View>;
+}
+
+CenterView.defaultProps = {
+  children: null,
+};
+
+CenterView.propTypes = {
+  children: PropTypes.node,
+};

expo-rn/storybook/stories/CenterView/style.js

@@ -0,0 +1,8 @@
+export default {
+  main: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+};

expo-rn/storybook/stories/Welcome/Welcome.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/react-native';
+import Welcome from '.';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

expo-rn/storybook/stories/Welcome/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, Text } from 'react-native';
+
+export default class Welcome extends React.Component {
+  styles = {
+    wrapper: {
+      flex: 1,
+      padding: 24,
+      justifyContent: 'center',
+    },
+    header: {
+      fontSize: 18,
+      marginBottom: 18,
+    },
+    content: {
+      fontSize: 12,
+      marginBottom: 10,
+      lineHeight: 18,
+    },
+  };
+
+  showApp = (event) => {
+    const { showApp } = this.props;
+    event.preventDefault();
+
+    if (showApp) {
+      showApp();
+    }
+  };
+
+  render() {
+    return (
+      <View style={this.styles.wrapper}>
+        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
+        <Text style={this.styles.content}>
+          This is a UI Component development environment for your React Native app. Here you can
+          display and interact with your UI components as stories. A story is a single state of one
+          or more UI components. You can have as many stories as you want. In other words a story is
+          like a visual test case.
+        </Text>
+        <Text style={this.styles.content}>
+          We have added some stories inside the "storybook/stories" directory for examples. Try
+          editing the "storybook/stories/Welcome.js" file to edit this message.
+        </Text>
+      </View>
+    );
+  }
+}
+
+Welcome.defaultProps = {
+  showApp: null,
+};
+
+Welcome.propTypes = {
+  showApp: PropTypes.func,
+};

expo-rn/storybook/stories/index.js

@@ -0,0 +1,2 @@
+import './Button/Button.stories';
+import './Welcome/Welcome.stories';

expo-rn/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}