diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js index 59c15b5c3c..38889acc60 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js @@ -73,6 +73,7 @@ type DefaultProps = { /** * A controlled navigation view that renders a stack of cards. * + * ```html * +------------+ * +-| Header | * +-+ |------------| @@ -83,19 +84,101 @@ type DefaultProps = { * +-+ | | * +-+ | * +------------+ + * ``` + * + * ## Example + * + * ```js + * + * class App extends React.Component { + * constructor(props, context) { + * this.state = { + * navigation: { + * index: 0, + * routes: [ + * {key: 'page 1'}, + * }, + * }, + * }; + * } + * + * render() { + * return ( + * + * ); + * } + * + * _renderScene: (props) => { + * return ( + * + * {props.scene.route.key} + * + * ); + * }; + * ``` */ class NavigationCardStack extends React.Component { _render : NavigationSceneRenderer; _renderScene : NavigationSceneRenderer; static propTypes = { - direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]), - navigationState: NavigationPropTypes.navigationState.isRequired, - onNavigateBack: PropTypes.func, - renderHeader: PropTypes.func, - renderScene: PropTypes.func.isRequired, + /** + * Custom style applied to the card. + */ cardStyle: View.propTypes.style, + + /** + * Direction of the cards movement. Value could be `horizontal` or + * `vertical`. Default value is `horizontal`. + */ + direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]), + + /** + * The distance from the edge of the card which gesture response can start + * for. Defaults value is `30`. + */ gestureResponseDistance: PropTypes.number, + + /** + * The controlled navigation state. Typically, the navigation state + * look like this: + * + * ```js + * const navigationState = { + * index: 0, // the index of the selected route. + * routes: [ // A list of routes. + * {key: 'page 1'}, // The 1st route. + * {key: 'page 2'}, // The second route. + * ], + * }; + * ``` + */ + navigationState: NavigationPropTypes.navigationState.isRequired, + + /** + * Callback that is called when the "back" action is performed. + * This happens when the back button is pressed or the back gesture is + * performed. + */ + onNavigateBack: PropTypes.func, + + /** + * Function that renders the header. + */ + renderHeader: PropTypes.func, + + /** + * Function that renders the a scene for a route. + */ + renderScene: PropTypes.func.isRequired, + + /** + * Custom style applied to the cards stack. + */ + style: View.propTypes.style, }; static defaultProps: DefaultProps = {