React Native dropdown (select) component developed by Mobile Reality
Features
- Customizable
- Searchable
- Animations
- Multi select
- Android / iOS / Expo support
- TypeScript support
- Based on
react-native-portal
Example
Expo Snack
Video preview
Simulator.Screen.Recording.-.iPhone.12.-.2022-07-03.at.07.59.14.mp4
Repo
Clone this repo https://github.com/MobileReality/react-native-select-pro and next:
cd apps/expo
yarn dev-startDocumentation
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:
Modalfromreact-native/react-native-modalBottomSheetfromreact-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
- Used react-native-portal, thanks
to @gorhom for great library
🎉 - Built with @react-native-community/bob
🚀 - Docs built with Docusaurus
🙌
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
Want more from Mobile Reality?
Contact with us https://mobilereality.pl/en