docs: some example config (#3)

* docs: some example config

* docs: adjustments

* docs: adjustments again

* docs: table of contents

* docs: added faq

FAQ.md

@@ -0,0 +1,29 @@
+## Won't the components be different on the web?
+
+Basic components like View and Text should remain the same between platforms and library maintainers will generally attempt to keep things as similar as possible.
+
+However it's possible that some components don't look the same on the web and that might be an issue for you and that's understandable.
+
+If you need the components to be accurate to how they would display on the device you can use @storybook/react-native for an on-device storybook.
+
+You could even use both addon-react-native-web and @storybook/react-native in the same project. For example you might want to use the web addon to share your ui with stakeholders and the native version to develop on (or whatever suits your needs).
+
+This addon will not take away from storybook/react-native and as the maintainer of both packages I am invested in both solutions. This new addon is intended to solve issues such as sharing being difficult and missing features like the docs addon.
+
+In the future I see potential for both projects to interact with each other in a similar way that storybook react-native-server does with react native storybook and so I believe there is potential for the two to benefit each other.
+
+## Is this realistic?
+
+You might be surprised at the number of react native libraries that already fully support the web platform. Also if you've been following the react native scene you'll know that facebook is putting a strong emphasis on the
+[many platform vision](https://reactnative.dev/blog/2021/08/26/many-platform-vision).
+
+if we look at some of the top downloaded libraries for react native based on npm numbers:
+
+- react-navigation
+- react-native-screens
+- react-native-gesture-handler
+- react-native-svg
+- react-native-reanimated
+- react-native-vector-icons
+
+All of these libraries have support for the web platform in some way. In fact I've tested many of the popular libraries with this new addon and they all work very well on the web.

README.md

@@ -2,6 +2,14 @@
 
 This addon configures `@storybook/react` to display React Native (RN) projects using React Native for Web (RNW)
 
+- [React Native Web addon for Storybook](#react-native-web-addon-for-storybook)
+  - [Getting Started](#getting-started)
+  - [Extra config](#extra-config)
+    - [Untranspiled react native libraries](#untranspiled-react-native-libraries)
+    - [Adding babel plugins](#adding-babel-plugins)
+  - [Configuring popular libraries](#configuring-popular-libraries)
+  - [Known limitations](#known-limitations)
+
 ## Getting Started
 
 Assuming you've got an existing RN project, run the following from the project root:
@@ -50,9 +58,55 @@ module.exports = {
 
 Replace `react-native-package-name` with the name of a real package.
 
-### Reanimated support
+### Adding babel plugins
+
+It's common to provide a babel plugin for certain packages in the react native eco system and you can pass a list of these
+to the addon.
 
-Reanimated is supported, however you will need to add some options to the addon as follows:
+```
+module.exports = {
+  addons: [
+    /*existing addons,*/
+    {
+      name: '@storybook/addon-react-native-web',
+      options: {
+        babelPlugins: ['babel-plugin-name'],
+      },
+    },
+  ],
+};
+```
+
+## Configuring popular libraries
+
+Many libraries work without extra config, heres some examples of config required for some packages.
+
+Note: react-native-vector-icons requires some extra steps due to fonts required and there will be a future addon
+with that config included.
+
+<table>
+<tr>
+<td>Package</td> <td>Required config</td>
+</tr>
+
+<tr>
+<td>react-native-svg</td>
+<td>No extra config needed</td>
+</tr>
+
+<tr>
+<td>react-native-gesture-handler</td>
+<td>No extra config needed</td>
+</tr>
+
+<tr>
+<td>react-native-reanimated</td> 
+<td>
+
+<details>
+<summary>
+Click to here to see the config
+</summary>
 
 ```js
 module.exports = {
@@ -69,7 +123,65 @@ module.exports = {
 };
 ```
 
-This is necessary because reanimated uses a babel plugin to enable certain features of the library.
+</details>
+</td>
+</tr>
+
+<tr>
+<td>native-base</td>
+<td> 
+<details>
+<summary>
+Click to here to see the config
+</summary>
+Due to the vector icons dependency add the following
+
+```js
+module.exports = {
+  addons: [
+    /*existing addons,*/
+    {
+      name: '@storybook/addon-react-native-web',
+      options: {
+        modulesToTranspile: ['react-native-vector-icons'],
+      },
+    },
+  ],
+};
+```
+
+</details>
+</td>
+</tr>
+
+<tr>
+<td>react-native-paper</td>
+<td> 
+<details>
+<summary>
+Click to here to see the config
+</summary>
+Due to the vector icons dependency add the following
+
+```js
+module.exports = {
+  addons: [
+    /*existing addons,*/
+    {
+      name: '@storybook/addon-react-native-web',
+      options: {
+        modulesToTranspile: ['react-native-vector-icons'],
+      },
+    },
+  ],
+};
+```
+
+</details>
+</td>
+</tr>
+
+</table>
 
 ## Known limitations