Awesome Open Source
Awesome Open Source
React Native Select Pro

React Native dropdown (select) component developed by Mobile Reality


Version GitHub stars npm total downloads npm week downloads Last master branch commit License

Features

  • Customizable
  • Searchable
  • Animations
  • Multi select
  • Android / iOS / Expo support
  • TypeScript support
  • Based on react-native-portal

Example

Expo Snack

Example on Expo

Video preview

https://user-images.githubusercontent.com/11172548/142592143-fc4ffcc5-2d8f-49ff-aa58-0ae5f9dd46bf.mp4

Repo

Clone this repo and next:

cd example
yarn install
yarn android #run example app for Android
yarn ios #run example app for iOS

Documentation

https://mobilereality.github.io/react-native-select-pro/

Getting Started

Installation

npm install @mobile-reality/react-native-select-pro

or

yarn add @mobile-reality/react-native-select-pro

Usage

Firstly, wrap your app code in SelectProvider

import React from 'react';
import { SelectProvider } from '@mobile-reality/react-native-select-pro';

const RootComponent = () => {
  return (
    <SelectProvider>
      {/* rest of your app code */}
    </SelectProvider>
  )
};

Then you can use Select component

import React from 'react';
import { View } from 'react-native';
import { Select } from '@mobile-reality/react-native-select-pro';

const SomeComponent = () => {
  return (
    <View>
      <Select {/* One required prop: `options` */}
        options={[{ value: 'somevalue', label: 'somelabel' }]} 
      />
    </View>
  )
};

If you want to use Select component inside:

  • Modal from react-native / react-native-modal
  • BottomSheet from react-native-bottom-sheet

you need to wrap code inside Modal / BottomSheet in SelectModalProvider

import React from 'react';
import { View, Modal, Text } from 'react-native';
import { Select, SelectModalProvider } from '@mobile-reality/react-native-select-pro';

const SomeComponent = () => {
  return (
    <View>
      <Modal> {/* e.g. `Modal` from `react-native` */}
        <SelectModalProvider> {/* `SelectModalProvider` wrapping code inside `Modal` */}
          <Text>Modal</Text>
          <Select
            options={[{ value: 'somevalue', label: 'somelabel' }]}
          />
        </SelectModalProvider>
      </Modal>
    </View>
  )
};

Thanks

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Alternatives To React Native Select Pro
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (238,684
Reactjs (160,752
Menu (13,225
Picker (5,441
Dropdown (2,651
React Native Component (227