How can I use flatlist for multiple sections in react native

17 views Asked by At

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.

0

There are 0 answers