How to handle diversified types in List ReactNative

In React Native, you can display a heterogeneous list of elements by using the FlatList component or a custom component that renders a list of different data types.

Here's how you can achieve this:

1. Using FlatList :

The FlatList component is commonly used in React Native to display lists of data, including heterogeneous lists. To use FlatList, you need to provide it with an array of data and a renderItem function that specifies how each item in the list should be rendered based on its type. Here's a basic example:

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

const MyList = ({ data }) => {
  const renderItem = ({ item }) => {
    if (item.type === 'text') {
      return <Text>{item.text}</Text>;
    } else if (item.type === 'view') {
      return <View>{item.contents}</View>;
    }
    // Add more conditions for other data types if needed
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

const MyComponent = () => {
  const heterogeneousData = [
    { type: 'text', text: 'Hello, world!' },
    { type: 'view', contents: <Text>Inside a view</Text> },
  ];

  return <MyList data={heterogeneousData} />;
};

export default MyComponent;

In this example, the MyList component renders a FlatList, and the renderItem function checks the type property of each item to determine how it should be rendered.

2. Using Custom Components: Another approach is to create custom components for each data type you want to display in your heterogeneous list. For example, you can create components for rendering text, images, views, or other types of data. Then, in your list, you render these components based on the data type.

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

const TextItem = ({ text }) => <Text>{text}</Text>;
const ViewItem = ({ children }) => <View>{children}</View>;
const ImageItem = ({ source }) => <Image source={source} />;

const MyList = ({ data }) => (
  <View>
    {data.map((item, index) => {
      if (item.type === 'text') {
        return <TextItem key={index} text={item.text} />;
      } else if (item.type === 'view') {
        return <ViewItem key={index}>{item.contents}</ViewItem>;
      } else if (item.type === 'image') {
        return <ImageItem key={index} source={item.source} />;
      }
      // Add more conditions for other data types if needed
    })}
  </View>
);

const MyComponent = () => {
  const heterogeneousData = [
    { type: 'text', text: 'Hello, world!' },
    { type: 'view', contents: <Text>Inside a view</Text> },
    { type: 'image', source: require('./image.png') },
  ];

  return <MyList data={heterogeneousData} />;
};

export default MyComponent;

In this approach, you create separate components for each data type and render them within the MyList component based on the type property of each item.

Choose the approach that best suits your needs and the complexity of your heterogeneous list. The FlatList approach is more efficient for long lists, while the custom component approach provides more control over rendering.

Thank you for reading this article! Don’t forget to clap only if you think I deserve it👏 and buy me a coffee.

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and Gmail.

Happy Learning🚀 Happy Coding💻.