flatlist react native horizontal

Flatlist React Native Horizontal

If you are a React Native developer, you must have heard of FlatList. It is a component that helps in rendering lists in a performant way. FlatList provides several props to customize the rendering of list items. One such prop is horizontal. In this blog post, we will discuss how to use FlatList React Native Horizontal to render horizontal lists in your app.

What is FlatList React Native Horizontal?

FlatList React Native Horizontal is a prop that can be used with the FlatList component to render lists horizontally instead of vertically. It is useful when you want to display items in a row instead of a column.

How to Use FlatList React Native Horizontal?

Using FlatList React Native Horizontal is straightforward. You need to set the horizontal prop of the FlatList component to true. Here's an example:

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

const data = [
  { key: '1', text: 'Item 1' },
  { key: '2', text: 'Item 2' },
  { key: '3', text: 'Item 3' },
  { key: '4', text: 'Item 4' },
  { key: '5', text: 'Item 5' },
];

const renderItem = ({ item }) => {
  return (
    <Text style={{ padding: 10 }}>{item.text}</Text>
  );
};

const App = () => {
  return (
    <FlatList
      horizontal={true}
      data={data}
      renderItem={renderItem}
    />
  );
};

export default App;

In the above example, we have set the horizontal prop of the FlatList component to true, which renders the list horizontally. The renderItem prop is a function that returns the UI for each item in the list. In this case, we are rendering a Text component with the text of each item.

Customizing FlatList React Native Horizontal

You can customize the styling of the FlatList React Native Horizontal as per your app's requirements. Here's an example:

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

const data = [
  { key: '1', text: 'Item 1' },
  { key: '2', text: 'Item 2' },
  { key: '3', text: 'Item 3' },
  { key: '4', text: 'Item 4' },
  { key: '5', text: 'Item 5' },
];

const renderItem = ({ item }) => {
  return (
    <Text style={styles.item}>{item.text}</Text>
  );
};

const App = () => {
  return (
    <FlatList
      horizontal={true}
      data={data}
      renderItem={renderItem}
      contentContainerStyle={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#f2f2f2',
  },
  item: {
    padding: 10,
    marginHorizontal: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
});

export default App;

In the above example, we have customized the styling of the FlatList React Native Horizontal using StyleSheet. We have added a padding and background color to the container and added padding, margin, and box-shadow to each item in the list.

Conclusion

FlatList React Native Horizontal is a useful prop that helps in rendering horizontal lists in your app. It provides several customization options to help you style the list as per your app's requirements. We hope this blog post helped you understand how to use FlatList React Native Horizontal in your app.