Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storybook & React Native

Storybook & React Native

A tour of React Storybook, a tool to develop React Components in isolation. It focuses on how it's been useful to me in developing React Native applications.

Jair Trejo

August 18, 2016
Tweet

More Decks by Jair Trejo

Other Decks in Programming

Transcript

  1. 4

  2. 5 import React from 'react'; import { View } from

    'react-native'; import { storiesOf, action } from '@kadira/react-native-storybook'; import { SpeechBubble } from ‘../../components/SpeechBubble’; storiesOf(‘SpeechBubble'); .add('default view', () => ( <View style={{width: 300}}> <SpeechBubble message="Default, explanatory bubble" severity={ SpeechBubble.SEVERITY.INFO } tailPosition={ 50 }/> </View> )) .add('warning', () => ( <SpeechBubble message="Watch out! Something unexpected just happened" severity={ SpeechBubble.SEVERITY.WARNING } tailPosition={ 50 }/> ));
  3. 6

  4. 12

  5. 13

  6. 14

  7. 15

  8. 16 const simpleFavorite = new Favorite({ id: '1', title: 'Learning

    React Native…’, url: 'https://amzn.com/1491929006', shortUrl: 'amazon.com/gp/product/149…', source: new Source({ type: 'tweet', id: '707050076170891264', from: new Friend({ name: 'Bonnie Eisenman', username: 'brindelle' }) }), }); storiesOf('FavoriteDetail') .add('default view', () => ( <FavoriteDetail favorite={ simpleFavorite } onBack={ action('Go back') } onFavoritePress={ action('Favorite pressed') } onShare={ action('Share') }/> ));
  9. 18

  10. 19

  11. 20

  12. 21

  13. 23

  14. 24 export default connectComponent( (state$) => ({ favorites: state$.map('.getIn', ['feed',

    'favorites']), refreshing: state$.map('.getIn', ['feed', 'lastFetched']) .map(d => d === null) }), () => ({ onFavoritePressed: asActionType('FAVORITE_SELECTED'), onRefresh: asActionType('FETCH_FAVORITES'), }) )(Feed);
  15. 25 export class Feed extends Component{ . . . }

    export default connectComponent( . . . )(Feed);
  16. 26

  17. 27

  18. 28

  19. 31

  20. 32 import { storiesOf, action } from '@kadira/react-native-storybook'; import {

    Favorite } from '../../components/Favorite'; storiesOf('Favorite') .add('default view', () => ( <FavoriteComponent favorite={ simpleFavorite } onPress={ action('Favorite pressed') }/> ));
  21. 33 storiesOf('Favorite') .addDecorator((story) => ( <View style={{ flexDirection: 'column', alignItems:

    'stretch', justifyContent: 'center', flex: 1}} > { story() } </View> ));
  22. 34

  23. 35

  24. 36

  25. 37 A tight feedback loop for developing new components and

    new states for those components. A clear, convenient place to communicate and collaborate with designers. A place where you can visually check that everything works and looks as intended.