example: toolbar in modal (#869)

## 📜 Description

I added it many times already, so let's include in example app.

## 💡 Motivation and Context

Sometimes I have to test how `KeyboardToolbar` works in `Modal`, so I
decided to include that example in test app so that I don't need to make
these changes every time.

Reproduction for
#867

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- added KYC button in `KeyboardToolbar` screen;

## 🤔 How Has This Been Tested?

Tested on Android (Medium Phone API 35) and iOS (iPhone 15 Pro, iOS
17.5) simulators.

## 📸 Screenshots (if appropriate):

|Android|iOS|
|--------|---|
|<img width="380" alt="image"
src="https://github.com/user-attachments/assets/0e3207fa-4adc-4548-aea3-035da822d639"
/>|<image width="380"
src="https://github.com/user-attachments/assets/b5be7588-b1e8-4aa2-ba4d-509ba6186f52">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

FabricExample/src/screens/Examples/Toolbar/index.tsx

@@ -1,6 +1,6 @@
 import { BlurView } from "@react-native-community/blur";
-import React, { useCallback, useState } from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import React, { useCallback, useEffect, useState } from "react";
+import { Modal, Platform, StyleSheet, Text, View } from "react-native";
 import { trigger } from "react-native-haptic-feedback";
 import {
   KeyboardAwareScrollView,
@@ -13,6 +13,8 @@ import TextInput from "../../../components/TextInput";
 import AutoFillContacts from "./Contacts";
 
 import type { Contact } from "./Contacts";
+import type { ExamplesStackParamList } from "../../../navigation/ExamplesStack";
+import type { StackScreenProps } from "@react-navigation/stack";
 
 // Optional configuration
 const options = {
@@ -22,7 +24,7 @@ const options = {
 const haptic = () =>
   trigger(Platform.OS === "ios" ? "impactLight" : "keyboardTap", options);
 
-export default function ToolbarExample() {
+function Form() {
   const [showAutoFill, setShowAutoFill] = useState(false);
   const [name, setName] = useState("");
   const onContactSelected = useCallback((contact: Contact) => {
@@ -170,6 +172,44 @@ export default function ToolbarExample() {
   );
 }
 
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+export default function ToolbarExample({ navigation }: Props) {
+  const [isVisible, setVisible] = useState(false);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <View style={styles.row}>
+          <Text
+            style={styles.header}
+            testID="toolbar.kyc"
+            onPress={() => setVisible(true)}
+          >
+            KYC
+          </Text>
+        </View>
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <>
+      <Form />
+      <Modal
+        animationType="slide"
+        presentationStyle="formSheet"
+        visible={isVisible}
+        onRequestClose={() => setVisible(false)}
+      >
+        <View style={styles.modal}>
+          <Form />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
@@ -190,6 +230,12 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
+  header: {
+    marginRight: 12,
+  },
+  modal: {
+    marginTop: 32,
+  },
 });
 
 const blur = (

example/src/screens/Examples/Toolbar/index.tsx

@@ -1,6 +1,6 @@
 import { BlurView } from "@react-native-community/blur";
-import React, { useCallback, useState } from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import React, { useCallback, useEffect, useState } from "react";
+import { Modal, Platform, StyleSheet, Text, View } from "react-native";
 import { trigger } from "react-native-haptic-feedback";
 import {
   KeyboardAwareScrollView,
@@ -13,6 +13,8 @@ import TextInput from "../../../components/TextInput";
 import AutoFillContacts from "./Contacts";
 
 import type { Contact } from "./Contacts";
+import type { ExamplesStackParamList } from "../../../navigation/ExamplesStack";
+import type { StackScreenProps } from "@react-navigation/stack";
 
 // Optional configuration
 const options = {
@@ -22,7 +24,7 @@ const options = {
 const haptic = () =>
   trigger(Platform.OS === "ios" ? "impactLight" : "keyboardTap", options);
 
-export default function ToolbarExample() {
+function Form() {
   const [showAutoFill, setShowAutoFill] = useState(false);
   const [name, setName] = useState("");
   const onContactSelected = useCallback((contact: Contact) => {
@@ -170,6 +172,44 @@ export default function ToolbarExample() {
   );
 }
 
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+export default function ToolbarExample({ navigation }: Props) {
+  const [isVisible, setVisible] = useState(false);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <View style={styles.row}>
+          <Text
+            style={styles.header}
+            testID="toolbar.kyc"
+            onPress={() => setVisible(true)}
+          >
+            KYC
+          </Text>
+        </View>
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <>
+      <Form />
+      <Modal
+        animationType="slide"
+        presentationStyle="formSheet"
+        visible={isVisible}
+        onRequestClose={() => setVisible(false)}
+      >
+        <View style={styles.modal}>
+          <Form />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
@@ -190,6 +230,12 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
+  header: {
+    marginRight: 12,
+  },
+  modal: {
+    marginTop: 32,
+  },
 });
 
 const blur = (