docs: add comparison table

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!

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 <pakseev.1999@gmail.com> (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",

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)

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+          | <span className="label ios">iOS</span> <span className="label android">Android</span> <span className="label web">Web</span> | ✅        | ✅        | [Documentation](https://paufau.github.io/react-native-multiple-modals/)             |
+| 3.0.0 - 3.0.3   | 73+          | <span className="label ios">iOS</span> <span className="label android">Android</span>                                        | ✅        | ✅        | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v3.0.3) |
+| 2.0.0 - 2.5.0   | 71+          | <span className="label ios">iOS</span> <span className="label android">Android</span>                                        | ✅        | ✅        | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v2.5.0) |
+| 1.0.0 - 1.2.6   | 70+          | <span className="label ios">iOS</span> <span className="label android">Android</span>                                        | ✅        | ❌        | [Documentation](https://github.com/paufau/react-native-multiple-modals/tree/v1.2.6) |

website/docs/guides/_category_.json

@@ -1,7 +1,7 @@
 {
   "label": "Guides",
   "position": 4,
-  "collapsed": true,
+  "collapsed": false,
   "link": {
     "type": "generated-index",
     "slug": "/guides",

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)

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

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;
 }