I have a Pressable, which "opens" up using an Animated View, and in this view I want to show a FlatList. I use this component in two files, club.tsx and PbTable.tsx. In PbTable.tsx this works flawlessly, but on the one rendered in club.tsx I can't scroll. It is probably happening because of a parent, but I just can't find where. Sometimes, if I wait a little while, I can scroll, but if I then lift my finger I need to wait a little while again.
club.tsx:
<Page>
<View
style={{
minHeight: "83%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<SchemaComponent colorScheme={colorScheme} schema={schema} />
<WedstrijdenComponent
colorScheme={colorScheme}
wedstrijden={wedstrijden}
/>
<ClubrecordComponent
clubrecords={clubrecords}
colorScheme={colorScheme}
/>
</View>
</Page>
ClubrecordComponent:
<Pressable
style={{
width: Dimensions.get("window").width,
borderColor: "#ef8b22",
borderWidth: 1,
borderRadius: 6,
paddingVertical: 10,
paddingHorizontal: 20,
overflow: "hidden",
marginVertical: 10,
}}
onPress={toggleExpand}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text
style={{ ...textColor(colorScheme), textTransform: "capitalize" }}
>
Clubrecords
</Text>
<Animated.View style={{ transform: [{ rotate }] }}>
<FontAwesome
name="arrow-right"
size={15}
color={colorScheme === "dark" ? "#fff" : "#000"}
/>
</Animated.View>
</View>
<Animated.View
style={{
maxHeight: heightAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1000],
}),
opacity: heightAnim,
marginTop: heightAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 10],
}),
}}
>
<FlatList
data={clubrecords.male}
style={{ height: 350 }}
scrollEnabled={true}
renderItem={({ item, index }) => (
<Text key={index} style={textColor(colorScheme)}>
{item.distance} {item.event}
</Text>
)}
onScroll={() => console.log("scrolling")}
/>
</Animated.View>
</Pressable>
PbTable:
<Fragment>
<QuickViewModal
athleteData={athleteData}
colorScheme={colorScheme}
loading={loading}
onPressChoose={async () => {
setLoading(true);
const id =
SwimrakingEventId[title.distance as keyof typeof SwimrakingEventId];
const data = await getHistory(id, athleteData.id, title.poolSize);
setHistoryModalShown(id);
setSData(data);
setQuickViewModalShown(false);
setLoading(false);
}}
onPressClose={() => setQuickViewModalShown(false)}
onRequestClose={() => setQuickViewModalShown(false)}
title={title}
visible={quickViewModalShown}
/>
<HistoryModal
colorScheme={colorScheme}
onPressClose={() => setHistoryModalShown(SwimrakingEventId.None)}
sData={sData}
title={title}
visible={historyModalShown !== SwimrakingEventId.None}
onRequestClose={() => {
setHistoryModalShown(SwimrakingEventId.None);
setQuickViewModalShown(true);
}}
/>
<View
style={{
minHeight: "83%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
{Object.keys(strokes).map((stroke) => (
<StrokeComponent
stroke={stroke as keyof typeof Strokes}
strokeData={strokes[stroke as keyof typeof Strokes]}
key={stroke}
onItemPress={(item) => {
setTitle(item.title);
setQuickViewModalShown(true);
}}
/>
))}
</View>
</Fragment>
StrokeComponent:
<Pressable
style={{
width: Dimensions.get("window").width,
borderColor: "#ef8b22",
borderWidth: 1,
borderRadius: 6,
paddingVertical: 10,
paddingHorizontal: 20,
overflow: "hidden",
marginVertical: 10,
}}
onPress={toggleExpand}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text
style={{ ...textColor(colorScheme), textTransform: "capitalize" }}
>
{stroke}
</Text>
<Animated.View style={{ transform: [{ rotate }] }}>
<FontAwesome
name="arrow-right"
size={15}
color={colorScheme === "dark" ? "#fff" : "#000"}
/>
</Animated.View>
</View>
<Animated.View
style={{
maxHeight: heightAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1000],
}),
opacity: heightAnim,
marginTop: heightAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 10],
}),
}}
>
<FlatList
data={strokeData}
style={{ height: 350 }}
renderItem={({ item, index }) => (
<Pressable
key={index}
style={{
paddingHorizontal: 10,
paddingVertical: 5,
borderColor: "grey",
borderWidth: 1,
borderRadius: 6,
marginVertical: 5,
flexDirection: "row",
}}
onPress={(e) => (onItemPress ? onItemPress(item, e) : null)}
>
<Text
style={{
...textColor(colorScheme),
flex: 1,
textAlign: "left",
}}
>
{item.title.distance}
</Text>
<Text
style={{
...textColor(colorScheme),
flex: 1,
textAlign: "center",
}}
>
{item.title.time}
</Text>
<Text
style={{
...textColor(colorScheme),
flex: 1,
textAlign: "right",
}}
>
{item.title.poolSize}
</Text>
</Pressable>
)}
/>
</Animated.View>
</Pressable>
Implementation of PbTable:
<Page>
{/*... other component, next to the PbTable*/}
{activeTab === Tabs.Pbs && (
<PbTable
top={0}
data={athleteData.pbs.map((pb) => {
return {
key: `${pb.event} - ${pb.poolSize} - ${pb.date}`,
title: {
distance: pb.event,
poolSize: pb.poolSize,
time: pb.time,
},
id: SwimrakingEventId[
pb.event as keyof typeof SwimrakingEventId
],
};
})}
athleteData={athleteData}
/>
)}
I have solved it. I created an external component and copied over the code for the one that worked, and somehow it worked now. If you run into the same issue as me, here is how is the component that works (for me): https://github.com/larsdekooter/TeamBBZ/blob/master/components/SectionComponent.tsx