React NativeのSectionListでヘッダー を追従させない方法

Question

React Nativeの公式ページを参考に、以下を実装しました。

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"]
  }
];

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

const App = () => (
  <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,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 24
  }
});

export default App;

上下にスクロールした際にそれぞれのヘッダー （Main dishes等）が追従してくるのですが、追従させたくありません。
しかし、追従させない方法が不明なのですが方法はありますでしょうか。

ご教授いただけますと大変助かります。

Answer 1

おそらくiOSだけで発生していると思います。
SectionListにstickySectionHeadersEnabled={false}をつければ解消します。

• SectionList

Comments

[tsurezure1]

ありがとうございます。解決いたしました。
ご記載いただいた通り、iosにて発生しておりました。