How to Use Grid For Image And Text React Native

Question

import React, { useState } from "react";
import { View, Text, StyleSheet, FlatList, Image } from "react-native";

const Icons = [
  { name: "Shopee Supermarket", uri: require("../Images/supermarket.png") },
  { name: "RM15 Free Shipping", uri: require("../Images/freeshipping.jpg") },
  { name: "15% Cashback", uri: require("../Images/cashback.jpg") },
  { name: "Live", uri: require("../Images/live.png") },
  { name: "Shopee Food", uri: require("../Images/shopeefood.png") },
  { name: "Shopee Pay", uri: require("../Images/shopeepay.png") },
  { name: "Shop Malaysia", uri: require("../Images/malaysia.png") },
{ name: "COD", uri: require("../Images/cod.jpg") },
];

const IconsSelection = () =>
  Icons.map((icons) => (
    <View style={styles.container}>
      <Image source={icons.uri} style={styles.image} resizeMode={"contain"} />
      <Text style={styles.textFont}>{icons.name}</Text>
    </View>
  ));

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: 40,
    height: 40,
  },
  textFont: {
    fontSize: 12,
  },
});

export default IconsSelection;

Hello I would like to know how do I make my Image and text within 2 horizontal. Right now my image and text is display in column. Hello I would like to know how do I make my Image and text within 2 horizontal. Right now my image and text is display in column. Thank You

Answer 1

You can handle this completely with Flexbox as follows.

• For each Icon in Icons create a View with flexDirection: row .
• Nest IconsSelection in a View with flexDirection: column . Since this is the default for View , we do not need to make this explicit in our styles.

Here is a working version.

const IconsSelection = () =>
  Icons.map((icons) => (
      <View style={styles.inner}>
          <View style={styles.column}>
              <Image source={icons.uri} style={styles.image} resizeMode={"contain"} />
          </View>
          <View style={styles.column}>
            <Text style={styles.textFont}>{icons.name}</Text>
          </View>
      </View>
  ));


export default function App() {
  return (
   <View>
       <IconsSelection />
   </View>
  );
}

const styles = StyleSheet.create({
column: {
  margin: 20,
},
inner : {
  flexDirection: "row",
  marginRight: 20
},
  image: {
    width: 40,
    height: 40,
  },
  textFont: {
    fontSize: 12,
  },
});

I have used the expo images as an example. The above code yields to the following output.

Edit: In response to the comments. If you want to have two images next to each other followed by a row of the corresponding texts, then the easiest solution uses a FlatList with two columns as follows.

export default function App() {
  const [data, setData] = useState(Icons)
  return (
   <FlatList data={data} numColumns={2} keyExtractor={(item) => item.name} renderItem={({item}) => {
      return <View style={styles.inner}>      
              <Image source={item.uri} style={styles.image} resizeMode={"contain"} />
              <Text style={styles.textFont}>{item.name}</Text>
             </View>
      }}>
  </FlatList>
  );
}

The above yields to the following output.