React-native-bottom-sheet-picker NPM

react-native-bottom-sheet-picker

React native bottom sheet picker is a picker component that uses the bottom sheet to show the list item instead of using the dropdown. This picker allows the user to play the audio of the placeholder and list items of the picker.

Support

iOS & Android

Installation

npm install react-native-bottom-sheet-picker

Installing dependencies

npm install @gorhom/bottom-sheet@^4 react-native-gesture-handler react-native-reanimated react-native-vector-icons react-native-sound react-native-text-highlighter

Usage

import {BottomSheetPicker} from 'react-native-bottom-sheet-picker';

// ...
const [playingUuid, setPlayingUuid] = React.useState(null);
let selectedLocation = null;
const locations = [
  {label: 'Siem Reap', value: 1, audio: 'audio1.mp3'},
  {label: 'Phnom Penh', value: 2, audio: 'audio2.mp3'},
  {label: 'Battambang', value: 3, audio: 'audio3.mp3'}
];

<BottomSheetPicker
  title="Your location"
  placeholder="Select your location"
  bottomSheetTitle="Select you location"
  required={true}
  requiredColor='#d50000'
  primaryColor='green'
  secondaryColor='gray'
  items={locations}
  selectedItem={selectedLocation}
  snapPoints={['60%']}
  pickerContentHeight={425}
  titleStyle={{}}
  containerStyle={{}}
  pickerStyle={{}}
  placeholderStyle={{}}
  listItemStyle={{}}
  itemTextStyle={{}}
  customPicker={{}}
  customBottomSheetTitle={component}
  customIcon={component}
  customListItem={component}
  customPickerContent={component}
  onSelectItem={(item) => selectedLocation = item}
  onBottomSheetShow={() => {}}
  onDismiss={() => {}}
  pickerUuid=''
  placeholderAudio={}
  playingUuid={playingUuid}
  updatePlayingUuid={(uuid) => setPlayingUuid(uuid)}
/>

Extra step

Add GestureHandlerRootView and BottomSheetModalProvider on the App.js

import {BottomSheetPicker} from 'react-native-bottom-sheet-picker';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
...

<GestureHandlerRootView style={{flex: 1}}>
  <BottomSheetModalProvider>
    ...
  </BottomSheetModalProvider>
</GestureHandlerRootView>

Properties

Basic

Prop	Default	Type	Description
title	''	`string`	Title on top of the picker box
placeholder	''	`string`	Placeholder inside the picker box
bottomSheetTitle	''	`string`	Title on the bottom sheet
required	false	`boolean`	If true, show the * sign on the title
requiredColor	'#d50000'	`string`	The color of the * sign
primaryColor	'black'	`string`	Color for the pressable component
secondaryColor	'#b5b5b5'	`string`	Color of the audio button while the audio is playing
items	[]	`Array`	Array of item for selections.(Ex: {label: 'example', value: 1})
selectedItem	null		The selected value
snapPoints	'60%'	`Array`	The height of the bottom sheet
pickerContentHeight	425	`number`	The height of the content inside the bottom sheet
pickerUuid	''	`string`	The uuid of the picker (for play audio purpose)
placeholderAudio	null	`audio`	The audio of the placeholder (support .mp3). If null, it will not show play audio botton on the picker box
playingUuid	''	`string`	The uuid of the playing auido component (to prevent playing audio overlap each other)
hideListItemAudio	false	`boolean`	Hide or show the play audio button on the list item
showCheckIcon	false	`boolean`	Hide or show the check icon on the selected item
checkIconSize	24	`number`	Size of the check icon
isOutlined	false	`boolean`	If set to `true`, the picker will render in outlined style
pickerFontSize	16	`number`	Font size of the label inside the picker box
indicatorLabel	''	`string`	The label on the right side of the picker box
disabled	false	`boolean`	The status to disable the picker
disabledColor	'#cdccc'	`string`	The color of the picker when disabled
titleFontFamily	''	`string`	The font family of the title in the bottom sheet
itemFontFamily	''	`string`	The font family of the item in the bottom sheet
selectedFieldName	null	`string`	The custom field name used to get the selected value of the item (default field name is `value`)
showRadioStyle	false	`boolean`	If `true`, show the radio button style (circle & round icon) on the right side of each list
showLeftCheckIcon	false	`boolean`	If `true` with showRadioStyle and showCheckIcon are `false`, show the radio button style (circle & check icon) on the left side of each list
leftCheckIconColor	'#ffffff'	`string`	The color of the check icon on the left side of the list item
showSubtitle	false	`boolean`	If `true` show the subtitle in the list item (make sure you have subtitle atribute in the items)
isSearchable	false	`boolean`	If `true` show a search box above the list item
searchPlaceholder	''	`string`	The placeholder of the search text input
searchIconColor	''	`string`	Color of the search icon in the search input box
clearSearchIconColor	''	`string`	Color of the clear text icon in the search box

Custom styles

Prop	Default	Type	Description
titleStyle	{...}	`style`	Style of the picker title
containerStyle	{...}	`style`	Style of the picker wrapper
pickerStyle	{...}	`style`	Style of the picker box container
pickerBoxStyle	{...}	`style`	Style of the picker box
placeholderStyle	{...}	`style`	Style of the placeholder label in the picker box
bottomSheetTitleStyle	{...}	`style`	Style of the bottom sheet title
listItemStyle	{...}	`style`	Style of the list item on bottom sheet
itemTextStyle	{...}	`style`	Style of the label of the list item on bottom sheet
outlinedTitleContainerStyle	{...}	`style`	Style of the outlined label container
indicatorLabelStyle	{...}	`style`	Style of the label on the right side of the picker box
requiredTitleStyle	{...}	`style`	Style of the required sign "*" on the title
subtitleStyle	{...}	`style`	Style of the subtitle in the list item
searchInputStyle	{...}	`style`	Style of the search text input (if isSearchable is setted to `true`)
searchInputContainerStyle	{...}	`style`	Style of the container of the search text input

Custom components

Prop	Default	Type	Description
customPicker	{...}	`comp`	Custom component of the picker box
customBottomSheetTitle	{...}	`comp`	Custom component of the bottom sheet title
customIcon	{...}	`comp`	Custom component of the icon on the picker box
customListItem	{...}	`comp`	Custom component of the list item on the bottom sheet
customPickerContent	{...}	`comp`	Custom content inside the bottom sheet (whole content)

Events

Prop	Default	Type	Description
onSelectItem	{...}	`event`	On selecting an item
onBottomSheetShow	{...}	`event`	On the bottom sheet show
onDismiss	{...}	`event`	On the bottom sheet close
updatePlayingUuid	{...}	`event`	Mark the component uuid as playingUuid when playing the audio