A React Native Dropdown Component Easy To Customize For Both iOS And Android

Hello guys, today I am going to explain another GitHub repository A React Native Dropdown Component Easy To Customize For Both iOS And Android.

react-native-element-dropdown

A react-native dropdown component easy to customize for both iOS and Android.

Getting started

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

or

    yarn add react-native-element-dropdown

RN Version < 0.60

    react-native link react-native-element-dropdown

IOS

    cd ios && pod install

Demo:

demo
demo2
PropsParamsisRequire
dataArrayYes
labelFieldStringYes
valueFieldStringYes
onChange(item) => voidYes
styleViewStyleNo
containerStyleViewStyleNo
fontFamilyStringNo
labelStyleTextStyleNo
iconColorStringNo
activeColorStringNo
valueItem[]No
labelStringNo
placeholderStringNo
placeholderStyleTextStyleNo
searchBooleanNo
inputSearchStyleViewStyleNo
searchPlaceholderStringNo
textErrorStringNo
textErrorStyleTextStyleNo
maxHeightNumberNo
renderLeftIcon() => JSX.ElementNo
renderRightIcon() => JSX.ElementNo
renderItem(item) => JSX.ElementNo

MultiSelect Props:

PropsParamsisRequire
dataArrayYes
labelFieldStringYes
valueFieldStringYes
onChange(value[]) => voidYes
styleViewStyleNo
containerStyleViewStyleNo
fontFamilyStringNo
labelStyleTextStyleNo
iconColorStringNo
activeColorStringNo
valueItem[]No
labelStringNo
placeholderStringNo
placeholderStyleTextStyleNo
selectedStyleViewStyleNo
selectedTextStyleTextStyleNo
searchBooleanNo
inputSearchStyleViewStyleNo
searchPlaceholderStringNo
textErrorStringNo
textErrorStyleTextStyleNo
maxHeightNumberNo
renderLeftIcon() => JSX.ElementNo
renderRightIcon() => JSX.ElementNo
renderItem(item) => JSX.ElementNo

Usage:

import React, {useState} from 'react';
    import {StyleSheet, View, Text, Image} from 'react-native';
    import {Dropdown, MultiSelect} from 'react-native-element-dropdown';

    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 DropdownScreen = _props => {
        const [dropdown, setDropdown] = useState(null);
        const [selected, setSelected] = useState([]);

        const _renderItem = item => {
            return (
            <View style={styles.item}>
                <Text style={styles.textItem}>{item.label}</Text>
                <Image style={styles.icon} source={require('./assets/tick.png')} />
            </View>
            );
        };

        return (
            <View style={styles.container}>
                <Dropdown
                    style={styles.dropdown}
                    containerStyle={styles.shadow}
                    data={data}
                    search
                    searchPlaceholder="Search"
                    labelField="label"
                    valueField="value"
                    label="Dropdown"
                    placeholder="Select item"
                    value={dropdown}
                    onChange={item => {
                    setDropdown(item.value);
                        console.log('selected', item);
                    }}
                    renderLeftIcon={() => (
                        <Image style={styles.icon} source={require('./assets/account.png')} />
                    )}
                    renderItem={item => _renderItem(item)}
                    textError="Error"
                />

                <MultiSelect
                    style={styles.dropdown}
                    data={data}
                    labelField="label"
                    valueField="value"
                    label="Multi Select"
                    placeholder="Select item"
                    search
                    searchPlaceholder="Search"
                    value={selected}
                    onChange={item => {
                    setSelected(item);
                        console.log('selected', item);
                    }}
                    renderItem={item => _renderItem(item)}
                />
            </View>
        );
    };

    export default DropdownScreen;

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: 'white',
            padding: 40,
        },
        dropdown: {
            backgroundColor: 'white',
            borderBottomColor: 'gray',
            borderBottomWidth: 0.5,
            marginTop: 20,
        },
        icon: {
            marginRight: 5,
            width: 18,
            height: 18,
        },
        item: {
            paddingVertical: 17,
            paddingHorizontal: 4,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
        },
        textItem: {
            flex: 1,
            fontSize: 16,
        },
        shadow: {
            shadowColor: '#000',
            shadowOffset: {
            width: 0,
            height: 1,
            },
            shadowOpacity: 0.2,
            shadowRadius: 1.41,
            elevation: 2,
        },
    });

Default image
Lingaraj Senapati
Hey There! I am Lingaraj Senapati, the Co-founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.
Articles: 228

Newsletter Updates

Enter your email address below to subscribe to our newsletter