reactjs - Flatlist scrolling freeze - Stack Overflow

I am using a FlatList but I cannot scroll for some reason, It just seems frozen. I would try a few times and only after a while it would scroll. When the scrolling stopped same issue would occur, why?

container

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <SafeAreaView className="h-screen bg-background px-6 pt-6">
        <SegmentedControl
          values={["Questions", "Duas"]}
          selectedIndex={section}
          tintColor="#009790"
          fontStyle={{
            color: "#464646",
          }}
          activeFontStyle={{
            color: "#FFF",
          }}
          onValueChange={() =>
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
          }
          backgroundColor="#FFF"
          onChange={(event) => {
            setSection(event.nativeEvent.selectedSegmentIndex);
          }}
          style={{
            height: 50,
            borderCurve: "circular",
          }}
        />
        {section == 0 ? <QAPage /> : <DuaPage />}
      </SafeAreaView>
    </TouchableWithoutFeedback>

FlatList

<FlatList
      className={"flex-1 w-full mt-6 gap-4 pb-20"}
      showsVerticalScrollIndicator={false}
      ItemSeparatorComponent={() => <View className="h-5" />}
      data={data}
      renderItem={({ item }) => <DuaComponent item={item} />}
    />

I am using a FlatList but I cannot scroll for some reason, It just seems frozen. I would try a few times and only after a while it would scroll. When the scrolling stopped same issue would occur, why?

container

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <SafeAreaView className="h-screen bg-background px-6 pt-6">
        <SegmentedControl
          values={["Questions", "Duas"]}
          selectedIndex={section}
          tintColor="#009790"
          fontStyle={{
            color: "#464646",
          }}
          activeFontStyle={{
            color: "#FFF",
          }}
          onValueChange={() =>
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
          }
          backgroundColor="#FFF"
          onChange={(event) => {
            setSection(event.nativeEvent.selectedSegmentIndex);
          }}
          style={{
            height: 50,
            borderCurve: "circular",
          }}
        />
        {section == 0 ? <QAPage /> : <DuaPage />}
      </SafeAreaView>
    </TouchableWithoutFeedback>

FlatList

<FlatList
      className={"flex-1 w-full mt-6 gap-4 pb-20"}
      showsVerticalScrollIndicator={false}
      ItemSeparatorComponent={() => <View className="h-5" />}
      data={data}
      renderItem={({ item }) => <DuaComponent item={item} />}
    />

• reactjs
• react-native
• expo

Share Improve this question Follow edited 22 hours ago RakibulB asked 22 hours ago RakibulBRakibulB 12566 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The issue was that my FlatList component was inside a TouchableWithoutFeedback component, causing weird issues when scrolling,