docs: update modal docs

Author: calintamas

docs/modal-usage.md

@@ -25,34 +25,7 @@ Under the hood, this `ref` is used when you imperatively call `Toast.show()` or
 
 When you have a [Modal](https://reactnative.dev/docs/modal), things get different. This `Modal` component is [_above_ React's root `View`](https://stackoverflow.com/questions/39766350/bring-view-on-top-of-modal-using-zindex-style-with-react-native), so the only way to show something _on top of the modal_ is to render it inside the `Modal` itself.
 
-This means **you need a new instance** of `<Toast />` rendered inside your `Modal`.
-
-> Same behavior when using [react-native-modal](https://github.com/react-native-modal/react-native-modal) or a [NativeStackNavigator](https://reactnavigation.org/docs/native-stack-navigator#presentation) with `presentation: 'modal'`
-
-The `ref` will still be tracked automatically. Whichever `<Toast />` instance last had its `ref` set will be used when showing/hiding.
-
-```js
-<>
-
-  {** This `Toast` will show when neither the native stack screen nor `Modal` are presented. *}
-  <Toast />
-
-  <NativeStackNavigator.Screen>
-
-    {** This `Toast` will show when the `NativeStackNavigator.Screen` is visible, but the `Modal` is NOT visible. *}
-    <Toast />
-
-    <Modal>
-
-      {** This `Toast` will show when both the `NativeStackNavigator.Screen` and the `Modal` are visible. *}
-      <Toast />
-
-    </Modal>
-  </NativeStackNavigator.Screen>
-</>
-```
-
-So, when you have a `Modal`, the implementation looks like this:
+This means **you need a new instance** of `<Toast />` rendered inside your `Modal` (as well as keeping the existing `<Toast />` instance outside, in your App's entry point).
 
 ```diff
 // App.jsx
@@ -75,3 +48,26 @@ export function App(props) {
 ```
 
 Everything else works as usual; you can show and hide Toasts using the imperative API: `Toast.show()` or `Toast.hide()`. When the `Modal` is visible, the `ref` from inside the `Modal` will be used, otherwise the one outside.
+
+> The `ref` is tracked automatically; whichever `<Toast />` instance last had its `ref` set will be used when showing/hiding.
+
+### Notes regarding `react-native-modal` or `NativeStackNavigator`
+
+The same requirements as above apply when using [react-native-modal](https://github.com/react-native-modal/react-native-modal) or a [NativeStackNavigator](https://reactnavigation.org/docs/native-stack-navigator#presentation) with `presentation: 'modal'`:
+
+```js
+<>
+  {/* This `Toast` will show when neither the native stack screen nor `Modal` are presented */}
+  <Toast />
+
+  <NativeStackNavigator.Screen>
+    {/* This `Toast` will show when the `NativeStackNavigator.Screen` is visible, but the `Modal` is NOT visible. */}
+    <Toast />
+
+    <Modal>
+      {/* This `Toast` will show when both the `NativeStackNavigator.Screen` and the `Modal` are visible. */}
+      <Toast />
+    </Modal>
+  </NativeStackNavigator.Screen>
+</>
+```