React Native select / dropdown customizable component
- Customizable
- Android / iOS / Expo supported
- TypeScript supported
react-native-select-pro-preview-demo.mp4
Clone this repo and next:
cd example
yarn install
yarn android #run example app for Android
yarn ios #run example app for iOS
https://mobilereality.github.io/react-native-select-pro/
npm install @mobile-reality/react-native-select-pro
or
yarn add @mobile-reality/react-native-select-pro
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>
)
};
- Used react-native-portal, thanks to @gorhom for great library ๐
- Built with @react-native-community/bob ๐
- Docs built with TypeDoc ๐
See the contributing guide to learn how to contribute to the repository and the development workflow.