Search code examples
cssreact-nativegridreact-native-flatlist

creating flatlist grid from api data

I want to create a dynamic grid in the flatlist, but it is not dynamic when data increases, my data is an array of object which has images and other information too.

I am using

columnWrapperStyle={{flexWrap: 'wrap', flex: 1 / 2}}

width: "100%",
height: height / 2.3,

I want to create something like this enter image description here

if there is one image the grid should cover full width and if two images it should take half of width,

now the main issue I want to do something when there are three images the first height should be full and others will divide the height in half, same for the last one.

thanks.

Solution

  • You should use or get inspired by this package - https://www.npmjs.com/package/react-native-fb-image-grid

    import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import FbGrid from "react-native-fb-image-grid";

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inner_container}>
          <FbGrid
            images={[
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
            ]}
          />
        </View>

        <View style={styles.inner_container}>
          <FbGrid
            images={[
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
            ]}
          />
        </View>

        <View style={styles.inner_container}>
          <FbGrid
            images={[
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
            ]}
          />
        </View>

        <View style={styles.inner_container}>
          <FbGrid
            images={[
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
              "https://facebook.github.io/react-native/docs/assets/favicon.png",
            ]}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#eee",
  },
  inner_container: {
    width: "100%",
    height: "20%",
  },
});

export default App;

    Live Demo - https://snack.expo.dev/@emmbyiringiro/c182c6