Hi Guys, in this tutorial, i will show you how to integrate a performant interactive bottom sheet with fully configurable options in react native works for both Android and IOS. We will use gorhom/react-native-bottom-sheet package. Let’s dive in :

Package Features

  • 🌟 Modal presentation view, Bottom Sheet Modal.
  • Smooth interactions & snapping animations.
  • Support FlatListSectionListScrollView & View scrolling interactions.
  • Support React Navigation Integration.
  • Compatible with Reanimated v1 & v2.
  • Compatible with Expo.
  • Written in TypeScript.

 

Installation

 

Version v1

Link to version 1 branch

This version is written with Reanimated v1

⚠️ You need to install react-native-reanimated & react-native-gesture-handler and follow their installation instructions.

Version v2 ( Alpha )

Link to version 2 branch

this version is written with Reanimated v2, although this version is still in alpha phase, yet it provides all version 1 functionalities with the huge performance boost, thanks to Reanimated v2 ❤️

⚠️ You need to install react-native-reanimated v2 & react-native-gesture-handler and follow their installation instructions.

Usage

 

Props

initialSnapIndex

Initial snap index. You also could provide {-1} to initiate bottom sheet in closed state.

required: NO | type: number | default: 0

snapPoints

Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. String values should be a percentage.

required: YES | type: Array<string | number>
example: [100, ‘50%’, ‘90%’]

topInset

Top inset value helps to calculate percentage snap points values. usually comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.

required: NO | type: number | default: 0

enabled

To enable or disable user interaction with the sheet.

required: NO | type: boolean | default: true

animationDuration

Snapping animation duration.

required: NO | type: number | default: 500

animationEasing

Snapping animation easing function.

required: NO | type: Animated.EasingFunction | default: Easing.out(Easing.back(0.75))

animatedPosition

Animated value to be used as a callback for the position node internally.

required: NO | type: Animated.Value<number>

animatedPositionIndex

Animated value to be used as a callback for the position index node internally.

required: NO | type: Animated.Value<number>

handleComponent

Component to be placed as a sheet handle.

required: NO | type: React.FC<BottomSheetHandleProps>

backgroundComponent

Component to be placed as a background.

required: NO | type: React.FC<ViewProps>

onChange

Callback when sheet position changed to a provided point.

required: NO | type: (index: number) => void

children

A scrollable node or normal view.

required: YES | type: () => React.ReactNode | React.ReactNode[] | React.ReactNode

 

Read Also  Integrate TinyMCE editor in Laravel with a File Manager / Image Upload

Methods

snapTo

Snap to one of the provided points from snapPoints.

type: (index: number) => void

expand

Snap to the maximum provided point from snapPoints.

type: () => void

collapse

Snap to the minimum provided point from snapPoints.

type: () => void

close

Close the bottom sheet.

type: () => void

 

Hooks

useBottomSheet

The library provide useBottomSheet hook to provide the bottom sheet methods, anywhere inside the sheet content.

type: BottomSheetMethods

 

Scrollables

This library provides a pre-integrated views that utilise an internal functionalities with the bottom sheet to allow smooth interactions. These views i called them Scrollables and they are:


No Comments

Leave a Reply

your email address will not be published. required fields are marked *

*
*