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

---

React Native select / dropdown customizable component

---

Features

• Customizable
• Searchable
• Animations
• Android / iOS / Expo supported
• TypeScript supported

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 (or react-native-modal) you need to wrap code inside Modal 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> {/* `Modal` from `react-native` or `react-native-modal` */}
        <SelectModalProvider> {/* `SelectModalProvider` wrapping code inside `Modal` */}
          <Text>Modal</Text>
          <Select
            options={[{ value: 'somevalue', label: 'somelabel' }]}
          />
        </SelectModalProvider>
      </Modal>
    </View>
  )
};

Thanks

• Used react-native-portal, thanks to @gorhom for great library 🎉
• Built with @react-native-community/bob 🚀
• Docs built with TypeDoc 🙌

Contributing

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

License

MIT