Skip to main content

Usage

Required SelectProvider

Firstly, wrap your app code in a SelectProvider component:

import React from 'react';
import { SelectProvider } from '@mobile-reality/react-native-select-pro';

const AppRoot = () => {
return <SelectProvider>{/* rest of your app code */}</SelectProvider>;
};

Then you can use Select component:

Animated

Basic

Bottom sheet

Callbacks

Custom icons

Custom options data

  • Only value and label is required besides these fields you can add additional fields:

Custom styles

Select inside Modal

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:

Multiple

Use multiple prop to allow multiple Select:

Multiple with searchable

Multiple with separated options

Multiple searchable with separated options

Multiple with separated options styled

Multiple with hidden options

No backdrop

Overflow

Overridden flatListProps

Real example

Ref

With React Hook Form

Scroll to selected option

Scroll view

Searchable

Use searchble prop to allow search in Select:

Searchable in modal

Searchable with keyboard avoid view

Sections

Additionally you can pass second available data structure:

Sections with multiselect

Sections with searchable

Selects

Text input props