Multiselect, selected item location about react-native-element-dropdown

[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,
  },
});

[hoaphantn7604]

hi @colinbes ,
I'm working on it.

[colinbes]

Super!

[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 ( <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, }, }); <https://user-images.githubusercontent.com/50919571/157693422-b231559b-37a1-4260-ba99-bac5d315b422.png> — Reply to this email directly, view it on GitHub <#55 (comment)>, 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]