Releases: kuraydev/react-native-modalkit
v0.1.0 — first release
A modern, drop-in replacement for https://github.com/react-native-modal/react-native-modal,
rebuilt on Reanimated 3 and Gesture Handler v2. Built for React Native 0.78+ and the New
Architecture (Fabric) — actively maintained.
Why?
react-native-modal is no longer actively maintained and has no New Architecture support. It
still leans on react-native-animatable, the legacy Animated API, and PanResponder. modalkit
keeps the API surface so migration is one line, but the internals are rewired:
- import Modal from "react-native-modal";
- import Modal from "react-native-modalkit";
What's in 0.1.0
- ⚡ Animations driven by Reanimated 3 worklets — no JS-thread jank
- 👆 Swipes via react-native-gesture-handler v2 — plays nicely with nested scrollables
- 🪄 Drop-in API — every public prop from react-native-modal carries the same name and shape
- 🧰 Imperative API — useModal() hook, handle
- 🌐 Global manager — + ModalManager.show() for queue/stack-style modals
- 🤝 Promise helpers — await ModalManager.confirm() / .alert() chains safely (resolve only
after the native dismiss completes) - 🎨 27 built-in animation presets + custom keyframes + Reanimated config (springs supported,
with preset field for visible overshoot) - 📍 position shortcut — "center" | "top" | "bottom" | "fullscreen"
- ♿️ Reduced-motion aware out of the box
- 🔁 Reliable onModalHide timing — fires only after the native dismiss completes, so chained
modals never stack and lock the screen - 🆕 Built for RN 0.78+ and the New Architecture (Fabric)
- 🟦 Full TypeScript types, dual CJS/ESM build
Install
npm install react-native-modalkit react-native-reanimated react-native-gesture-handler
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started ·
https://docs.swmansion.com/react-native-gesture-handler/docs/installation
Migrating from react-native-modal
For most projects, this is the entire diff:
- import Modal from "react-native-modal";
- import Modal from "react-native-modalkit";
Legacy props that don't apply (useNativeDriver, useNativeDriverForBackdrop) are accepted as
no-ops with a one-time dev-only warning.
Quick start
import Modal from "react-native-modalkit";
<Modal
isVisible={isOpen}
position="bottom"
swipeDirection="down"
onSwipeComplete={close}
onBackdropPress={close}
<View style={{ backgroundColor: "white", padding: 24, borderTopLeftRadius: 24 }}>
<Text>Hello modalkit</Text>
</View>
📦 https://www.npmjs.com/package/react-native-modalkit · 📚 ./README.md · 🧪 ./example · 🐛
https://github.com/kuraydev/react-native-modalkit/issues