I am making an app in react native and its my first react native project. I am wondering how I can make something like this Image of how I somewhat want the screen to look.
This is my code now, and I have already made the grid, but not the featured farm at the top.
export const HomeScreen = ({ navigation, route }: any) => {
const filteredFarms = Farms.filter((farm) => !farm.Featured);
const featuredFarm = Farms.filter((farm) => farm.Featured);
const [clicked, setClicked] = useState(false);
const renderItem = ({ item }) => (
<View style={[{ width: '50%' }]}>
<ShopCard farm={item} navigation={navigation} />
</View>
);
const header = () => {
return (
<View>
<Text style={[styles.header, { color: theme.colors.primary }]}>Anbefalte</Text>
</View>
);
};
const handleEmpty = () => {
return <Text> No data present!</Text>;
};
return (
<SafeAreaView style={[{ flex: 1 }, styles.AndroidSafeArea]}>
<CustomHeader navigation={navigation} setClicked={setClicked} clicked={clicked} />
{clicked && (
<View style={{ alignSelf: 'center' }}>
<Text>Ingen flere resultater</Text>
</View>
)}
{!clicked && (
<View>
{!filteredFarms && <Text>Loading...</Text>}
{filteredFarms && (
//I want to add the featuredfarm over the gridview
<FlatList //This is my flatlist with the gridview
ListEmptyComponent={handleEmpty}
style={styles.container}
data={filteredFarms}
ListHeaderComponent={header}
renderItem={renderItem}
keyExtractor={(item) => item.id}
numColumns={2}
onRefresh={() => console.log('refreshing')}
refreshing={false}
showsVerticalScrollIndicator={false}
maxToRenderPerBatch={4}
stickyHeaderHiddenOnScroll
/>
)}
</View>
)}
</SafeAreaView>
);
};
I have tried to use sectionlist but I couldt get it to work with the grid. I have also tried to use a flatlist inside of a flatlist but I couldt get that to work either.