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​