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
andlabel
is required besides these fields you can add additional fields:
Custom styles
Select inside Modal
If you want to use Select
component inside:
Modal
fromreact-native
/react-native-modal
BottomSheet
fromreact-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: