@shaquillehinds/smooth-modal v1.23.0

A Simple React Native Bottom Sheet That Just Works.

Works The Same On IOS & Android

P.S There are other components in this package such as:

• SmoothBottomModal
• SmoothBottomSheet
• SmoothBottomFlatlist
• SmoothBottomScrollView
• SmoothNotificationProvider
• useSmoothNotification

The documentation here only covers SmoothBottomModal and SmoothBottomSheet.

SmoothBottomModal & SmoothBottomSheet Documentation

The SmoothBottomModal & SmoothBottomSheet is a customizable, flexible bottom sheet component for React Native, supporting keyboard avoidance, drag behavior, and more.

UnlikeSmoothBottomModal,SmoothBottomSheet doesn't have a backdrop component, can optionally stay mounted when "close" is called and it can't use React Native's default Modal for rendering a new root view overlay.

Required Peer Dependencies

"react-native-gesture-handler": ">=2.7.0",
"react-native-reanimated": ">=3.0.0"

Installation

NPM

npm install @shaquillehinds/smooth-modal

Yarn

yarn add @shaquillehinds/smooth-modal

Basic Usage

import { SmoothBottomModal } from '@shaquillehinds/smooth-modal';

const [showModal, setShowModal] = useState(false);

<SmoothBottomModal showModal={showModal} setShowModal={setShowModal}>
  {/* Modal Content */}
</SmoothBottomModal>;

OR

const ref = useRef<BottomSheetModalController>(null);

<SmoothBottomModal ref={ref}>{/* Modal Content */}</SmoothBottomModal>;

Props

Core Props

Use Either ref or showModal, avoid using both as it can lead to unpredictable behavoir.

Drag Behavior

Keyboard Handling

Mounting Behavior

Overlay Behavior

Content Delay

Styling

Backdrop (SmoothBottomModal Only)

Tips

• Use keepMounted + bottomOffset on SmoothBottomSheet if you want the modal to stay slightly "peeking" when not fully open. This won't work on SmoothBottomModal only SmoothBottomSheet.
• Set a minHeight on the contentContainerStyle if using showContentDelay.type: 'mount' to avoid abrupt height changes.
• Use inputsForKeyboardToAvoid for finer control of when padding should be added for the keyboard.
• Provide a custom BackdropComponent if you want to personalize the modal background or add animations.

Examples

Modal with Keyboard Avoidance

const [showModal, setShowModal] = useState(false);
const inputRef = useRef<TextInput>(null);

<SmoothBottomModal
  showModal={showModal}
  setShowModal={setShowModal}
  avoidKeyboard
  inputsForKeyboardToAvoid={[inputRef]}
>
  <TextInput ref={inputRef} placeholder="Type here" />
</SmoothBottomModal>;

Draggable Modal With ScrollView Or Flatlist

If you need the modal to be draggable when scrollable content is at the beginning (scroll offset at 0).

import {
  SmoothBottomModal,
  SmoothBottomScrollView,
} from '@shaquillehinds/smooth-modal';

const [showModal, setShowModal] = useState(false);

<SmoothBottomModal showModal={showModal} setShowModal={setShowModal}>
  <SmoothBottomScrollView>{/* ScrollView Content */}</SmoothBottomScrollView>
</SmoothBottomModal>;