I created a list using Flashlist. I'm experiencing lag issues when scrolling the screen. Is there a solution for this?
import React, { memo } from "react";
import { Text, StyleSheet, Button } from "react-native";
import FastImage from "@d11/react-native-fast-image";
import { BlurView } from "@sbaiahmed1/react-native-blur";
import { SafeAreaView } from "react-native-safe-area-context";
import { FlashList } from "@shopify/flash-list";
import { useNavigation } from "@react-navigation/native";
// --------------------------
// Memoized Blur Item Component
// --------------------------
const BlurItem = memo(({ item }: { item: number }) => (
<BlurView style={styles.boxlar} blurType="dark" blurAmount={5}>
<Text style={styles.text}>Deneme {item}</Text>
<Text style={styles.text}>Deneme {item}</Text>
</BlurView>
));
// --------------------------
// Main Component
// --------------------------
export function Giris() {
const navigation = useNavigation();
const data = Array.from({ length: 20 }, (_, i) => i); // Static data
return (
<SafeAreaView style={{ flex: 1 }}>
<FastImage
source={require("../images/arabesque_pattern.png")}
style={styles.resim}
resizeMode="stretch"
/>
<Button title="Ana Sayfa" onPress={() => navigation.navigate("AnaSayfa")} />
<FlashList
data={data}
renderItem={({ item }) => <BlurItem item={item} />}
keyExtractor={(item) => item.toString()}
/>
</SafeAreaView>
);
}
// --------------------------
// Styles
// --------------------------
const styles = StyleSheet.create({
resim: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 0.6,
},
boxlar: {
width: "80%",
padding: 20,
overflow: "hidden",
marginTop: 20,
},
text: {
color: "#000000",
zIndex: 1,
},
});
I created a list using Flashlist. I'm experiencing lag issues when scrolling the screen. Is there a solution for this?