diff --git a/packages/docs/package.json b/packages/docs/package.json
index 1af9f359..1f7ff9c5 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -8,11 +8,11 @@
"release": "yarn build && git checkout gh-pages && rm -rf ../../docs && mv dist ../../docs && git add -A && git commit -m \"Deploy documentation\" && git push origin gh-pages && git checkout -"
},
"dependencies": {
- "@storybook/addon-docs": "5.3.0-alpha.43",
- "@storybook/addon-options": "5.3.0-alpha.43",
- "@storybook/cli": "5.3.0-alpha.43",
- "@storybook/react": "5.3.0-alpha.43",
- "@storybook/theming": "5.3.0-alpha.43",
+ "@storybook/addon-docs": "^5.3.0-beta.31",
+ "@storybook/addon-options": "^5.3.0-beta.31",
+ "@storybook/cli": "^5.3.0-beta.31",
+ "@storybook/react": "^5.3.0-beta.31",
+ "@storybook/theming": "^5.3.0-beta.31",
"react-native-web": "0.11.7"
},
"devDependencies": {
diff --git a/packages/docs/src/apis/AppState/AppState.stories.mdx b/packages/docs/src/apis/AppState/AppState.stories.mdx
index 7452ae61..3eae06e2 100644
--- a/packages/docs/src/apis/AppState/AppState.stories.mdx
+++ b/packages/docs/src/apis/AppState/AppState.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './AppState.stories.js';
+import * as Stories from './AppState.stories.js';
@@ -40,5 +40,7 @@ AppState.removeEventListener('change', handler);
## Example
- {stories.stateChanges}
+
+
+
diff --git a/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx b/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx
index 08f4dd05..4ff71cb2 100644
--- a/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx
+++ b/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './Clipboard.stories.js';
+import * as Stories from './Clipboard.stories.js';
@@ -31,7 +31,9 @@ const wasSet = Clipboard.setString('add this to clipboard');
```
- {stories.setString}
+
+
+
### getString()
diff --git a/packages/docs/src/apis/Dimensions/Dimensions.stories.mdx b/packages/docs/src/apis/Dimensions/Dimensions.stories.mdx
index 3a4081f3..0c5ef63d 100644
--- a/packages/docs/src/apis/Dimensions/Dimensions.stories.mdx
+++ b/packages/docs/src/apis/Dimensions/Dimensions.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './Dimensions.stories.js';
+import * as Stories from './Dimensions.stories.js';
@@ -46,5 +46,7 @@ Remove an event handler.
## Example
- {stories.stateChanges}
+
+
+
diff --git a/packages/docs/src/apis/I18nManager/I18nManager.stories.mdx b/packages/docs/src/apis/I18nManager/I18nManager.stories.mdx
index 24067942..31a9f023 100644
--- a/packages/docs/src/apis/I18nManager/I18nManager.stories.mdx
+++ b/packages/docs/src/apis/I18nManager/I18nManager.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './I18nManager.stories.js';
+import * as Stories from './I18nManager.stories.js';
@@ -44,5 +44,7 @@ it's an RTL language. (Web-only)
## Example
- {stories.layoutRTL}
+
+
+
diff --git a/packages/docs/src/apis/Linking/Linking.stories.mdx b/packages/docs/src/apis/Linking/Linking.stories.mdx
index 8b5a1199..11d872dc 100644
--- a/packages/docs/src/apis/Linking/Linking.stories.mdx
+++ b/packages/docs/src/apis/Linking/Linking.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './Linking.stories.js';
+import * as Stories from './Linking.stories.js';
@@ -26,5 +26,7 @@ rejected.
## Example
- {stories.openURL}
+
+
+
diff --git a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js b/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js
index 6bd40c4e..0933e40e 100644
--- a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js
+++ b/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-const ofProps = () => {};
+const ofProps = () => null;
ofProps.propTypes = {
'...ViewPropTypes': PropTypes.any,
diff --git a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx b/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx
index bf244ff0..25e41f74 100644
--- a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx
+++ b/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './ActivityIndicator.stories.js';
+import * as Stories from './ActivityIndicator.stories.js';
@@ -9,14 +9,16 @@ Displays a customizable activity indicator.
## Props
-
+
### animating
Controls whether to show the indicator or hide it.
- {stories.animating}
+
+
+
### color
@@ -24,7 +26,9 @@ Controls whether to show the indicator or hide it.
Customize the foreground color of the indicator.
- {stories.color}
+
+
+
### hidesWhenStopped
@@ -32,7 +36,9 @@ Customize the foreground color of the indicator.
Control whether to show the indicator when it is not animating.
- {stories.hidesWhenStopped}
+
+
+
### size
@@ -41,5 +47,7 @@ Customize the size of the indicator. `small` has a height of `20px`, large has a
height of `36px`. Scale transforms can also be used.
- {stories.size}
+
+
+
diff --git a/packages/docs/src/components/Button/Button.stories.mdx b/packages/docs/src/components/Button/Button.stories.mdx
index f84172ce..b85a8470 100644
--- a/packages/docs/src/components/Button/Button.stories.mdx
+++ b/packages/docs/src/components/Button/Button.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './Button.stories.js';
+import * as Stories from './Button.stories.js';
@@ -10,14 +10,16 @@ build your own custom button using `TouchableOpacity` or `TouchableHighlight`.
## Props
-
+
### color
Customize the background color of the button.
- {stories.color}
+
+
+
### disabled
@@ -25,7 +27,9 @@ Customize the background color of the button.
Prevent all interactions with the button.
- {stories.disabled}
+
+
+
### onPress
@@ -33,7 +37,8 @@ Prevent all interactions with the button.
Called when the button is pressed by a pointer or keyboard.
- {stories.onPress}
+
+
### title
diff --git a/packages/docs/src/components/CheckBox/CheckBox.stories.mdx b/packages/docs/src/components/CheckBox/CheckBox.stories.mdx
index 3ab01e7c..6facb6dc 100644
--- a/packages/docs/src/components/CheckBox/CheckBox.stories.mdx
+++ b/packages/docs/src/components/CheckBox/CheckBox.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './CheckBox.stories.js';
+import * as Stories from './CheckBox.stories.js';
@@ -12,14 +12,16 @@ supplied `value` prop instead of the expected result of any user actions.
## Props
-
+
### color
Customize the color of the active checkbox.
- {stories.color}
+
+
+
### disabled
@@ -27,7 +29,9 @@ Customize the color of the active checkbox.
Prevent interaction with the checkbox.
- {stories.disabled}
+
+
+
### onValueChange
@@ -35,7 +39,9 @@ Prevent interaction with the checkbox.
Called with the event when the value changes.
- {stories.onValueChange}
+
+
+
### value
@@ -43,7 +49,9 @@ Called with the event when the value changes.
Controls whether the checkbox is active or not.
- {stories.value}
+
+
+
## Notes
@@ -52,5 +60,7 @@ The checkbox size can be controlled by changing the `height` and `width` style
properties.
- {stories.customSize}
+
+
+
diff --git a/packages/docs/src/components/FlatList/FlatList.stories.mdx b/packages/docs/src/components/FlatList/FlatList.stories.mdx
index ffccd263..f161ee39 100644
--- a/packages/docs/src/components/FlatList/FlatList.stories.mdx
+++ b/packages/docs/src/components/FlatList/FlatList.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './FlatList.stories.js';
+import * as Stories from './FlatList.stories.js';
@@ -16,11 +16,15 @@ alternatives such as
### Single column
- {stories.singleColumn}
+
+
+
### Multiple columns
- {stories.multiColumn}
+
+
+
diff --git a/packages/docs/src/components/Image/Image.stories.mdx b/packages/docs/src/components/Image/Image.stories.mdx
index af092968..fd09ebe7 100644
--- a/packages/docs/src/components/Image/Image.stories.mdx
+++ b/packages/docs/src/components/Image/Image.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './Image.stories.js';
+import * as Stories from './Image.stories.js';
@@ -9,7 +9,7 @@ An accessible and responsive image component.
## Props
-
+
### blurRadius
@@ -24,7 +24,9 @@ type Source = { uri: string, width: number, height: number }
```
- {stories.defaultSource}
+
+
+
### draggable
@@ -33,7 +35,9 @@ This is a web-only prop that indicates whether the image can be dragged with
native browser behavior. The default is `false`.
- {stories.draggable}
+
+
+
### onError
@@ -41,7 +45,9 @@ native browser behavior. The default is `false`.
Called on load error with ``{nativeEvent: {error}}``.
- {stories.onError}
+
+
+
### onLoad
@@ -49,7 +55,9 @@ Called on load error with ``{nativeEvent: {error}}``.
Called when load completes successfully.
- {stories.onLoad}
+
+
+
### resizeMode
@@ -61,7 +69,9 @@ type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch'
```
- {stories.resizeMode}
+
+
+
### source
@@ -73,7 +83,9 @@ type Source = { uri: string, width: number, height: number }
```
- {stories.source}
+
+
+
### style
@@ -91,7 +103,9 @@ type Source = { uri: string, width: number, height: number }
Image shadows are derived exactly from the pixels.
- {stories.styleBoxShadow}
+
+
+
#### tintColor
@@ -99,12 +113,14 @@ Image shadows are derived exactly from the pixels.
Tint color is applied to all opaque pixels.
- {stories.styleTintColor}
+
+
+
## Static methods
-
+
### getSize(url, callback)
@@ -129,7 +145,9 @@ Image.getSize(uri, ((width, height) => {
```
- {stories.getSize}
+
+
+
### prefetch(url)
@@ -150,7 +168,9 @@ Image.prefetch(uri).then(() => {
```
- {stories.prefetch}
+
+
+
### queryCache(list)
diff --git a/packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx b/packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx
index 8b61bd57..2e4f74a5 100644
--- a/packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx
+++ b/packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './ImageBackground.stories.js';
+import * as Stories from './ImageBackground.stories.js';
@@ -9,12 +9,14 @@ A image component with support for child content.
## Props
-
+
### children
Content to display over the image.
- {stories.children}
+
+
+
diff --git a/packages/docs/src/components/Picker/Picker.stories.mdx b/packages/docs/src/components/Picker/Picker.stories.mdx
index 9587848d..30ebedce 100644
--- a/packages/docs/src/components/Picker/Picker.stories.mdx
+++ b/packages/docs/src/components/Picker/Picker.stories.mdx
@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as stories from './Picker.stories.js';
+import * as Stories from './Picker.stories.js';
@@ -9,7 +9,7 @@ Renders the native `