Multiselect, selected item location

[colinbes]

Any suggestions on how to place list of selected items in (on) the "select item" line where placeholder text is located (as with dropdown) instead of displaying them below?

[hoaphantn7604]

hi @colinbes , I'm working on it.

[colinbes]

Super!

[hoaphantn7604]

hi @colinbes, This issue is resolved. Please install later version. Use "inside" props is true. Code EX:

import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { MultiSelect } from 'react-native-element-dropdown';
import AntDesign from 'react-native-vector-icons/AntDesign';

const data = [
  { label: 'Item 1', value: '1' },
  { label: 'Item 2', value: '2' },
  { label: 'Item 3', value: '3' },
  { label: 'Item 4', value: '4' },
  { label: 'Item 5', value: '5' },
  { label: 'Item 6', value: '6' },
  { label: 'Item 7', value: '7' },
  { label: 'Item 8', value: '8' },
];

const MultiSelectComponent = () => {
  const [selected, setSelected] = useState([]);

  const renderItem = (item: any) => {
    return (
      <View style={styles.item}>
        <Text style={styles.selectedTextStyle}>{item.label}</Text>
        <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
      </View>
    );
  };

  return (
    <MultiSelect
      style={styles.dropdown}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      data={data}
      labelField="label"
      valueField="value"
      placeholder="Select item"
      value={selected}
      search
      inside
      searchPlaceholder="Search..."
      onChange={item => {
        setSelected(item);
      }}
      renderLeftIcon={() => (
        <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
      )}
      renderItem={renderItem}
      renderSelectedItem={(item, unSelect) => (
        <TouchableOpacity onPress={() => unSelect && unSelect(item)}>
          <View style={styles.selectedStyle}>
            <Text style={styles.textSelectedStyle}>{item.label}</Text>
            <AntDesign color="black" name="delete" size={17} />
          </View>
        </TouchableOpacity>
      )}
    />
  );
};

export default MultiSelectComponent;

const styles = StyleSheet.create({
  dropdown: {
    marginTop: 32,
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 12,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 14,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  icon: {
    marginRight: 5,
  },
  item: {
    padding: 17,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  selectedStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 14,
    backgroundColor: 'white',
    shadowColor: '#000',
    marginVertical: 8,
    marginRight: 12,
    paddingHorizontal: 12,
    paddingVertical: 8,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
  textSelectedStyle: {
    marginRight: 5,
    fontSize: 16,
  },
});

[colinbes]

Perfect - thanks so much! Looks good

Internet Disclaimer

---

This message (including any attachments) contains confidential information intended for a specific individual and purpose, and may be protected by law. If you are not the intended recipient, you should delete this message and are hereby notified that any disclosure, copying, or distribution of this message, or the taking of any action based on it, is strictly prohibited.

---

On Mar 10, 2022, at 9:21 AM, Hoà Phan @.***> wrote:

hi @colinbes https://github.com/colinbes, This issue is resolved. Please install later version. Use "inside" props is true. Code EX:

import React, { useState } from 'react'; import { StyleSheet, View, TouchableOpacity, Text } from 'react-native'; import { MultiSelect } from 'react-native-element-dropdown'; import AntDesign from 'react-native-vector-icons/AntDesign';

const data = [ { label: 'Item 1', value: '1' }, { label: 'Item 2', value: '2' }, { label: 'Item 3', value: '3' }, { label: 'Item 4', value: '4' }, { label: 'Item 5', value: '5' }, { label: 'Item 6', value: '6' }, { label: 'Item 7', value: '7' }, { label: 'Item 8', value: '8' }, ];

const MultiSelectComponent = () => { const [selected, setSelected] = useState([]);

const renderItem = (item: any) => { return (

{item.label}

);

};

return ( <MultiSelect style={styles.dropdown} placeholderStyle={styles.placeholderStyle} selectedTextStyle={styles.selectedTextStyle} inputSearchStyle={styles.inputSearchStyle} iconStyle={styles.iconStyle} data={data} labelField="label" valueField="value" placeholder="Select item" value={selected} search inside searchPlaceholder="Search..." onChange={item => { setSelected(item); }} renderLeftIcon={() => (

  )}
  renderItem={renderItem}
  renderSelectedItem={(item, unSelect) => (
    <TouchableOpacity onPress={() => unSelect && unSelect(item)}>
      <View style={styles.selectedStyle}>
        <Text style={styles.textSelectedStyle}>{item.label}</Text>
        <AntDesign color="black" name="delete" size={17} />
      </View>
    </TouchableOpacity>
  )}
/>

); };

export default MultiSelectComponent;

const styles = StyleSheet.create({ dropdown: { marginTop: 32, backgroundColor: 'white', borderRadius: 12, padding: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 1, }, shadowOpacity: 0.2, shadowRadius: 1.41,

elevation: 2,

}, placeholderStyle: { fontSize: 16, }, selectedTextStyle: { fontSize: 14, }, iconStyle: { width: 20, height: 20, }, inputSearchStyle: { height: 40, fontSize: 16, }, icon: { marginRight: 5, }, item: { padding: 17, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, selectedStyle: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 14, backgroundColor: 'white', shadowColor: '#000', marginVertical: 8, marginRight: 12, paddingHorizontal: 12, paddingVertical: 8, shadowOffset: { width: 0, height: 1, }, shadowOpacity: 0.2, shadowRadius: 1.41,

elevation: 2,

}, textSelectedStyle: { marginRight: 5, fontSize: 16, }, }); https://user-images.githubusercontent.com/50919571/157693422-b231559b-37a1-4260-ba99-bac5d315b422.png — Reply to this email directly, view it on GitHub https://github.com/hoaphantn7604/react-native-element-dropdown/issues/55#issuecomment-1064176463, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWMG57WKAVHSWWXLSYCBNTU7IHO3ANCNFSM5QHBE7BQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you were mentioned.

[colinbes]

Thanks for digging in, the solution is working well.

Question: It's not a train smash and I can work around it but any suggestions if my data is simply a list of strings, i.e., data=['item1', 'item2]