How I render Both with getItemType

[shop-fluencer]

Current behavior

Hello,

I have read about optimize performance and saw this example:

// A message can be either a text or an image
enum MessageType {
  Text,
  Image,
}

interface TextMessage {
  text: string;
  type: MessageType.Text;
}

interface ImageMessage {
  image: ImageSourcePropType;
  type: MessageType.Image;
}

type Message = ImageMessage | TextMessage;

const MessageItem = ({ item }: { item: Message }) => {
  switch (item.type) {
    case MessageType.Text:
      return <Text>{item.text}</Text>;
    case MessageType.Image:
      return <Image source={item.image} />;
  }
};

// Rendering the actual messages list
const MessageList = () => {
  return <FlashList renderItem={MessageItem} estimatedItemSize={200} />;
};

My Question is now how can I render Both ? Text and Image not only one.

Expected behavior

To Reproduce

Platform:

• [ x] iOS
• [ x] Android

Environment

x.y.z

[andresribeiro]

You can create a new type ImageAndText. Then you will have Image, Text and one with both.