Tabs in SectionList React Native

Viewed 1382

Can we add Tabs like this library https://github.com/bogoslavskiy/react-native-tabs-section-list in SectionList. I tried the above library, its out dated and don't work. Can anyone guide me how can i show headers as tabs in section list. I Read the official documentation of Section List on React site, it does not have this feature officially. I found this https://github.com/bogoslavskiy/react-native-tabs-section-list library on Github but i think it does not work with the latest expo version. I am using expo 36 for my react native project.

My Section List code:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList,
} from 'react-native';
import Constants from 'expo-constants';

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
  },
  title: {
    fontSize: 24,
  },
});
1 Answers

Seeing the react-native-tabs-section-list example, I think they are more like two components.

The right component is a SectionList. The top component is a ScrollView with just buttons with labels of section titles of the right component. The onPress() of these buttons just calls scrollToLocation() of the SectionList to programmatically scroll to the respective section.

You can try it and get back here to explain if it works, or do you solve it already?

Related