App/components/Button.js
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import colors from '../config/colors';
const styles = StyleSheet.create({
container: {
backgroundColor: colors.primary,
paddingVertical: 14,
borderRadius: 6,
borderWidth: 1,
borderColor: colors.primary,
marginVertical: 7,
},
containerOutline: {
backgroundColor: 'transparent',
borderColor: colors.border,
},
text: {
color: colors.white,
alignSelf: 'center',
fontSize: 18,
fontWeight: '500',
},
textOutline: {
color: colors.primary,
},
});
export const Button = ({
onPress = () => {},
children = '',
outline = false,
}) => {
const containerStyles = [styles.container];
const textStyles = [styles.text];
if (outline) {
containerStyles.push(styles.containerOutline);
textStyles.push(styles.textOutline);
}
return (
<TouchableOpacity onPress={onPress} style={containerStyles}>
<Text style={textStyles}>{children}</Text>
</TouchableOpacity>
);
};
App/config/colors.js
export default {
primary: '#202c41',
border: '#c6c6c6',
white: '#fff',
gray: '#9ca5ab',
error: '#b55464',
success: '#50c356',
};
App/stories/Button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { Button } from '../components/Button';
import { BufferView } from './decorators';
storiesOf('Button', module)
.addDecorator(BufferView)
.add('default', () => (
<Button onPress={action('tapped-default')}>Press Me</Button>
))
.add('outline', () => (
<Button onPress={action('tapped-outline')} outline>
Press Me
</Button>
));
App/stories/decorators.js
import React from 'react';
import { View } from 'react-native';
export const BufferView = storyFn => (
<View style={{ flex: 1, marginVertical: 40, marginHorizontal: 20 }}>
{storyFn()}
</View>
);
storybook/index.js
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';
import './rn-addons';
// import stories
configure(() => {
// require('./stories');
require('../App/stories/Button.stories');
}, module);
// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
export default StorybookUIRoot;
Want to track your progress? Create an account with React Native School!