lngdao / react-native-dropdown-enhanced Goto Github PK

View Code? Open in Web Editor NEW

A simply dropdown | selected | picker | combine searchable for react native that works both for IOS and Android.

License: MIT License

JavaScript 6.93% Starlark 2.70% Kotlin 22.31% Ruby 3.04% Swift 7.61% Objective-C 0.90% TypeScript 56.51%

react-native-dropdown-enhanced's Introduction

react-native-dropdown-enhanced

A simply dropdown | selected | picker | combine searchable for react native that works both for IOS and Android.

Installation

# Using yarn

 yarn add react-native-dropdown-enhanced

# Using npm

 npm i react-native-dropdown-enhanced

Demo

Code provided in Example folder.

Usage

Simple usage

const data: Selected[] = [
  {label: 'Ha Noi', value: 10},
  {label: 'Ho Chi Minh', value: 11},
  {label: 'Thai Binh', value: 12},
  {label: 'Da Nang', value: 13},
  {label: 'Da Lat', value: 14},
  {label: 'Thanh Hoa', value: 15},
];

const App = () => {
return (
    <SafeAreaView
      style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
      <Dropdown
        data={data}
        defaultValue={14}
        onSelectedChange={({label, value}) => console.log(label)}
      />
    </SafeAreaView>
  )
}

Combine search

const App = () => {
  return (
    <SafeAreaView
      style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
      <Dropdown
        data={data}
        defaultValue={14}
        onSelectedChange={({label, value}) => console.log(label)}
        searchable
      />
    </SafeAreaView>
  );
};