diff --git a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js b/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js
deleted file mode 100644
index 0933e40e..00000000
--- a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => null;
-
-ofProps.propTypes = {
- '...ViewPropTypes': PropTypes.any,
- animating: PropTypes.bool,
- color: PropTypes.string,
- hidesWhenStopped: PropTypes.bool,
- size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'large']), PropTypes.number])
-};
-
-ofProps.defaultProps = {
- animating: true,
- color: '#1976D2',
- hidesWhenStopped: true,
- size: 'small'
-};
-
-export default {
- title: 'Components|ActivityIndicator',
- includeStories: []
-};
-
-export { ofProps };
-export { default as animating } from './examples/Animating';
-export { default as color } from './examples/Color';
-export { default as hidesWhenStopped } from './examples/HidesWhenStopped';
-export { default as size } from './examples/Size';
diff --git a/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx b/packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx
index 25e41f74..789411c2 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 { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
@@ -9,7 +9,13 @@ Displays a customizable activity indicator.
## Props
-
+| Name | Type | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps | | |
+| animating | ?boolean | true |
+| color | ?string | '#1976D2' |
+| hidesWhenStopped | ?boolean | true |
+| size | 'small' \| 'large' \| number | 'small' |
### animating
diff --git a/packages/docs/src/components/ActivityIndicator/examples/index.js b/packages/docs/src/components/ActivityIndicator/examples/index.js
new file mode 100644
index 00000000..1d28e8ec
--- /dev/null
+++ b/packages/docs/src/components/ActivityIndicator/examples/index.js
@@ -0,0 +1,4 @@
+export { default as animating } from './Animating';
+export { default as color } from './Color';
+export { default as hidesWhenStopped } from './HidesWhenStopped';
+export { default as size } from './Size';
diff --git a/packages/docs/src/components/Button/Button.stories.js b/packages/docs/src/components/Button/Button.stories.js
deleted file mode 100644
index 8e6f0cb8..00000000
--- a/packages/docs/src/components/Button/Button.stories.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
- accessibilityLabel: PropTypes.string,
- color: PropTypes.string,
- disabled: PropTypes.bool,
- onPress: PropTypes.func,
- testID: PropTypes.string,
- title: PropTypes.string
-};
-
-ofProps.defaultProps = {
- color: '#2196F3',
- disabled: false
-};
-
-export default {
- title: 'Components|Button',
- includeStories: []
-};
-
-export { ofProps };
-export { default as color } from './examples/Color';
-export { default as disabled } from './examples/Disabled';
-export { default as onPress } from './examples/OnPress';
diff --git a/packages/docs/src/components/Button/Button.stories.mdx b/packages/docs/src/components/Button/Button.stories.mdx
index b85a8470..8b587c01 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 { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
@@ -10,7 +10,14 @@ build your own custom button using `TouchableOpacity` or `TouchableHighlight`.
## Props
-
+| Name | Type | Default |
+| ------------------------- | --------- | ------- |
+| accessibilityLabel | ?string | |
+| color | ?string | '#2196F3' |
+| disabled | ?boolean | false |
+| onPress | ?Function | |
+| testID | ?string | |
+| title | ?string | |
### color
diff --git a/packages/docs/src/components/Button/examples/index.js b/packages/docs/src/components/Button/examples/index.js
new file mode 100644
index 00000000..93801e59
--- /dev/null
+++ b/packages/docs/src/components/Button/examples/index.js
@@ -0,0 +1,3 @@
+export { default as color } from './Color';
+export { default as disabled } from './Disabled';
+export { default as onPress } from './OnPress';
diff --git a/packages/docs/src/components/CheckBox/CheckBox.stories.js b/packages/docs/src/components/CheckBox/CheckBox.stories.js
deleted file mode 100644
index de60f514..00000000
--- a/packages/docs/src/components/CheckBox/CheckBox.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
- '...ViewPropTypes': PropTypes.any,
- color: PropTypes.string,
- disabled: PropTypes.bool,
- onChange: PropTypes.func,
- onValueChange: PropTypes.func,
- value: PropTypes.bool
-};
-
-ofProps.defaultProps = {
- disabled: false,
- value: false
-};
-
-export default {
- title: 'Components|CheckBox',
- includeStories: []
-};
-
-export { ofProps };
-export { default as color } from './examples/Color';
-export { default as disabled } from './examples/Disabled';
-export { default as onValueChange } from './examples/OnValueChange';
-export { default as value } from './examples/Value';
-export { default as customSize } from './examples/CustomSize';
diff --git a/packages/docs/src/components/CheckBox/CheckBox.stories.mdx b/packages/docs/src/components/CheckBox/CheckBox.stories.mdx
index 6facb6dc..44bb727b 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 { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
@@ -12,7 +12,14 @@ supplied `value` prop instead of the expected result of any user actions.
## Props
-
+| Name | Type | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps | | |
+| color | ?Color | '#AAB8C2' |
+| disabled | ?boolean | false |
+| onChange | ?Function | |
+| onValueChange | ?Function | |
+| value | ?boolean | false |
### color
diff --git a/packages/docs/src/components/CheckBox/examples/index.js b/packages/docs/src/components/CheckBox/examples/index.js
new file mode 100644
index 00000000..6fe3b59c
--- /dev/null
+++ b/packages/docs/src/components/CheckBox/examples/index.js
@@ -0,0 +1,5 @@
+export { default as color } from './Color';
+export { default as disabled } from './Disabled';
+export { default as onValueChange } from './OnValueChange';
+export { default as value } from './Value';
+export { default as customSize } from './CustomSize';
diff --git a/packages/docs/src/components/FlatList/FlatList.stories.js b/packages/docs/src/components/FlatList/FlatList.stories.js
deleted file mode 100644
index 35e4ca5f..00000000
--- a/packages/docs/src/components/FlatList/FlatList.stories.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
- title: 'Components|FlatList',
- includeStories: []
-};
-
-export { default as singleColumn } from './examples/SingleColumn';
-export { default as multiColumn } from './examples/MultiColumn';
diff --git a/packages/docs/src/components/FlatList/FlatList.stories.mdx b/packages/docs/src/components/FlatList/FlatList.stories.mdx
index f161ee39..a66d64db 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 './examples';
diff --git a/packages/docs/src/components/FlatList/examples/index.js b/packages/docs/src/components/FlatList/examples/index.js
new file mode 100644
index 00000000..06372950
--- /dev/null
+++ b/packages/docs/src/components/FlatList/examples/index.js
@@ -0,0 +1,2 @@
+export { default as singleColumn } from './SingleColumn';
+export { default as multiColumn } from './MultiColumn';
diff --git a/packages/docs/src/components/Image/Image.stories.js b/packages/docs/src/components/Image/Image.stories.js
deleted file mode 100644
index 362ecb1c..00000000
--- a/packages/docs/src/components/Image/Image.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
- '...ViewPropTypes': PropTypes.any,
- blurRadius: PropTypes.number,
- defaultSource: PropTypes.object, // ImageSourcePropType,
- draggable: PropTypes.bool,
- onError: PropTypes.func,
- onLoad: PropTypes.func,
- onLoadEnd: PropTypes.func,
- onLoadStart: PropTypes.func,
- resizeMode: PropTypes.oneOf(['contain', 'cover']),
- source: PropTypes.object, ///ImageSourcePropType,
- style: PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-const ofStatics = () => {};
-
-// hack to display instance methods
-ofStatics.propTypes = {
- getSize: PropTypes.func,
- prefetch: PropTypes.func,
- queryCache: PropTypes.func
-};
-
-export default {
- title: 'Components|Image',
- includeStories: []
-};
-
-export { ofProps, ofStatics };
-export { default as defaultSource } from './examples/DefaultSource';
-export { default as draggable } from './examples/Draggable';
-export { default as onError } from './examples/OnError';
-export { default as onLoad } from './examples/OnLoad';
-export { default as onLoadEnd } from './examples/OnLoadEnd';
-export { default as onLoadStart } from './examples/OnLoadStart';
-export { default as resizeMode } from './examples/ResizeMode';
-export { default as source } from './examples/Source';
-export { default as styleBoxShadow } from './examples/StyleBoxShadow';
-export { default as styleTintColor } from './examples/StyleTintColor';
-
-export { default as getSize } from './examples/StaticGetSize';
-export { default as prefetch } from './examples/StaticPrefetch';
diff --git a/packages/docs/src/components/Image/Image.stories.mdx b/packages/docs/src/components/Image/Image.stories.mdx
index fd09ebe7..63ab1a11 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 { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
@@ -9,7 +9,19 @@ An accessible and responsive image component.
## Props
-
+| Name | Type | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps | | |
+| blurRadius | ?number | |
+| defaultSource | ?Source | |
+| draggable | ?boolean | false |
+| onError | ?Function | |
+| onLoad | ?Function | false |
+| onLoadEnd | ?Function | false |
+| onLoadStart | ?Function | false |
+| resizeMode | ?ResizeMode | 'cover' |
+| source | Source | false |
+| style | ?Style | |
### blurRadius
@@ -120,8 +132,6 @@ Tint color is applied to all opaque pixels.
## Static methods
-
-
### getSize(url, callback)
```js
diff --git a/packages/docs/src/components/Image/examples/index.js b/packages/docs/src/components/Image/examples/index.js
new file mode 100644
index 00000000..cb632f09
--- /dev/null
+++ b/packages/docs/src/components/Image/examples/index.js
@@ -0,0 +1,13 @@
+export { default as defaultSource } from './DefaultSource';
+export { default as draggable } from './Draggable';
+export { default as onError } from './OnError';
+export { default as onLoad } from './OnLoad';
+export { default as onLoadEnd } from './OnLoadEnd';
+export { default as onLoadStart } from './OnLoadStart';
+export { default as resizeMode } from './ResizeMode';
+export { default as source } from './Source';
+export { default as styleBoxShadow } from './StyleBoxShadow';
+export { default as styleTintColor } from './StyleTintColor';
+
+export { default as getSize } from './StaticGetSize';
+export { default as prefetch } from './StaticPrefetch';
diff --git a/packages/docs/src/components/ImageBackground/ImageBackground.stories.js b/packages/docs/src/components/ImageBackground/ImageBackground.stories.js
deleted file mode 100644
index 05c0db9d..00000000
--- a/packages/docs/src/components/ImageBackground/ImageBackground.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
- '...ImagePropTypes': PropTypes.any,
- children: PropTypes.number,
- imageStyle: PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-export default {
- title: 'Components|ImageBackground',
- includeStories: []
-};
-
-export { ofProps };
-export { default as children } from './examples/Children';
diff --git a/packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx b/packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx
index 2e4f74a5..6fc3262b 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 { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
@@ -9,7 +9,11 @@ A image component with support for child content.
## Props
-
+| Name | Type | Default |
+| ------------------------- | --------- | ------- |
+| ...ImagePropTypes | | |
+| children | ?any | |
+| imageStyle | ?Style | |
### children
diff --git a/packages/docs/src/components/ImageBackground/examples/index.js b/packages/docs/src/components/ImageBackground/examples/index.js
new file mode 100644
index 00000000..8f321bde
--- /dev/null
+++ b/packages/docs/src/components/ImageBackground/examples/index.js
@@ -0,0 +1 @@
+export { default as children } from './Children';
diff --git a/packages/docs/src/components/Picker/Picker.stories.js b/packages/docs/src/components/Picker/Picker.stories.js
deleted file mode 100644
index ea73f6cb..00000000
--- a/packages/docs/src/components/Picker/Picker.stories.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
- '...ViewPropTypes': PropTypes.any,
- children: PropTypes.any,
- enabled: PropTypes.bool,
- onValueChange: PropTypes.func,
- selectedValue: PropTypes.string,
- style: PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-const ofPropsItem = () => {};
-
-ofPropsItem.propTypes = {
- color: PropTypes.any,
- label: PropTypes.string,
- testID: PropTypes.string,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-
-export default {
- title: 'Components|ImageBackground',
- includeStories: []
-};
-
-export { ofProps, ofPropsItem };
-
-/*
-
-
- {
- window.alert(`itemValue: ${itemValue}, itemPosition: ${itemPosition}`);
- }}
-/>
-
-
-*/
diff --git a/packages/docs/src/components/Picker/Picker.stories.mdx b/packages/docs/src/components/Picker/Picker.stories.mdx
index 30ebedce..c518fc06 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 './examples';
@@ -9,7 +9,14 @@ Renders the native `