How to make a multiselectpicker in reactnative

How to make something like this in reactnative. This should be some picker and the values that you select should stay inside the picker view. Here is a picture

Here's a minimal, reproducible example. Use CSS to style to your satisfaction -

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

function Multiselect({ items }) {
  const [open, setOpen] = React.useState(false)
  const [selected, setSelected] = React.useState(_ => new Set())
  const onClick = event => setOpen(!open)
  const remove = item => event => {
    event.stopPropagation()
    const s = new Set(selected)
    s.delete(item)
    setSelected(s)
  }
  const add = item => event => {
    if (selected.has(item)) return
    const s = new Set(selected)
    s.add(item)
    setSelected(s)
  }
  return <div
    onClick={onClick}
    className="multiselect"
  >
    <div>
      { selected.size == 0
      ? "Make a selection.."
      : Array.from(selected, item =>
          <button key={item} onClick={remove(item)} children={item} />
        )
      }
    </div>
    {open && items.map(item =>
      <span key={item} onClick={add(item)} className={selected.has(item) ? "selected" : ""} children={item} />
    )}
  </div>
}

ReactDOM.createRoot(document.querySelector("#app")).render(
  <Multiselect items={["🥝","🍑","🍎"]} />
)

<!-- language: lang-css -->

.multiselect { padding: 0.25rem; background-color: #ffc; border: 1px solid #555; }
button::after { content: " ✖️"; }
.multiselect .selected { opacity: 0.2; }

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

<!-- end snippet -->

This will works for you. Use CSS for further styling as per your requirement.

import React, { useState } from "react";
import { View, Text, Picker } from "react-native";

const ItemPicker = () => {
  const [selectedValue, setSelectedValue] = useState("");
  const [values, setValues] = useState([]);

  const handleChange = (value) => {
    setSelectedValue(value);
    setValues([...values, value]);
  };

  return (
    <View>
      <Picker selectedValue={selectedValue} onValueChange={handleChange}>
        <Picker.Item label="Item 1" value="1 selected" />
        <Picker.Item label="Item 2" value="2 selected" />
        <Picker.Item label="Item 3" value="3 selected" />
        <Picker.Item label="Item 4" value="4 selected" />
      </Picker>
      <View style={{ flexDirection: "row" }}>
        {values.map((value) => (
          <Text key={value} style={{ marginHorizontal: 5 }}>
            {value}
          </Text>
        ))}
      </View>
    </View>
  );
};

export default ItemPicker;

Output: