NavigationExperimental: Add documentation for NavigationCardStack

Summary: Add documentation for NavigationCardStack

Reviewed By: ericvicenti

Differential Revision: D3685319

fbshipit-source-id: 6cd62195a434b3a7ed6b9cdca6fbd17212160ee2

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 (
+ *       <NavigationCardStack
+ *         navigationState={this.state.navigation}
+ *         renderScene={this._renderScene}
+ *       />
+ *     );
+ *   }
+ *
+ *   _renderScene: (props) => {
+ *     return (
+ *       <View>
+ *         <Text>{props.scene.route.key}</Text>
+ *       </View>
+ *     );
+ *   };
+ * ```
  */
 class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
   _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 = {