React Native Flatlist Separator Between Columns

React Native FlatList separator between columns

you can just add if else condition inside renderItems and check the index modulus to add separator.. I just use this one and everything works great.

something like :-

_renderItem = ({item,index}) => {   return(      <View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>         <Text>{item.key}</Text>      </View>   )}

Add a separator every 3 item in flatlist - React Native

In case your data items do not have an id or a property that can easily distinguish two items, consider using a counter to keep track of how many times your separator function was called.

However, it is important to work with some key in keyExtractor, because it is used for caching and as the react key to track item re-ordering.

For this case, anyways, useRef hook can be used, since:

useRef returns a mutable ref object whose .current property is initialized to the passed argument

Note that it would still be doable if you've chosen useState hook instead, but probably more verbose.

import { useRef } from 'react' 

let count = useRef(0)
const seperator = (e) => {
        count.current += 1
        return (
          (count.current % 3 == 0) ? <View style={styles.seperator}/>
                                   : null
       )
}

return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={renderItem}
                ItemSeparatorComponent={(e) => seperator(e)}
            />
        </SafeAreaView>
)

Since it's mutable, add one unit each time the function is called

How do I add gap in between items in flatlist?

You could use the ItemSeparatorComponent property of the FlatList component to make the vertical gap. This property is a component rendered in between each FlatList item, but not at the top, bottom, right or left. You can read more about it on the documentation.

Change the FlatList to this:

<FlatList
  numColumns={2}
  data={people}
  renderItem={renderItem}
  ItemSeparatorComponent={() => <View style={{height: 20}} />}
  /* that is not necessary anymore
columnWrapperStyle={{
    justifyContent: "space-between"
  }} */      
/>

In order for the horizontal space to be given the same size as the vertical space, you can move one column away from the other using padding:

• The items on the left have a paddingRight of half the size of the vertical space.
• The ones on the right get paddingLeft instead of paddingRight.

Here's the code:

const renderItem = ({ item, index }: Props) => (
  <View
    style={[
      {
        aspectRatio: 1,
        flexGrow: 1,
        width: "50%",
        position: "relative",
      },
      index % 2 === 0
      ? {
        paddingRight: 10,
      } : {
        paddingLeft: 10
      }
    ]}
  >
    <Pressable
      onPress={() => alert(item.name)}
    >

Some points:

• A parent View component was created because if the Pressable had the padding property, the vertical gap would be pressable too.
• Don't forget to set width: '50%' because this makes the images took half the screen's width.
• Both sides should receive the same padding value because this is important to make the gap centered.
• You should use padding instead of margin because the width still is 50%, so margin would push the elements beyond the right edge of the screen. If you use a greater value like 40 instead of 10 and margin instead of padding you can see the problem.

This was the visual result.

P.S.: I ran your app in my machine with some URL images I got on Unsplash and it worked: the vertical gap was created by the ItemSeparatorComponent.

P.S. 2: I made some changes to the code and now both horizontal and vertical gaps are equal sized. This was the result. In addition, I changed my answer.

react-native flatlist with dynamic rows and columns

It is because of you set numColumns={2}, this makes FlatList renders every two items into a row. First large item and second item are in the same row, third item and forth item are in the new row. So there will be a spot beside the second item. You can set numColumns to the length of layoutData instead of 2.

    <FlatList
     showsVerticalScrollIndicator={false}
     contentContainerStyle={{
     alignSelf: 'center',
     alignItems: 'center',
     }}
     columnWrapperStyle={{flexWrap: 'wrap'}}
     data={layoutData}
     renderItem={({item, index}) =>
                index === 0 ? (
                <TouchableOpacity
                style={[styles.container, { width: '100%', height: 50, borderColor: 'white', borderWidth: 1 }]}
                >
                {/* <Image
                style={styles.wideImg}
                /> */}
                </TouchableOpacity>
          )  : (

                <TouchableOpacity
                style={[styles.container, { width: '50%', height: 50, borderColor: 'white', borderWidth: 1 }]}
                >
                {/* <Image
                style={styles.img}
                /> */}
            </TouchableOpacity>
          )
        }
        numColumns={layoutData.length}
      />

How to render items in react native FlatList with 2 columns when some of them must be full width

You can use the number of columns prop and provide a width of 100% this will give the output you need.

This is a working sample you can apply it your item styles in anyway you need.

Flatlist code

  <FlatList
    numColumns={2}
    data={data}
    renderItem={({ item }) => (
      <Item
        id={item.id}
        title={item.name}
        selected={item.special_product}
      />
    )}
    keyExtractor={(item) => item.id}
  />

Render item function

function Item({ id, title, selected }) {
  return (
    <TouchableOpacity
      onPress={() => {}}
      style={[
        selected ? { width: '100%' } : { width: '50%' },
        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
      ]}>
      <Text style={{}}>{title}</Text>
    </TouchableOpacity>
  );
}

As you can see I've set the width conditionally based the selected flag.

Separator style for header and body in FlatList

1. Give a style to your body.

   style={styles.bodyContainer}
   

and then inside StyleSheet add property.

    const styles = StyleSheet.create({
    bodyContainer: {
      paddingHorizontal: 10    
      },

This is the correct way or

2. you can directly add padding inside your View.

   style={{ paddingHorizontal: 10 }}
   

---

Related Topics