I have a sectionList in a React Native app. It works at full speed on IOS devices, but it's much slower on Android devices. I've made all possible optimizations. The biggest issue is that when scrolling very fast, the list renders a black screen, while all my rows are grey. So it looks weird and buggy.
Is it possible to display a placeholder while the list is scrolling (an empty grey row with a bottom border)? Or at least a grey background on my list?
The code is:
<SafeAreaView style={styles.container}>
<SectionList
removeClippedSubviews={true}
maxToRenderPerBatch={8}
initialNumToRender={8}
viewabilityConfig={{
minimumViewTime: 300,
viewAreaCoveragePercentThreshold: 100,
waitForInteraction: true,
}}
sections={data}
keyExtractor={(item) => item.name}
renderItem={({ item }) => <ProfileCard profile={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.black,
width: "100%",
paddingHorizontal: 12,
paddingTop: StatusBar.currentHeight, //12
},
header: {
fontSize: 16,
padding: 12,
color: Color.white,
fontWeight: "700",
backgroundColor: Color.black_medium,
}
});