Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Spacing before and after a horizontal FlatList (React Native)

I'm trying to create a horizontal FlatList that has some spacing around it. I was able to get the beginning spacing correct with paddingLeft on the list, but paddingRight on the list doesn't seem to put any space after it (if I scroll all the way to the end, the last item is pressed right against the border).

Here is a Snack so that you can run and try this out live: https://snack.expo.io/@saadq/aW50cm

And here is my code:

import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';

const data = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.flatList}
          horizontal
          data={data}
          renderItem={() => (
            <View style={styles.box}>
              <Text>Box</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  flatList: {
    marginTop: 100,
    paddingLeft: 15,
    paddingRight: 15, // THIS DOESN'T SEEM TO BE WORKING
    // marginRight: 15   I can't use marginRight because it cuts off the box with whitespace
  },
  box: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    width: 100,
    borderWidth: 1,
    borderColor: 'black',
    paddingHorizontal: 15,
    marginRight: 15,
  },
});

export default App;

Using marginRight instead of paddingRight does seem to give the expected spacing result, however it causes a different issue where that whitespace is ALWAYS there and cuts off the items when scrolling. Any help would be appreciated!

like image 511
Saad Avatar asked Nov 09 '18 08:11

Saad


People also ask

How do I put space between items in FlatList?

Just add horizontal padding to your container. and no matter how big your items get you will always have spacing left and right. If the item gets too big you can start to scroll.

How do you give a space between FlatList in React Native?

You can give the item itself a width value of 45% . Also, flatlist has a property called columnWrapperStyle that you can give the value justifyContent: 'space-between . Docs: Rendered in between each item, but not at the top or bottom. Just add some margin to the style of the list Item.

How do you make a horizontal FlatList in React Native?

To add a horizontal FlatList in React Native, we just set the horizontal prop of the FlatList to true . to add horizontal to FlatList . As a result, we can scroll through the FlatList items horizontally.

How do you scroll horizontally in FlatList React Native?

The FlatList component has a prop named as horizontal={} which support Boolean value True and False. The default value is False and if we define its value to True then it will make our FlatList horizontal with horizontal scrolling enabled.


3 Answers

Seems like I was able to fix it by using a contentContainerStyle prop on the FlatList instead of passing it a style prop directly.

like image 173
Saad Avatar answered Oct 19 '22 20:10

Saad


contentContainerStyle={{paddingBottom:xxx}} 
like image 23
kamalesh biswas Avatar answered Oct 19 '22 21:10

kamalesh biswas


You could use "ListFooterComponent". Its a prop of the Flatlist and acts as the last component as the Flatlist. So you could pass a empty view with a width of for example 15 to it to get the right margin to work. Try this:

<FlatList
      style={styles.flatList}
      horizontal
      data={data}
      renderItem={() => (
        <View style={styles.box}>
          <Text>Box</Text>
        </View>
      )}
      ListFooterComponent={<View style={{width:15}}></View>}

The important line of code is this:

ListFooterComponent={<View style={{width:15}}></View>
like image 11
Nino9612 Avatar answered Oct 19 '22 20:10

Nino9612