Migrate from react-native-modal

Most react-native-modal code builds a bottom sheet or a dialog by hand: style={{ justifyContent: 'flex-end', margin: 0 }}, a white box with rounded corners, and the same close function passed to three callbacks. BottomSheet is that sheet: one onClose for every way of closing, and the surface, handle and padding drawn for you.

React Native 0.88

react-native-modal 14.0.0-rc.1, the latest release, calls InteractionManager.createInteractionHandle. React Native 0.88 no longer exports InteractionManager, so the modal throws Cannot read property 'createInteractionHandle' of undefined as soon as it opens. BottomSheet uses React Native core only and works on 0.88.

Code changes

- import Modal from 'react-native-modal';
+ import { BottomSheet } from '@elik56a/react-native-pickers';

- <Modal
-   isVisible={open}
-   onBackdropPress={close}
-   onBackButtonPress={close}
-   onSwipeComplete={close}
-   swipeDirection="down"
-   style={{ justifyContent: 'flex-end', margin: 0 }}
- >
-   <View style={{ backgroundColor: 'white', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16 }}>
-     <Filters />
-   </View>
- </Modal>
+ <BottomSheet visible={open} onClose={close}>
+   <Filters />
+ </BottomSheet>

For a centered dialog, the default react-native-modal look, pass presentation="modal".

Props

react-native-modal	React Native Pickers
isVisible	visible
onBackdropPress / onBackButtonPress / onSwipeComplete	one onClose
swipeDirection="down"	enableSwipeToClose (default true)
swipeDirection up, left or right	—
no onBackdropPress	closeOnBackdropPress={false}
style={{ justifyContent: 'flex-end', margin: 0 }}	the default: a bottom sheet, or a centered modal on wide web windows (presentation="bottomSheet" keeps the sheet)
a centered modal	presentation="modal"
backdropColor / backdropOpacity	styles={{ backdrop: { backgroundColor } }}, or the theme's backdrop colour
animationIn / animationOut / animationInTiming	slide up, or fade and rise as a modal; theme={{ animation: { duration } }}
onModalShow / onModalHide	onOpened / onClosed
avoidKeyboard	built in
propagateSwipe	a ScrollView inside just scrolls; the handle and header drag the sheet
coverScreen={false} / hasBackdrop={false}	—

See all migration guides for other libraries.