feat: add working and testable example

Author: kirillzyusko

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

@@ -1,3 +1,4 @@
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 import React, { useCallback, useEffect, useState } from "react";
 import { Modal, Platform, StyleSheet, Text, View } from "react-native";
 import {
@@ -214,6 +215,24 @@ export default function ToolbarExample({ navigation }: Props) {
           <Form />
         </View>
       </Modal>
+      <BottomSheet index={-1}>
+        <BottomSheetView style={styles.bottomSheetContent}>
+          <KeyboardToolbar.Group>
+            <TextInput
+              keyboardType="default"
+              placeholder="Group input 1"
+              testID="TextInput#14"
+              title="Group Input 1"
+            />
+            <TextInput
+              keyboardType="default"
+              placeholder="Group input 2"
+              testID="TextInput#15"
+              title="Group Input 2"
+            />
+          </KeyboardToolbar.Group>
+        </BottomSheetView>
+      </BottomSheet>
     </>
   );
 }
@@ -245,4 +264,7 @@ const styles = StyleSheet.create({
   modal: {
     marginTop: 32,
   },
+  bottomSheetContent: {
+    flex: 1,
+  },
 });

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

@@ -1,3 +1,4 @@
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 import React, { useCallback, useEffect, useState } from "react";
 import { Modal, Platform, StyleSheet, Text, View } from "react-native";
 import {
@@ -154,22 +155,6 @@ function Form() {
           title="Flat"
           onFocus={onHideAutoFill}
         />
-        <KeyboardToolbar.Group>
-          <TextInput
-            keyboardType="default"
-            placeholder="Group input 1"
-            testID="TextInput#14"
-            title="Group Input 1"
-            onFocus={onHideAutoFill}
-          />
-          <TextInput
-            keyboardType="default"
-            placeholder="Group input 2"
-            testID="TextInput#15"
-            title="Group Input 2"
-            onFocus={onHideAutoFill}
-          />
-        </KeyboardToolbar.Group>
       </KeyboardAwareScrollView>
       <KeyboardToolbar
         insets={insets}
@@ -230,6 +215,24 @@ export default function ToolbarExample({ navigation }: Props) {
           <Form />
         </View>
       </Modal>
+      <BottomSheet index={-1}>
+        <BottomSheetView style={styles.bottomSheetContent}>
+          <KeyboardToolbar.Group>
+            <TextInput
+              keyboardType="default"
+              placeholder="Group input 1"
+              testID="TextInput#14"
+              title="Group Input 1"
+            />
+            <TextInput
+              keyboardType="default"
+              placeholder="Group input 2"
+              testID="TextInput#15"
+              title="Group Input 2"
+            />
+          </KeyboardToolbar.Group>
+        </BottomSheetView>
+      </BottomSheet>
     </>
   );
 }
@@ -261,4 +264,7 @@ const styles = StyleSheet.create({
   modal: {
     marginTop: 32,
   },
+  bottomSheetContent: {
+    flex: 1,
+  },
 });

package.json

@@ -194,7 +194,8 @@
         "OverKeyboardView": "OverKeyboardView",
         "KeyboardBackgroundView": "KeyboardBackgroundView",
         "KeyboardExtender": "KeyboardExtender",
-        "ClippingScrollViewDecoratorView": "ClippingScrollViewDecoratorView"
+        "ClippingScrollViewDecoratorView": "ClippingScrollViewDecoratorView",
+        "KeyboardToolbarGroupView": "KeyboardToolbarGroupView"
       }
     }
   },