Grid view without using FlatList in React native

Admin 1
Viewed 2978

I have just started to learn react native. I want to create grid view. I know I can do it with using FlatList. But I don't want that. I just map the data from the array and make a grid using this. But it didn't worked. Here is my code.

const ingredientnsViews = INGREDIENTS.map(data => {
  return (
     <View style={styles.gridIngredients}>
       <Image
         style={styles.ingredientImage}
         resizeMode="contain"
         source={data.image}
       />
       <Text style={styles.ingredientsText}>{data.title}</Text>
     </View>
  );
});

This is my style.

ingredientsText: {
fontFamily: AppFonts.Primary.Sans.Regular,
fontStyle: 'normal',
fontWeight: '400',
alignSelf: 'center',
fontSize: 12,
color: COLORS.black,
},

gridIngredients: {
marginTop: 12,
width: '30%',
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: COLORS.tabBgColor,
paddingStart: 16,
paddingEnd: 16,
paddingTop: 8,
paddingBottom: 8,
borderRadius: 8,
},

ingredientImage: {
width: 15,
alignSelf: 'center',
height: 15,
},

INGREDIENTS is my kind of array. I need grid with 4 comumns. Thanks in advance for help.

react-native reactjs gridview
1 Answers

You need to ScrollView. Inside ScrollView you can render your grid view with map.

https://snack.expo.dev/O9KI-80gn

please check below add code.

import * as React from 'react';
import {Text, Image, View, ScrollView, StyleSheet} from 'react-native';
import Constants from 'expo-constants';


// or any pure javascript modules available in npm
import {Card} from 'react-native-paper';
const INGREDIENTS = [
  {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},

  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
    {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
  
];
export default function App() {
  const ingredientnsViews = data => {
    return (
      <View style={styles.gridIngredients}>
        <Image
          style={styles.ingredientImage}
          resizeMode="contain"
          source={data.image}
        />
        <Text style={styles.ingredientsText}>{data.name}</Text>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
          {INGREDIENTS.map((value, index) => {
            return ingredientnsViews(value);
          })}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  ingredientsText: {
    //fontFamily: AppFonts.Primary.Sans.Regular,
    fontStyle: 'normal',
    fontWeight: '400',
    alignSelf: 'center',
    fontSize: 12,
    color: 'black',
  },

  gridIngredients: {
    marginTop: 12,
    width: '22%',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'yellow',
    paddingStart: 16,
    paddingEnd: 16,
    paddingTop: 8,
    marginRight: 10,
    paddingBottom: 8,
    borderRadius: 8,
  },

  ingredientImage: {
    width: 15,
    alignSelf: 'center',
    height: 15,
  },
});

OutPut:-

enter image description here

user_91585430
Related