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

---

React Native dropdown (select) component developed by Mobile Reality

---

Features

• Customizable
• Sections / Grouping
• 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/178573663-1059862d-20c4-4d44-86e3-8438de630475.mp4

Repo

Clone this repo https://github.com/MobileReality/react-native-select-pro and next:

cd apps/expo
yarn dev-start

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>
    )
};

Additionally you can pass second available data structure:

[
    {
        title: 'sometitle',
        data: { value: 'somevalue', label: 'somelabel' },
    },
];

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

• 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

MIT

Want more from Mobile Reality?

Contact with us https://mobilereality.pl/en