This document introduces React Native Storybook, which provides a development environment for building React Native user interface components and developing them in isolation. It allows creating different states of components through stories and viewing them live. This helps with collaboration with designers and ensures components work as intended visually. The document explains how to set up React Native Storybook and add stories for components through examples. It emphasizes Storybook allows a tight feedback loop for developing new components.

1. STORYBOOK
&
REACT NATIVE
Jair Trejo

2. WHO AM I?
Jair Trejo
Full-stack developer at Chegg
@jairtrejo on Twitter
2

3. WHAT IS REACT
STORYBOOK?

4. 4

5. 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 }/>
));

6. 6

7. 7
A tight feedback loop for
developing new components and
new states for those components.

8. 8
A clear, convenient place to
communicate and collaborate with
designers.

9. 9
A place where you can visually
check that everything works and
looks as intended.

10. HOW IS IT USEFUL TO ME?

11. REACT NATIVE STORYBOOK
11

12. 12

13. 13

14. 14

15. 15

16. 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') }/>
));

17. 17
linkTo

18. 18

19. 19

20. 20

21. 21

22. 22
State
HTML
VDom
UI

23. 23

24. 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);

25. 25
export class Feed extends Component{
. . .
}
export default connectComponent(
. . .
)(Feed);

26. 26

27. 27

28. 28

29. HOW CAN YOU START
USING IT?

30. KADIRAHQ/REACT-STORYBOOK
30

31. 31

32. 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') }/>
));

33. 33
storiesOf('Favorite')
.addDecorator((story) => (
<View style={{
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
flex: 1}}
>
{ story() }
</View>
));

34. 34

35. 35

36. 36

37. 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.

38. THANK YOU!
Let’s stay in touch: @jairtrejo