diff --git a/README.md b/README.md index bb9c12a..d2408f4 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ -# React Native Multiple Modals +# react-native-multiple-modals [![NPM Version](https://img.shields.io/npm/v/react-native-multiple-modals)](https://www.npmjs.com/package/react-native-multiple-modals) [![NPM Downloads](https://img.shields.io/npm/dm/react-native-multiple-modals)](https://www.npmjs.com/package/react-native-multiple-modals) -![Static Badge](https://img.shields.io/badge/plarforms-iOS%2C_Android%2C_Web-7a34eb) -![Static Badge](https://img.shields.io/badge/types-included-81B622) +![Static Badge](https://img.shields.io/badge/platforms-iOS%2C_Android%2C_Web-7a34eb) +![Static Badge](https://shields.io/badge/TypeScript-3178C6?logo=TypeScript&logoColor=FFF) [![nightly](https://github.com/paufau/react-native-multiple-modals/actions/workflows/nightly.yml/badge.svg)](https://github.com/paufau/react-native-multiple-modals/actions/workflows/nightly.yml) -Native Modal implementation which allows to display multiple Modals simultaneously. +Native layering for React Native modals, sheets and overlays, including native Modal and bottom tabs ![React Native Multiple Modals](./assets/preview.gif) @@ -18,13 +18,14 @@ Native Modal implementation which allows to display multiple Modals simultaneous - 🛠️ Displays above bottom tabs navigation - 📱 Adjusts content when rotated - 💥 Enhanced status bar configuration -- ✅ Accessibility Support +- ✅ Built with Accessibility support in mind (WCAG) **Documentation:** https://paufau.github.io/react-native-multiple-modals/ - [Getting Started](https://paufau.github.io/react-native-multiple-modals/getting-started/) - [Guides](https://paufau.github.io/react-native-multiple-modals/guides/) - [API Reference](https://paufau.github.io/react-native-multiple-modals/api/) +- [Comparison](https://paufau.github.io/react-native-multiple-modals/comparison/) - [Compatibility](https://paufau.github.io/react-native-multiple-modals/compatibility/) ## Installation @@ -75,6 +76,17 @@ const YourComponent = () => { More examples: [example/demo-components/src/modals](https://github.com/paufau/react-native-multiple-modals/tree/main/example/demo-components/src/modals) +## Comparison + +| | Native or JS | Multiple at once | Accessibility | +| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------- | ------------- | +| **react-native-multiple-modals** | Native | ✅ | ✅ | +| [`Modal`](https://reactnative.dev/docs/modal) (React Native) | Native | ❌ on iOS | ✅ | +| [react-native-modal](https://github.com/react-native-modal/react-native-modal) | Native | ❌ | ✅ | +| [react-native-modalfy](https://github.com/colorfy-software/react-native-modalfy) | JS | ✅ | ❌ | +| [@react-navigation/native-stack](https://reactnavigation.org/docs/native-stack-navigator/) | Native | ✅ | ❌ | +| [@gorhom/portal](https://github.com/gorhom/react-native-portal), [react-native-portalize](https://github.com/jeremybarbet/react-native-portalize) | JS | ✅ | ❌ | + ## Contribution #### FOUND A BUG? HELP THE PROJECT AND REPORT IT! diff --git a/package.json b/package.json index 2c7fc0c..70729a4 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "react-native-multiple-modals", "version": "3.5.0", - "description": "Native implementation with the ability to display multiple Modals", + "description": "Native layering for React Native — modals, sheets and overlays above everything, including native Modal and bottom tabs", "author": "Pavel Pakseev (https://github.com/paufau)", "license": "MIT", - "homepage": "https://github.com/paufau/react-native-multiple-modals#readme", + "homepage": "https://paufau.github.io/react-native-multiple-modals/", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", "types": "lib/typescript/index.d.ts", @@ -31,7 +31,13 @@ "ios", "modal", "dialog", - "android" + "android", + "web", + "overlay", + "fabric", + "new-architecture", + "expo", + "accessibility" ], "repository": { "type": "git", diff --git a/website/docs/comparison.md b/website/docs/comparison.md new file mode 100644 index 0000000..6cae803 --- /dev/null +++ b/website/docs/comparison.md @@ -0,0 +1,22 @@ +--- +slug: /comparison +sidebar_position: 5 +title: Comparison +description: How ModalView compares to React Native's Modal and to other modal libraries. +--- + +`ModalView` gives every modal its own `UIWindow` on iOS, its own `Dialog` on Android and its own portal on Web. Any number of them stack, over each other and over a built-in `Modal`. + +| | Native or JS | Multiple at once | Accessibility | +| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------- | ------------- | +| **react-native-multiple-modals** | Native | ✅ | ✅ | +| [`Modal`](https://reactnative.dev/docs/modal) (React Native) | Native | ❌ on iOS | ✅ | +| [react-native-modal](https://github.com/react-native-modal/react-native-modal) | Native | ❌ | ✅ | +| [react-native-modalfy](https://github.com/colorfy-software/react-native-modalfy) | JS | ✅ | ❌ | +| [@react-navigation/native-stack](https://reactnavigation.org/docs/native-stack-navigator/) | Native | ✅ | ❌ | +| [@gorhom/portal](https://github.com/gorhom/react-native-portal), [react-native-portalize](https://github.com/jeremybarbet/react-native-portalize) | JS | ✅ | ❌ | + +## Next steps + +- [Getting Started](./getting-started.md) +- [Multiple modals](./guides/multiple-modals.md) diff --git a/website/docs/compatibility.md b/website/docs/compatibility.md index ac6c5fd..aa9ad96 100644 --- a/website/docs/compatibility.md +++ b/website/docs/compatibility.md @@ -1,18 +1,15 @@ --- slug: /compatibility -sidebar_position: 5 +sidebar_position: 6 title: Compatibility description: Supported platforms and versioning --- -## Platforms - -`ModalView` runs on iOS, Android and Web - ## Versions -| library version | react-native | old arch | new arch | docs | -| --------------- | ------------ | -------- | -------- | ----------------------------------------------------------------------------------- | -| 3.0.0+ | 73+ | ✅ | ✅ | [Documentation](https://paufau.github.io/react-native-multiple-modals/) | -| 2.0.0 - 2.5.0 | 71+ | ✅ | ✅ | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v2.5.0) | -| 1.0.0 - 1.2.6 | 70+ | ✅ | ❌ | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v1.2.6) | +| library version | react-native | platforms | old arch | new arch | docs | +| --------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------------------------- | +| 3.1.0+ | 73+ | iOS Android Web | ✅ | ✅ | [Documentation](https://paufau.github.io/react-native-multiple-modals/) | +| 3.0.0 - 3.0.3 | 73+ | iOS Android | ✅ | ✅ | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v3.0.3) | +| 2.0.0 - 2.5.0 | 71+ | iOS Android | ✅ | ✅ | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v2.5.0) | +| 1.0.0 - 1.2.6 | 70+ | iOS Android | ✅ | ❌ | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v1.2.6) | diff --git a/website/docs/guides/_category_.json b/website/docs/guides/_category_.json index 63e88f6..1692c15 100644 --- a/website/docs/guides/_category_.json +++ b/website/docs/guides/_category_.json @@ -1,7 +1,7 @@ { "label": "Guides", "position": 4, - "collapsed": true, + "collapsed": false, "link": { "type": "generated-index", "slug": "/guides", diff --git a/website/docs/index.md b/website/docs/index.md index e4796ad..ac0fb09 100644 --- a/website/docs/index.md +++ b/website/docs/index.md @@ -2,12 +2,12 @@ slug: / sidebar_position: 1 title: Introduction -description: Native Modal implementation for React Native that displays multiple modals simultaneously on iOS, Android and Web. +description: Native layering for React Native. Modals, sheets and overlays above everything, including native Modal and bottom tabs. --- # React Native Multiple Modals -Native Modal implementation which allows to display multiple Modals simultaneously. +Native layering for React Native modals, sheets and overlays, including native Modal and bottom tabs. ![React Native Multiple Modals](../../assets/preview.gif) @@ -19,10 +19,10 @@ Native Modal implementation which allows to display multiple Modals simultaneous - 🛠️ Displays above bottom tabs navigation - 📱 Adjusts content when rotated - 💥 Enhanced status bar configuration -- ✅ Accessibility Support +- ✅ Built with Accessibility support in mind (WCAG) ## Next steps -- [Getting Started](./getting-started.md): install the package and show your first modal. -- [Guides](/guides): multiple modals, non-dismissible modals, blur backdrops, status bar and edge-to-edge. -- [API Reference](./api.mdx): every `ModalView` prop. +- [Getting Started](./getting-started.md) +- [Guides](/guides) +- [API Reference](./api.mdx) diff --git a/website/docs/troubleshooting.md b/website/docs/troubleshooting.md index b5dddc6..a38acd6 100644 --- a/website/docs/troubleshooting.md +++ b/website/docs/troubleshooting.md @@ -1,6 +1,6 @@ --- slug: /troubleshooting -sidebar_position: 6 +sidebar_position: 7 title: Troubleshooting description: Known issues when using react-native-multiple-modals together with other libraries. --- diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 1181876..3909372 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -38,6 +38,11 @@ color: #fff; } +.label.web { + background: #4a9ae1; + color: #fff; +} + .label.basic { border: 2px solid currentColor; font-weight: 600; @@ -52,6 +57,7 @@ } [data-theme="dark"] .label.android, +[data-theme="dark"] .label.web, [data-theme="dark"] .label.ios { color: #1a1a1a; }