Add decorator to centering all components

Author: haruelrovix

stories/components/Avatar/avatar.icons.stories.js

@@ -11,7 +11,6 @@ storiesOf('Avatar|Icons', module)
       icon={{ name: 'user', type: 'font-awesome' }}
       onPress={() => console.log("Works!")}
       activeOpacity={0.7}
-      containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
     />
   ))
 
@@ -22,7 +21,6 @@ storiesOf('Avatar|Icons', module)
       icon={{ name: 'cake', type: 'material' }}
       onPress={() => console.log("Works!")}
       activeOpacity={0.7}
-      containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
     />
   ))
 
@@ -33,7 +31,6 @@ storiesOf('Avatar|Icons', module)
       icon={{ name: 'meetup', color: 'red', type: 'font-awesome' }}
       onPress={() => console.log("Works!")}
       activeOpacity={0.7}
-      containerStyle={{ flex: 3, marginTop: 100 }}
     />
   ))
 
@@ -44,7 +41,6 @@ storiesOf('Avatar|Icons', module)
       overlayContainerStyle={{ backgroundColor: 'white' }}
       onPress={() => console.log("Works!")}
       activeOpacity={0.7}
-      containerStyle={{ flex: 4, marginTop: 75 }}
     />
   ))
 
@@ -55,7 +51,6 @@ storiesOf('Avatar|Icons', module)
       icon={{ name: 'home', type: 'font-awesome' }}
       onPress={() => console.log("Works!")}
       activeOpacity={0.7}
-      containerStyle={{ flex: 5, marginRight: 60 }}
     />
   ))
 
@@ -66,6 +61,5 @@ storiesOf('Avatar|Icons', module)
       icon={{ name: 'user', type: 'font-awesome' }}
       onPress={() => console.log("Works!")}
       activeOpacity={0.7}
-      containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
     />
   ));

stories/components/Card/card.stories.js

@@ -70,7 +70,7 @@ storiesOf('Card|Card', module)
   })
 
   .add('Implemented without header, using ListItem component', () => (
-    <Card containerStyle={{ padding: 0 }} >
+    <Card containerStyle={{ padding: 0, alignSelf: 'stretch' }} >
       {
         users.map((u, i) => {
           return (

stories/components/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,
+};

stories/components/CenterView/style.js

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

stories/components/Image/image.stories.js

@@ -15,7 +15,7 @@ storiesOf('Image|Image', module)
 
   .add('Image with custom placeholder content', () => (
     <Image
-      source={{ uri: 'https://avatars3.githubusercontent.com/u/17120764' }}
+      source={{ uri: 'https://picsum.photos/300/300' }}
       style={{ width: 200, height: 200 }}
       PlaceholderContent={<ActivityIndicator />}
     />

stories/components/ListItem/listItem.customView.stories.js

@@ -33,6 +33,7 @@ storiesOf('ListItem|Custom View', module)
           </View>
         }
         leftAvatar={{ source: { uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/larrygerard/128.jpg' } }}
+        containerStyle={{ width: 400 }}
       />
     )
   });

stories/config/index.js

@@ -1,8 +1,14 @@
+import React from 'react';
 import { AppRegistry } from 'react-native';
-import { getStorybookUI, configure } from '@storybook/react-native';
+import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
 
 import { loadStories } from './storyLoader';
-import { name as appName } from './../../app.json';
+import CenterView from '../components/CenterView';
+import { name as appName } from '../../app.json';
+
+// using decorator to centering all components
+// https://storybook.js.org/docs/basics/writing-stories/#using-decorators
+addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
 
 // import stories
 configure(() => {