Skip to content

Releases: kuraydev/react-native-modalkit

v0.1.0 — first release

04 May 13:05

Choose a tag to compare

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