Merge pull request react-navigation#291 from labcoder/@labcoder/add-scrollables-doc

Adding simple API overview for exported scrollables

Author: brentvatne

docs/scrollables.md

@@ -0,0 +1,45 @@
+---
+id: scrollables
+title: Scrollables
+sidebar_label: Scrollables
+---
+
+React Navigation exports its own `ScrollView`, `FlatList`, and `SectionList`. The built-in components are wrapped in order to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.
+
+Example
+```jsx harmony
+import React from 'react';
+import { Text, View } from 'react-native';
+import { createBottomTabNavigator, createAppContainer, FlatList } from 'react-navigation';
+
+const data = new Array(150).fill(0);
+
+class HomeScreen extends React.Component {
+  renderItem = ({ index }) => {
+    return (
+      <View style={{ height: 50 }}>
+        <Text style={{ textAlign: 'center' }}>Item {index}</Text>
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <FlatList
+          data={data}
+          renderItem={this.renderItem}
+          contentContainerStyle={{ padding: 10 }}
+        />
+      </View>
+    );
+  }
+}
+
+const TabNavigator = createBottomTabNavigator({
+  Home: { screen: HomeScreen },
+});
+
+export default createAppContainer(TabNavigator);
+```
+<a href="https://snack.expo.io/@react-navigation/basic-scrollables-tab-v3" target="blank" class="run-code-button">&rarr; Run this code</a>

website/i18n/en.json

@@ -102,6 +102,8 @@
     "Routers": "Routers",
     "screen-tracking": "Screen tracking",
     "Screen tracking": "Screen tracking",
+    "scrollables": "Scrollables",
+    "Scrollables": "Scrollables",
     "search-screen": "search-screen",
     "set-params-on-back": "Update params when navigating back",
     "Update params when navigating back": "Update params when navigating back",
@@ -148,7 +150,7 @@
     "Stay up to date|no description given": "Stay up to date",
     "Need help?|no description given": "Need help?",
     "This project is maintained by a dedicated group of people.|statement made to reader": "This project is maintained by a dedicated group of people.",
-    "Learn more using the [documentation on this site](/docs/en/getting-started.html) and [reading the API reference](/docs/en/api-reference.html).|no description given": "Learn more using the [documentation on this site](getting-started.html) and [reading the API reference](/content/docs/api-reference.html).",
+    "Learn more using the [documentation on this site](/docs/en/getting-started.html) and [reading the API reference](/docs/en/api-reference.html).|no description given": "Learn more using the [documentation on this site](/docs/en/getting-started.html) and [reading the API reference](/docs/en/api-reference.html).",
     "Browse Docs and API|no description given": "Browse Docs and API",
     "Ask questions about the documentation and project in the `#react-navigation` channel on the [Reactiflux Discord](https://discord.gg/4xEK3nD).|no description given": "Ask questions about the documentation and project in the `#react-navigation` channel on the [Reactiflux Discord](https://discord.gg/4xEK3nD).",
     "Read the release notes for new versions of React Navigation in the [releases tab on the Github repository](https://github.com/react-navigation/react-navigation/releases).|no description given": "Read the release notes for new versions of React Navigation in the [releases tab on the Github repository](https://github.com/react-navigation/react-navigation/releases).",

website/sidebars.json

@@ -62,7 +62,8 @@
       "material-top-tab-navigator",
       "with-navigation",
       "with-navigation-focus",
-      "navigation-events"
+      "navigation-events",
+      "scrollables"
     ]
   }
 }