---

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

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-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

Made at Mobile Reality 🔥

Open source projects are everywhere. We have used these since the beginning. In Mobile Reality we would like to share and give back to community our work. react-native-select-pro is this kind of work and if you see this library useful for you please star it 🌟.

Like our approach and other open source projects? Don't hesitate to contact us at office@mobilereality.pl in terms of any questions.

Want more from Mobile Reality?

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