Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 497cecf

Browse files
Add decorator to centering all components
1 parent 68dcb9b commit 497cecf

File tree

7 files changed

+35
-10
lines changed

7 files changed

+35
-10
lines changed

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ storiesOf('Avatar|Icons', module)
1111
icon={{ name: 'user', type: 'font-awesome' }}
1212
onPress={() => console.log("Works!")}
1313
activeOpacity={0.7}
14-
containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
1514
/>
1615
))
1716

@@ -22,7 +21,6 @@ storiesOf('Avatar|Icons', module)
2221
icon={{ name: 'cake', type: 'material' }}
2322
onPress={() => console.log("Works!")}
2423
activeOpacity={0.7}
25-
containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
2624
/>
2725
))
2826

@@ -33,7 +31,6 @@ storiesOf('Avatar|Icons', module)
3331
icon={{ name: 'meetup', color: 'red', type: 'font-awesome' }}
3432
onPress={() => console.log("Works!")}
3533
activeOpacity={0.7}
36-
containerStyle={{ flex: 3, marginTop: 100 }}
3734
/>
3835
))
3936

@@ -44,7 +41,6 @@ storiesOf('Avatar|Icons', module)
4441
overlayContainerStyle={{ backgroundColor: 'white' }}
4542
onPress={() => console.log("Works!")}
4643
activeOpacity={0.7}
47-
containerStyle={{ flex: 4, marginTop: 75 }}
4844
/>
4945
))
5046

@@ -55,7 +51,6 @@ storiesOf('Avatar|Icons', module)
5551
icon={{ name: 'home', type: 'font-awesome' }}
5652
onPress={() => console.log("Works!")}
5753
activeOpacity={0.7}
58-
containerStyle={{ flex: 5, marginRight: 60 }}
5954
/>
6055
))
6156

@@ -66,6 +61,5 @@ storiesOf('Avatar|Icons', module)
6661
icon={{ name: 'user', type: 'font-awesome' }}
6762
onPress={() => console.log("Works!")}
6863
activeOpacity={0.7}
69-
containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
7064
/>
7165
));

‎stories/components/Card/card.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ storiesOf('Card|Card', module)
7070
})
7171

7272
.add('Implemented without header, using ListItem component', () => (
73-
<Card containerStyle={{ padding: 0 }} >
73+
<Card containerStyle={{ padding: 0,alignSelf: 'stretch' }} >
7474
{
7575
users.map((u, i) => {
7676
return (
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { View } from 'react-native';
4+
import style from './style';
5+
6+
export default function CenterView({ children }) {
7+
return <View style={style.main}>{children}</View>;
8+
}
9+
10+
CenterView.defaultProps = {
11+
children: null,
12+
};
13+
14+
CenterView.propTypes = {
15+
children: PropTypes.node,
16+
};
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
main: {
3+
flex: 1,
4+
justifyContent: 'center',
5+
alignItems: 'center',
6+
backgroundColor: '#F5FCFF',
7+
},
8+
};

‎stories/components/Image/image.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ storiesOf('Image|Image', module)
1515

1616
.add('Image with custom placeholder content', () => (
1717
<Image
18-
source={{ uri: 'https://avatars3.githubusercontent.com/u/17120764' }}
18+
source={{ uri: 'https://picsum.photos/300/300' }}
1919
style={{ width: 200, height: 200 }}
2020
PlaceholderContent={<ActivityIndicator />}
2121
/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ storiesOf('ListItem|Custom View', module)
3333
</View>
3434
}
3535
leftAvatar={{ source: { uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/larrygerard/128.jpg' } }}
36+
containerStyle={{ width: 400 }}
3637
/>
3738
)
3839
});

‎stories/config/index.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
import React from 'react';
12
import { AppRegistry } from 'react-native';
2-
import { getStorybookUI, configure } from '@storybook/react-native';
3+
import { getStorybookUI, configure,addDecorator } from '@storybook/react-native';
34

45
import { loadStories } from './storyLoader';
5-
import { name as appName } from './../../app.json';
6+
import CenterView from '../components/CenterView';
7+
import { name as appName } from '../../app.json';
8+
9+
// using decorator to centering all components
10+
// https://storybook.js.org/docs/basics/writing-stories/#using-decorators
11+
addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
612

713
// import stories
814
configure(() => {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /