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-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.
- 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".
| 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.