react-native-amir-test/src/MultiPicker.js

amir npm publish test

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

const App = () => {
  const [selectedValue, setSelectedValue] = useState([]);
  return (
    <View style={styles.container}>
      <View style={{ flexWrap: "wrap", flexDirection: "row" }}>
        {selectedValue &&
          selectedValue.map((item, key) => {
            return (
              <View
                style={{
                  backgroundColor: "yellow",
                  flexDirection: "row",
                  padding: 5,
                  borderRadius: 50,
                  alignItems: "center",
                  paddingLeft: 20,
                  paddingRight: 10,
                  margin: 5,
                }}
              >
                <Text>{item}</Text>

                <TouchableOpacity
                  onPress={() => {
                    let rm = [];
                    rm = selectedValue.filter((i) => i !== item);
                    setSelectedValue(rm);
                  }}
                  style={{ padding: 5, marginLeft: 5 }}
                >
                  <Text style={{ color: "#000", fontWeight: "900" }}>X</Text>
                </TouchableOpacity>
              </View>
            );
          })}
      </View>

      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          const modify = [...selectedValue, itemValue];
          setSelectedValue(modify);
        }}
      >
        <Picker.Item label="Select" />
        <Picker.Item label="otp2" value="otp2" />
        <Picker.Item label="otp3" value="otp3" />
        <Picker.Item label="otp4" value="otp4" />
        <Picker.Item label="otp5" value="otp5" />
        <Picker.Item label="otp6" value="otp6" />
      </Picker>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center",
  },
});

export default App;