Package Exports
- @mobile-reality/react-native-select-pro
- @mobile-reality/react-native-select-pro/lib/commonjs/index.js
- @mobile-reality/react-native-select-pro/lib/module/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mobile-reality/react-native-select-pro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Native select / dropdown customizable component
Features
- Customizable
- Searchable
- Animations
- Android / iOS / Expo supported
- TypeScript supported
Example
Expo Snack
Video preview
Repo
Clone this repo and next:
cd example
yarn install
yarn android #run example app for Android
yarn ios #run example app for iOSDocumentation
https://mobilereality.github.io/react-native-select-pro/
Getting Started
Installation
npm install @mobile-reality/react-native-select-proor
yarn add @mobile-reality/react-native-select-proUsage
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.