React native UI example/template. Chat with background image cards

import React, { useState } from 'react'
import { View, Text, StyleSheet, FlatList, Image, TextInput, TouchableOpacity } from 'react-native'

const Chat = () => {
  const [messages, setMessages] = useState([
    {
      id: 1,
      sender: 'John',
      text: 'Hey, how are you?',
      senderType: 'user',
      avatar: 'https://www.bootdey.com/img/Content/avatar/avatar2.png',
      image: null,
    },
    {
      id: 2,
      sender: 'Jane',
      text: "I'm doing well, thanks for asking. How about you?",
      senderType: 'other',
      avatar: 'https://www.bootdey.com/img/Content/avatar/avatar3.png',
      image: 'https://www.bootdey.com/image/280x280/FF00FF/000000',
    },
    {
      id: 3,
      sender: 'John',
      text: "I'm doing well too. Do you want to grab a coffee later?",
      senderType: 'user',
      avatar: 'https://www.bootdey.com/img/Content/avatar/avatar2.png',
      image: 'https://www.bootdey.com/image/280x280/00FFFF/000000',
    },
    {
      id: 4,
      sender: 'Jane',
      text: "I'm doing well, thanks for asking. How about you?",
      senderType: 'other',
      avatar: 'https://www.bootdey.com/img/Content/avatar/avatar3.png',
      image: null,
    },
  ])

  const [newMessage, setNewMessage] = useState('')

  const renderItem = ({ item }) => {
    return (
      <View
        style={[
          styles.message,
          item.senderType === 'user' ? styles.userMessage : styles.otherMessage,
        ]}>
        <Image style={styles.avatar} source={{ uri: item.avatar }} />
        <View style={styles.messageContent}>
          <Text style={styles.sender}>{item.sender}</Text>
          {item.image && <Image style={styles.messageImage} source={{ uri: item.image }} />}
          <Text>{item.text}</Text>
        </View>
      </View>
    )
  }

  const handleSend = () => {
    if (!newMessage) return

    setMessages([
      ...messages,
      {
        id: messages[messages.length - 1].id + 1,
        sender: 'John',
        text: newMessage,
        senderType: 'user',
        avatar: 'https://www.bootdey.com/img/Content/avatar/avatar2.png',
      },
    ])
    setNewMessage('')
  }

  return (
    <View style={styles.container}>
      <Image
        style={styles.backgroundImage}
        source={{ uri: 'https://www.bootdey.com/image/600x600/dcdcdc/000000' }}
      />
      <View style={[styles.header,
//LOGIN TO SEE THE REST OF THE CODE ======.=====]}>
        <=====
          ======{======.===========}
          ======={{ ===: '=====://===.=======.===/===/=======/======/=======.===' }}
        />
        <==== ======{======.=============}>====</====>
      </====>
      <======== ====={========} ==========={==========} ============={==== => ====.==.========()} />
      <==== ======{======.==============}>
        <=========
          ======{======.=====}
          ======{==========}
          ============={=============}
          ============"===== = ======="
        />
        <================ ======{======.==========} ========{==========}>
          <==== ======{======.==============}>====</====>
        </================>
      </====>
    </====>
  )
}

===== ====== = ==========.======({
  =========: {
    ====: =,
    ========: '========',
  },
  ===============: {
    ========: '========',
    ===: =,
    ====: =,
    =====: =,
    ======: =,
    ==========: '=====',
  },
  ======: {
    =============: '===',
    ==========: '======',
    =======: ==,
  },
  =====: {
    ===============: '=====',
  },
  ===========: {
    =====: ==,
    ======: ==,
    ============: ==,
    ===========: ==,
  },
  =============: {
    ========: ==,
    ==========: '====',
  },
  =======: {
    =============: '===',
    =======: ==,
    ============: ==,
    ======: ==,
    ===========: '#===',
    ============: { =====: =, ======: = },
    =============: =.=,
    ============: =,
  },
  ======: {
    =====: ==,
    ======: ==,
    ============: ==,
    ===========: ==,
  },
  ===========: {
    =========: '====-===',
    ===============: '=========',
  },
  ============: {
    =========: '====-=====',
    ===============: '=========',
  },
  ==============: {
    ====: =,
  },
  ======: {
    ==========: '====',
  },
  ============: {
    =====: ===,
    ======: ===,
    ============: ==,
  },
  ==============: {
    =============: '===',
    ==========: '======',
    ======: ==,
  },
  =====: {
    ====: =,
    ======: ==,
    ===========: =,
    ===========: '====',
    ============: =,
    =======: =,
    ===========: ==,
  },
  ==========: {
    ===============: '====',
    =======: ==,
    ============: =,
  },
  ==============: {
    =====: '=====',
    ==========: '====',
    =========: '======',
  },
})

====== ======= ====