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

• @gorhom/bottom-sheet
• 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

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

---

Made with create-react-native-library