adk-test-storybook
v1.0.2
Published
## Prerequisites 1. Disconnect from Anthem network 2. Initialize empty React Native project (https://facebook.github.io/react-native/docs/getting-started.html) 3. Install Xcode and download required iOS Simulator 4. Install Android Studio Emulator (https:
Downloads
1
Readme
Test Push
Storybook Setup
Prerequisites
- Disconnect from Anthem network
- Initialize empty React Native project (https://facebook.github.io/react-native/docs/getting-started.html)
- Install Xcode and download required iOS Simulator
- Install Android Studio Emulator (https://docs.expo.io/versions/latest/workflow/android-studio-emulator/)
Steps to run project
- Navigate to the folder where you want to clone the project
- Run the following command on terminal
git clone https://AG*****@bitbucket.anthem.com/scm/amplified2019/storybook.git
- Navigate to project folder
cd storybook
- Run yarn install or npm install to get latest packages installed
5. Run the following command to start the project
expo start
# Steps to setup a new Storybook Project
## Storybook
1. Follow the setup guide for Storybook for React Native (https://storybook.js.org/docs/guides/guide-react-native/)
## Creating Components
1. Create React Native UI components under the storybook/stories/{UIcomponent} folder of the project
storybook/stories/button/index.ios.js
import React from 'react'; import PropTypes from 'prop-types'; import { TouchableHighlight } from 'react-native';
export default function Button({ onPress, children }) { return {children}; }
Button.defaultProps = { children: null, onPress: () => {}, };
Button.propTypes = { children: PropTypes.node, onPress: PropTypes.func, };
2. Update the index.js file under storybook/stories to add the component to the navigator
storybook/stories/index.js
import Button from './Button'; storiesOf('Button', module) .addDecorator(getStory => {getStory()}) .add('with text', () => ( <Button onPress={action('clicked-text')}> Hello Button ));
## Running Storybook on Simulator
1. Navigate to the project folder
2. Run the following command on the terminal
expo start
3. Run the project on iOS or Android simulator based on preference