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

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);

→ Run this code