React native Question posted in
The official React Native documentation can be found here.

React native – How to remove gap between the list items in horizontal FlatList?

In React Native’s FlatList, create a list in the horizontal direction, and in the Container, create a View with a width of 50 or less, in addition to the FlatList.
Then, if the width of the ListItem is set to 59 or less, a gap is created between the list items.
No library is used. How can I eliminate this gap?

If in doubt, paste the following code into App.js.
The version of React Native is 0.72.7.

import React from 'react';
import {FlatList, View} from 'react-native';

const App = () => {
  return (
    <View style={{flexDirection: 'row'}}>
      <View style={{height: 500, width: 50, backgroundColor: 'blue'}} />
      <FlatList
        horizontal
        data={[1, 2, 3, 4, 5]}
        renderItem={() => (
          <View style={{height: 100, width: 50, backgroundColor: 'red'}} />
        )}
      />
    </View>
  );
};

export default App;

enter image description here

Tags:

2

Answers


  1. 0

    It is a bit strange and it is only on Android when both width are 50! Below would fix it.

    Add a placeHolder as ListHeaderComponent and set other View to position: "absolute"

        const App = () => {
      return (
        <View style={{ flexDirection: "row" }}>
          <FlatList
            ListHeaderComponent={<View style={{ height: 50, width: 50,}} />}

            horizontal
            data={[1, 2, 3, 4, 5]}
            renderItem={({ item }) => (
              <View style={{ height: 100, width: 51, backgroundColor: "red" }}/>
            )}
          />

          <View style={{ height: 500, width: 50, backgroundColor: "blue", position: "absolute" }} />
        </View>
      );
    };
    Login or Signup to reply.
  2. 0

    I’ve modified few things in your code. I have added two views with position property, so that it will looks stick to Header & Footer. And no gap also. Hope will help

    return (
    <View style={{ flexDirection: "row" }}>
      <FlatList
        horizontal
        data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
        renderItem={({ item }) => (
          <View style={{ height: 100, width: 50, backgroundColor: "red" }} />
        )}
      />

      <View style={{ height: 500, width: 50, backgroundColor: "blue", position: "absolute", left: 0 }} />
      <View style={{ height: 500, width: 50, backgroundColor: "cyan", position: "absolute", right: 0 }} />
    </View>
  );

    Thanks
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search