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 = {