import React from 'react'; import Dropdown from 'react-native-input-select'; export default function App() { const [country, setCountry] = React.useState(); return ( <Dropdown label="Country" placeholder="Select an option..." options={[ { label: 'Nigeria', value: 'NG' }, { label: 'Åland Islands', value: 'AX' }, { label: 'Algeria', value: 'DZ' }, { label: 'American Samoa', value: 'AS' }, { label: 'Andorra', value: 'AD' }, ]} selectedValue={country} onValueChange={(value) => setCountry(value)} primaryColor={'green'} /> ); }

import React from 'react'; import Dropdown from 'react-native-input-select'; import { View, StyleSheet, Text, Button, Alert, Image } from 'react-native'; export default function App() { const [country, setCountry] = React.useState(); return ( <Dropdown label="Customized components in list" placeholder="Select multiple countries..." options={countries.slice(0, 30)} optionLabel={'name'} optionValue={'code'} selectedValue={country} onValueChange={(itemValue: any) => setCountry(itemValue)} isMultiple isSearchable primaryColor={'orange'} dropdownStyle={{ borderWidth: 0, // To remove border, set borderWidth to 0 }} dropdownIcon={ <Image style={styles.tinyLogo} source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==', }} /> } dropdownIconStyle={{ top: 20, right: 20 }} listHeaderComponent={ <View style={styles.customComponentContainer}> <Text style={styles.text}> 💡 You can add any component to the top of this list </Text> <View style={styles.fixToText}> <Button title="Left button" onPress={() => Alert.alert('Left button pressed')} color="#007AFF" /> <Button title="Right button" onPress={() => Alert.alert('Right button pressed')} /> </View> </View> } listFooterComponent={ <View style={styles.customComponentContainer}> <Text>You can add any component to the bottom of this list</Text> </View> } modalControls={{ modalOptionsContainerStyle: { padding: 10, backgroundColor: 'cyan', }, modalProps: { supportedOrientations: [ 'portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right', ], transparent: false, }, }} listComponentStyles={{ listEmptyComponentStyle: { color: 'red', }, itemSeparatorStyle: { opacity: 0, borderColor: 'white', borderWidth: 2, backgroundColor: 'cyan', }, sectionHeaderStyle: { padding: 10, backgroundColor: 'cyan', }, }} listControls={{ selectAllText: 'Choose everything', unselectAllText: 'Remove everything', selectAllCallback: () => Alert.alert('You selected everything'), unselectAllCallback: () => Alert.alert('You removed everything'), emptyListMessage: 'No record found', }} selectedItemsControls={{ removeItemIcon: ( <Image source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA', }} style={{ tintColor: 'white', height: 12, width: 12 }} /> ), onRemoveItem: () => Alert.alert('Item was removed'), showRemoveIcon: true, }} /> ); } const styles = StyleSheet.create({ customComponentContainer: { paddingHorizontal: 20, paddingVertical: 10, }, text: { marginBottom: 20, }, fixToText: { flexDirection: 'row', justifyContent: 'space-between', }, tinyLogo: { width: 20, height: 20, }, radioButton: { width: 20, height: 20, borderRadius: 20 / 2, borderWidth: 3, borderColor: 'white', }, });

<DropdownSelect label="Menu" placeholder="Select multiple dishes..." options={[ { title: 'Main dishes', data: [ { label: 'Pizza', value: 'A' }, { label: 'Burger', value: 'B' }, { label: 'Risotto', value: 'C' }, ], }, { title: 'Sides', data: [ { label: 'Ice cream', value: 'D' }, { label: 'Cheesecake', value: 'E' }, ], }, { title: 'Drinks', data: [ { label: 'Water', value: 'F' }, { label: 'Coke', value: 'G' }, { label: 'Juice', value: 'H' }, ], }, ]} selectedValue={menu} onValueChange={(itemValue: any) => setMenu(itemValue)} isMultiple isSearchable primaryColor={'deepskyblue'} listComponentStyles={{ sectionHeaderStyle: { padding: 10, backgroundColor: 'green', color: 'white', width: '30%', }, }} />