Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-element-dropdown

Package Overview
Dependencies
Maintainers
1
Versions
125
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-element-dropdown

React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications.

  • 2.12.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
78K
decreased by-2.28%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-element-dropdown

React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications. This library simplifies the process of creating dropdown menus and provides a variety of options to customize the dropdown to match the design and functionality of your application.

Features

  • Dropdown and Multiselect in one package
  • Easy to use
  • Consistent look and feel on iOS and Android
  • Customizable font size, colors and animation duration
  • Implemented with typescript
If you love this library, give us a star, you will be a ray of sunshine in our lives :)

Free React Native Boilerplate

React Native Template with a beautiful UI.

Getting started

npm install react-native-element-dropdown --save

or

yarn add react-native-element-dropdown

Demo


Dropdown Props

PropsParamsisRequireDescription
mode'default' or 'modal' of 'auto'NoMode 'modal' is show the dropdown in the middle of the screen.
dataArrayYesData is a plain array
labelFieldStringYesExtract the label from the data item
valueFieldStringYesExtract the primary key from the data item
searchFieldStringNoSpecify the field of data list you want to search
onChange(item: object) => voidYesSelection callback
onChangeText(search: string) => voidNoCallback that is called when the text input's text changes
valueItemNoSet default value
placeholderStringNoThe string that will be rendered before dropdown has been selected
placeholderStyleTextStyleNoStyling for text placeholder
selectedTextStyleTextStyleNoStyling for selected text
selectedTextPropsTextPropsNoText Props for selected text. Ex: numberOfLines={1}
styleViewStyleNoStyling for view container
containerStyleViewStyleNoStyling for list container
maxHeightNumberNoCustomize max height for list container
minHeightNumberNoCustomize min height for list container
fontFamilyStringNoCustomize font style
iconStyleImageStyleNoStyling for icon
iconColorStringNoColor of icons
itemContainerStyleTextStyleNoStyling for item container in list
itemTextStyleTextStyleNoStyling for text item in list
activeColorStringNoBackground color for item selected in list container
searchBooleanNoShow or hide input search
searchQuery(keyword: string, labelValue: string) => BooleanNoCallback used to filter the list of items
inputSearchStyleViewStyleNoStyling for input search
searchPlaceholderStringNoThe string that will be rendered before text input has been entered
searchPlaceholderTextColorStringNoThe text color of the placeholder string
renderInputSearch(onSearch: (text:string) => void) => JSX.ElementNoCustomize TextInput search
disableBooleanNoSpecifies the disabled state of the Dropdown
dropdownPosition'auto' or 'top' or 'bottom'NoDropdown list position. Default is 'auto'
autoScrollBooleanNoAuto scroll to index item selected, default is true
showsVerticalScrollIndicatorBooleanNoWhen true, shows a vertical scroll indicator, default is true
renderLeftIcon(visible?: boolean) => JSX.ElementNoCustomize left icon for dropdown
renderRightIcon(visible?: boolean) => JSX.ElementNoCustomize right icon for dropdown
renderItem(item: object, selected: Boolean) => JSX.ElementNoTakes an item from data and renders it into the list
flatListPropsFlatListPropsNoCustomize FlatList element
invertedBooleanNoReverses the direction of scroll on top position mode. Default is true
onFocus() => voidNoCallback that is called when the dropdown is focused
onBlur() => voidNoCallback that is called when the dropdown is blurred
keyboardAvoidingBooleanNokeyboardAvoiding default is true
backgroundColorStringNoSet background color
confirmSelectItemBooleanNoTurn On confirm select item. Refer example/src/dropdown/example3
onConfirmSelectItem(item: object) => voidNoSelection callback. Refer example/src/dropdown/example3
testIDStringNoUsed to locate this view in end-to-end tests
itemTestIDFieldStringNoAdd this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]
accessibilityLabelStringNoSet an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected
itemAccessibilityLabelFieldStringNoAdd this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]
closeModalWhenSelectedItemBooleanNoBy default, closeModalWhenSelectedItem is set to true. When closeModalWhenSelectedItem is set to false, the Modal won't close when an item is selected.
excludeItemsItem[]NoThe array containing the items to be excluded.
excludeSearchItemsItem[]NoThe array containing the items to be excluded.

MultiSelect Props

PropsParamsisRequireDescription
mode'default' or 'modal' of 'auto'NoMode 'modal' is show the dropdown in the middle of the screen.
dataArrayYesData is a plain array
labelFieldStringYesExtract the label from the data item
valueFieldStringYesExtract the primary key from the data item
searchFieldStringNoSpecify the field of data list you want to search
onChange(value[]) => voidYesSelection callback. A array containing the "valueField".
onChangeText(search: string) => voidNoCallback that is called when the text input's text changes
valueItem[]NoSet default value. A array containing the "valueField".
placeholderStringNoThe string that will be rendered before dropdown has been selected
placeholderStyleTextStyleNoStyling for text placeholder
styleViewStyleNoStyling for view container
containerStyleViewStyleNoStyling for list container
maxHeightNumberNoCustomize max height for list container
minHeightNumberNoCustomize min height for list container
maxSelectNumberNomaximum number of items that can be selected
fontFamilyStringNoCustomize font style
iconStyleImageStyleNoStyling for icon
iconColorStringNoColor of icons
activeColorStringNoBackground color for item selected in list container
itemContainerStyleTextStyleNoStyling for item container in list
itemTextStyleTextStyleNoStyling for text item in list
selectedStyleViewStyleNoStyling for selected view
selectedTextStyleTextStyleNoStyling for selected text
selectedTextPropsTextPropsNoText Props for selected text. Ex: numberOfLines={1}
renderSelectedItem(item: object, unSelect?: () => void) => JSX.ElementNoTakes an item from data and renders it into the list selected
alwaysRenderSelectedItemBooleanNoAlways show the list of selected items
visibleSelectedItemBooleanNoOption to hide selected item list, Ẽx: visibleSelectedItem={false}
searchBooleanNoShow or hide input search
searchQuery(keyword: string, labelValue: string) => BooleanNoCallback used to filter the list of items
inputSearchStyleViewStyleNoStyling for input search
searchPlaceholderStringNoThe string that will be rendered before text input has been entered
searchPlaceholderTextColorStringNoThe text color of the placeholder string
renderInputSearch(onSearch: (text:string) => void) => JSX.ElementNoCustomize TextInput search
disableBooleanNoSpecifies the disabled state of the Dropdown
dropdownPosition'auto' or 'top' or 'bottom'NoDropdown list position. Default is 'auto'
showsVerticalScrollIndicatorBooleanNoWhen true, shows a vertical scroll indicator, default is true
renderLeftIcon(visible?: boolean) => JSX.ElementNoCustomize left icon for dropdown
renderRightIcon(visible?: boolean) => JSX.ElementNoCustomize right icon for dropdown
renderItem(item: object, selected: Boolean) => JSX.ElementNoTakes an item from data and renders it into the list
flatListPropsFlatListPropsNoCustomize FlatList element
invertedBooleanNoReverses the direction of scroll on top position mode. Default is true
onFocus() => voidNoCallback that is called when the dropdown is focused
onBlur() => voidNoCallback that is called when the dropdown is blurred
keyboardAvoidingBooleanNokeyboardAvoiding default is true
insideBooleanNoinside default is false
backgroundColorStringNoSet background color
confirmSelectItemBooleanNoTurn On confirm select item. Refer example/src/dropdown/example7
confirmUnSelectItemBooleanNoTurn On confirm un-select item. Refer example/src/dropdown/example7
onConfirmSelectItem(item: any) => voidNoSelection callback. Refer example/src/dropdown/example7
testIDStringNoUsed to locate this view in end-to-end tests
itemTestIDFieldStringNoAdd this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]
accessibilityLabelStringNoSet an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected
itemAccessibilityLabelFieldStringNoAdd this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]
excludeItemsItem[]NoThe array containing the items to be excluded.
excludeSearchItemsItem[]NoThe array containing the items to be excluded.

SelectCountry extends Dropdown

PropsParamsisRequireDescription
imageFieldStringYesExtract the image from the data item
imageStyleImageStyleNoStyling for image

Method

APIParamsDescription
open() => voidOpen dropdown list
close() => voidClose dropdown list

Dropdown example

  import React, { useState } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 DropdownComponent = () => {
    const [value, setValue] = useState(null);
    const [isFocus, setIsFocus] = useState(false);

    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
            Dropdown label
          </Text>
        );
      }
      return null;
    };

    return (
      <View style={styles.container}>
        {renderLabel()}
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={!isFocus ? 'Select item' : '...'}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);
          }}
          renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color={isFocus ? 'blue' : 'black'}
              name="Safety"
              size={20}
            />
          )}
        />
      </View>
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      padding: 16,
    },
    dropdown: {
      height: 50,
      borderColor: 'gray',
      borderWidth: 0.5,
      borderRadius: 8,
      paddingHorizontal: 8,
    },
    icon: {
      marginRight: 5,
    },
    label: {
      position: 'absolute',
      backgroundColor: 'white',
      left: 22,
      top: 8,
      zIndex: 999,
      paddingHorizontal: 8,
      fontSize: 14,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

Dropdown example 1

  import React, { useState } from 'react';
  import { StyleSheet } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 DropdownComponent = () => {
    const [value, setValue] = useState(null);

    return (
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder="Select item"
        searchPlaceholder="Search..."
        value={value}
        onChange={item => {
          setValue(item.value);
        }}
        renderLeftIcon={() => (
          <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
        )}
      />
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      height: 50,
      borderBottomColor: 'gray',
      borderBottomWidth: 0.5,
    },
    icon: {
      marginRight: 5,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

Dropdown example 2

  import React, { useState } from 'react';
  import { StyleSheet, View, Text } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 DropdownComponent = () => {
    const [value, setValue] = useState(null);

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

    return (
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder="Select item"
        searchPlaceholder="Search..."
        value={value}
        onChange={item => {
          setValue(item.value);
        }}
        renderLeftIcon={() => (
          <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
        )}
        renderItem={renderItem}
      />
    );
  };

  export default DropdownComponent;

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

      elevation: 2,
    },
    icon: {
      marginRight: 5,
    },
    item: {
      padding: 17,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    textItem: {
      flex: 1,
      fontSize: 16,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

MultiSelect example 1

  import React, { useState } from 'react';
  import { StyleSheet, View } from 'react-native';
  import { MultiSelect } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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([]);

    return (
      <View style={styles.container}>
        <MultiSelect
          style={styles.dropdown}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          search
          data={data}
          labelField="label"
          valueField="value"
          placeholder="Select item"
          searchPlaceholder="Search..."
          value={selected}
          onChange={item => {
            setSelected(item);
          }}
          renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color="black"
              name="Safety"
              size={20}
            />
          )}
          selectedStyle={styles.selectedStyle}
        />
      </View>
    );
  };

  export default MultiSelectComponent;

  const styles = StyleSheet.create({
    container: { padding: 16 },
    dropdown: {
      height: 50,
      backgroundColor: 'transparent',
      borderBottomColor: 'gray',
      borderBottomWidth: 0.5,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 14,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
    icon: {
      marginRight: 5,
    },
    selectedStyle: {
      borderRadius: 12,
    },
  });

MultiSelect example 2

  import React, { useState } from 'react';
  import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
  import { MultiSelect } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 => {
      return (
        <View style={styles.item}>
          <Text style={styles.selectedTextStyle}>{item.label}</Text>
          <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
        </View>
      );
    };

    return (
      <View style={styles.container}>
        <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
          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>
          )}
        />
      </View>
    );
  };

  export default MultiSelectComponent;

  const styles = StyleSheet.create({
    container: { padding: 16 },
    dropdown: {
      height: 50,
      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',
      marginTop: 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,
    },
  });

SelectCountry example 1

  import React, { useState } from 'react';
  import { StyleSheet } from 'react-native';
  import { SelectCountry } from 'react-native-element-dropdown';

  const local_data = [
    {
      value: '1',
      lable: 'Country 1',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '2',
      lable: 'Country 2',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '3',
      lable: 'Country 3',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '4',
      lable: 'Country 4',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '5',
      lable: 'Country 5',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
  ];

  const SelectCountryScreen = _props => {
    const [country, setCountry] = useState('1');

    return (
      <SelectCountry
        style={styles.dropdown}
        selectedTextStyle={styles.selectedTextStyle}
        placeholderStyle={styles.placeholderStyle}
        imageStyle={styles.imageStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        search
        maxHeight={200}
        value={country}
        data={local_data}
        valueField="value"
        labelField="lable"
        imageField="image"
        placeholder="Select country"
        searchPlaceholder="Search..."
        onChange={e => {
          setCountry(e.value);
        }}
      />
    );
  };

  export default SelectCountryScreen;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      height: 50,
      borderBottomColor: 'gray',
      borderBottomWidth: 0.5,
    },
    imageStyle: {
      width: 24,
      height: 24,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
      marginLeft: 8,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

SelectCountry example 2

  import React, { useState } from 'react';
  import { StyleSheet } from 'react-native';
  import { SelectCountry } from 'react-native-element-dropdown';

  const local_data = [
    {
      value: '1',
      lable: 'Country 1',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '2',
      lable: 'Country 2',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '3',
      lable: 'Country 3',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '4',
      lable: 'Country 4',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '5',
      lable: 'Country 5',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
  ];

  const SelectCountryScreen = _props => {
    const [country, setCountry] = useState('1');

    return (
      <SelectCountry
        style={styles.dropdown}
        selectedTextStyle={styles.selectedTextStyle}
        placeholderStyle={styles.placeholderStyle}
        imageStyle={styles.imageStyle}
        iconStyle={styles.iconStyle}
        maxHeight={200}
        value={country}
        data={local_data}
        valueField="value"
        labelField="lable"
        imageField="image"
        placeholder="Select country"
        searchPlaceholder="Search..."
        onChange={e => {
          setCountry(e.value);
        }}
      />
    );
  };

  export default SelectCountryScreen;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      height: 50,
      width: 150,
      backgroundColor: '#EEEEEE',
      borderRadius: 22,
      paddingHorizontal: 8,
    },
    imageStyle: {
      width: 24,
      height: 24,
      borderRadius: 12,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
      marginLeft: 8,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
  });

Keywords

FAQs

Package last updated on 11 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc