From 26fd56892107efaa32515effb5cd8b4ab567725f Mon Sep 17 00:00:00 2001
From: kirillzyusko <zyusko.kirik@gmail.com>
Date: Tue, 18 Mar 2025 19:56:00 +0100
Subject: [PATCH 1/3] example: toolbar in modal

---
 .../src/screens/Examples/Toolbar/index.tsx    | 47 +++++++++++++++++--
 .../src/screens/Examples/Toolbar/index.tsx    | 47 +++++++++++++++++--
 2 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/FabricExample/src/screens/Examples/Toolbar/index.tsx b/FabricExample/src/screens/Examples/Toolbar/index.tsx
index f54d572dfa..2bb69173e6 100644
--- a/FabricExample/src/screens/Examples/Toolbar/index.tsx
+++ b/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,42 @@ 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)}
+      >
+        <Form />
+      </Modal>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
@@ -190,6 +228,9 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
+  header: {
+    marginRight: 12,
+  },
 });
 
 const blur = (
diff --git a/example/src/screens/Examples/Toolbar/index.tsx b/example/src/screens/Examples/Toolbar/index.tsx
index f54d572dfa..2bb69173e6 100644
--- a/example/src/screens/Examples/Toolbar/index.tsx
+++ b/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,42 @@ 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)}
+      >
+        <Form />
+      </Modal>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
@@ -190,6 +228,9 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
+  header: {
+    marginRight: 12,
+  },
 });
 
 const blur = (

From baa85ed8ab0be9c526a3688d78321e4a164c7c71 Mon Sep 17 00:00:00 2001
From: kirillzyusko <zyusko.kirik@gmail.com>
Date: Tue, 18 Mar 2025 20:01:48 +0100
Subject: [PATCH 2/3] fix: android UI

---
 FabricExample/src/screens/Examples/Toolbar/index.tsx | 9 ++++++++-
 example/src/screens/Examples/Toolbar/index.tsx       | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/FabricExample/src/screens/Examples/Toolbar/index.tsx b/FabricExample/src/screens/Examples/Toolbar/index.tsx
index 2bb69173e6..397d5e34ea 100644
--- a/FabricExample/src/screens/Examples/Toolbar/index.tsx
+++ b/FabricExample/src/screens/Examples/Toolbar/index.tsx
@@ -197,12 +197,16 @@ export default function ToolbarExample({ navigation }: Props) {
     <>
       <Form />
       <Modal
+        navigationBarTranslucent
+        statusBarTranslucent
         animationType="slide"
         presentationStyle="formSheet"
         visible={isVisible}
         onRequestClose={() => setVisible(false)}
       >
-        <Form />
+        <View style={styles.modal}>
+          <Form />
+        </View>
       </Modal>
     </>
   );
@@ -231,6 +235,9 @@ const styles = StyleSheet.create({
   header: {
     marginRight: 12,
   },
+  modal: {
+    marginTop: 32,
+  },
 });
 
 const blur = (
diff --git a/example/src/screens/Examples/Toolbar/index.tsx b/example/src/screens/Examples/Toolbar/index.tsx
index 2bb69173e6..397d5e34ea 100644
--- a/example/src/screens/Examples/Toolbar/index.tsx
+++ b/example/src/screens/Examples/Toolbar/index.tsx
@@ -197,12 +197,16 @@ export default function ToolbarExample({ navigation }: Props) {
     <>
       <Form />
       <Modal
+        navigationBarTranslucent
+        statusBarTranslucent
         animationType="slide"
         presentationStyle="formSheet"
         visible={isVisible}
         onRequestClose={() => setVisible(false)}
       >
-        <Form />
+        <View style={styles.modal}>
+          <Form />
+        </View>
       </Modal>
     </>
   );
@@ -231,6 +235,9 @@ const styles = StyleSheet.create({
   header: {
     marginRight: 12,
   },
+  modal: {
+    marginTop: 32,
+  },
 });
 
 const blur = (

From cee333f1fe913bb21378f4899ed5c8395fc2a147 Mon Sep 17 00:00:00 2001
From: kirillzyusko <zyusko.kirik@gmail.com>
Date: Tue, 18 Mar 2025 20:11:22 +0100
Subject: [PATCH 3/3] fix: remove translucency

---
 FabricExample/src/screens/Examples/Toolbar/index.tsx | 2 --
 example/src/screens/Examples/Toolbar/index.tsx       | 2 --
 2 files changed, 4 deletions(-)

diff --git a/FabricExample/src/screens/Examples/Toolbar/index.tsx b/FabricExample/src/screens/Examples/Toolbar/index.tsx
index 397d5e34ea..f82cf99071 100644
--- a/FabricExample/src/screens/Examples/Toolbar/index.tsx
+++ b/FabricExample/src/screens/Examples/Toolbar/index.tsx
@@ -197,8 +197,6 @@ export default function ToolbarExample({ navigation }: Props) {
     <>
       <Form />
       <Modal
-        navigationBarTranslucent
-        statusBarTranslucent
         animationType="slide"
         presentationStyle="formSheet"
         visible={isVisible}
diff --git a/example/src/screens/Examples/Toolbar/index.tsx b/example/src/screens/Examples/Toolbar/index.tsx
index 397d5e34ea..f82cf99071 100644
--- a/example/src/screens/Examples/Toolbar/index.tsx
+++ b/example/src/screens/Examples/Toolbar/index.tsx
@@ -197,8 +197,6 @@ export default function ToolbarExample({ navigation }: Props) {
     <>
       <Form />
       <Modal
-        navigationBarTranslucent
-        statusBarTranslucent
         animationType="slide"
         presentationStyle="formSheet"
         visible={isVisible}