refactor: revision after self review

Author: kirillzyusko

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

@@ -156,18 +156,26 @@ function Form() {
         />
       </KeyboardAwareScrollView>
       <KeyboardToolbar
-        blur={blur}
-        content={
-          showAutoFill ? (
-            <AutoFillContacts onContactSelected={onContactSelected} />
-          ) : null
-        }
         insets={insets}
         opacity={Platform.OS === "ios" ? "4F" : "DD"}
-        onDoneCallback={haptic}
-        onNextCallback={haptic}
-        onPrevCallback={haptic}
-      />
+      >
+        <KeyboardToolbar.Background>
+          <BlurView
+            blurAmount={32}
+            blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
+            reducedTransparencyFallbackColor="white"
+            style={styles.absolute}
+          />
+        </KeyboardToolbar.Background>
+        <KeyboardToolbar.Content>
+          {showAutoFill ? (
+            <AutoFillContacts onContactSelected={onContactSelected} />
+          ) : null}
+        </KeyboardToolbar.Content>
+        <KeyboardToolbar.Prev onPress={haptic} />
+        <KeyboardToolbar.Next onPress={haptic} />
+        <KeyboardToolbar.Done onPress={haptic} />
+      </KeyboardToolbar>
     </>
   );
 }
@@ -238,12 +246,3 @@ const styles = StyleSheet.create({
     marginTop: 32,
   },
 });
-
-const blur = (
-  <BlurView
-    blurAmount={32}
-    blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
-    reducedTransparencyFallbackColor="white"
-    style={styles.absolute}
-  />
-);

docs/docs/api/components/keyboard-toolbar/index.mdx

@@ -535,6 +535,12 @@ To migrate from the legacy prop-based API to the compound API:
 </KeyboardToolbar>
 ```
 
+:::info Struggle to migrate?
+
+If you found any bugs or inconsistent behavior comparing to old implementation and can not migrate to new compound API - don't hesitate to open an [issue](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/new?assignees=kirillzyusko&labels=bug&template=bug_report.md&title=). It will help the project 🙏
+
+:::
+
 ## Limitations
 
 - By default `TextInput` search happens within `UIViewController`/`FragmentActivity` (current screen if you are using `react-native-screens`)

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

@@ -156,18 +156,26 @@ function Form() {
         />
       </KeyboardAwareScrollView>
       <KeyboardToolbar
-        blur={blur}
-        content={
-          showAutoFill ? (
-            <AutoFillContacts onContactSelected={onContactSelected} />
-          ) : null
-        }
         insets={insets}
         opacity={Platform.OS === "ios" ? "4F" : "DD"}
-        onDoneCallback={haptic}
-        onNextCallback={haptic}
-        onPrevCallback={haptic}
-      />
+      >
+        <KeyboardToolbar.Background>
+          <BlurView
+            blurAmount={32}
+            blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
+            reducedTransparencyFallbackColor="white"
+            style={styles.absolute}
+          />
+        </KeyboardToolbar.Background>
+        <KeyboardToolbar.Content>
+          {showAutoFill ? (
+            <AutoFillContacts onContactSelected={onContactSelected} />
+          ) : null}
+        </KeyboardToolbar.Content>
+        <KeyboardToolbar.Prev onPress={haptic} />
+        <KeyboardToolbar.Next onPress={haptic} />
+        <KeyboardToolbar.Done onPress={haptic} />
+      </KeyboardToolbar>
     </>
   );
 }
@@ -238,12 +246,3 @@ const styles = StyleSheet.create({
     marginTop: 32,
   },
 });
-
-const blur = (
-  <BlurView
-    blurAmount={32}
-    blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
-    reducedTransparencyFallbackColor="white"
-    style={styles.absolute}
-  />
-);

src/components/KeyboardToolbar/compound/components/Done.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useCallback, useMemo } from "react";
 import { StyleSheet, Text } from "react-native";
 
+import { useKeyboardState } from "../../../../hooks";
 import { KeyboardController } from "../../../../module";
 import Button from "../../Button";
 import { TEST_ID_KEYBOARD_TOOLBAR_DONE } from "../../constants";
@@ -18,8 +19,9 @@ const Done: React.FC<Omit<ButtonSubProps, "icon"> & { text?: ReactNode }> = ({
   text,
   button: ButtonContainer = Button,
 }) => {
+  const colorScheme = useKeyboardState((state) => state.appearance);
   const context = useToolbarContext();
-  const { theme, colorScheme } = context;
+  const { theme } = context;
 
   const doneStyle = useMemo(
     () => [styles.doneButton, { color: theme[colorScheme].primary }],

src/components/KeyboardToolbar/compound/context.ts

@@ -4,7 +4,6 @@ import type { KeyboardToolbarTheme } from "../types";
 
 type ToolbarContextType = {
   theme: KeyboardToolbarTheme;
-  colorScheme: "light" | "dark";
   isPrevDisabled: boolean;
   isNextDisabled: boolean;
 };

src/components/KeyboardToolbar/index.tsx

@@ -178,11 +178,10 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
   const contextValue = useMemo(
     () => ({
       theme,
-      colorScheme,
       isPrevDisabled,
       isNextDisabled,
     }),
-    [theme, colorScheme, button, icon, isPrevDisabled, isNextDisabled],
+    [theme, isPrevDisabled, isNextDisabled],
   );
 
   return (