Skip to content

Commit b36a7f2

Browse files
committed
feat: insets prop for KeyboardToolbar
1 parent 9080f31 commit b36a7f2

5 files changed

Lines changed: 46 additions & 1 deletion

File tree

  • FabricExample/src/screens/Examples/Toolbar
  • docs
    • docs/api/components/keyboard-toolbar
    • versioned_docs/version-1.16.0/api/components/keyboard-toolbar
  • example/src/screens/Examples/Toolbar
  • src/components/KeyboardToolbar

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
KeyboardAwareScrollView,
77
KeyboardToolbar,
88
} from "react-native-keyboard-controller";
9+
import { useSafeAreaInsets } from "react-native-safe-area-context";
910

1011
import TextInput from "../../../components/TextInput";
1112

@@ -33,6 +34,7 @@ export default function ToolbarExample() {
3334
const onHideAutoFill = useCallback(() => {
3435
setShowAutoFill(false);
3536
}, []);
37+
const insets = useSafeAreaInsets();
3638

3739
return (
3840
<>
@@ -158,6 +160,7 @@ export default function ToolbarExample() {
158160
<AutoFillContacts onContactSelected={onContactSelected} />
159161
) : null
160162
}
163+
insets={insets}
161164
opacity={Platform.OS === "ios" ? "4F" : "DD"}
162165
onDoneCallback={haptic}
163166
onNextCallback={haptic}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,20 @@ const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
144144
<KeyboardToolbar icon={Icon} />;
145145
```
146146

147+
### `insets`
148+
149+
An object containing `left` and `right` properties that define the `KeyboardToolbar` padding. This helps prevent overlap with system UI elements, especially in landscape orientation:
150+
151+
```tsx
152+
import { useSafeAreaInsets } from "react-native-safe-area-context";
153+
154+
// ...
155+
156+
const insets = useSafeAreaInsets();
157+
158+
<KeyboardToolbar insets={insets} />;
159+
```
160+
147161
### `onDoneCallback`
148162

149163
A callback that is called when the user presses the **done** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).

docs/versioned_docs/version-1.16.0/api/components/keyboard-toolbar/index.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,20 @@ const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
144144
<KeyboardToolbar icon={Icon} />;
145145
```
146146

147+
### `insets`
148+
149+
An object containing `left` and `right` properties that define the `KeyboardToolbar` padding. This helps prevent overlap with system UI elements, especially in landscape orientation:
150+
151+
```tsx
152+
import { useSafeAreaInsets } from "react-native-safe-area-context";
153+
154+
// ...
155+
156+
const insets = useSafeAreaInsets();
157+
158+
<KeyboardToolbar insets={insets} />;
159+
```
160+
147161
### `onDoneCallback`
148162

149163
A callback that is called when the user presses the **done** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
KeyboardAwareScrollView,
77
KeyboardToolbar,
88
} from "react-native-keyboard-controller";
9+
import { useSafeAreaInsets } from "react-native-safe-area-context";
910

1011
import TextInput from "../../../components/TextInput";
1112

@@ -33,6 +34,7 @@ export default function ToolbarExample() {
3334
const onHideAutoFill = useCallback(() => {
3435
setShowAutoFill(false);
3536
}, []);
37+
const insets = useSafeAreaInsets();
3638

3739
return (
3840
<>
@@ -158,6 +160,7 @@ export default function ToolbarExample() {
158160
<AutoFillContacts onContactSelected={onContactSelected} />
159161
) : null
160162
}
163+
insets={insets}
161164
opacity={Platform.OS === "ios" ? "4F" : "DD"}
162165
onDoneCallback={haptic}
163166
onNextCallback={haptic}

src/components/KeyboardToolbar/index.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
1515
import type { ReactNode } from "react";
1616
import type { GestureResponderEvent, ViewProps } from "react-native";
1717

18+
type SafeAreaInsets = {
19+
left: number;
20+
right: number;
21+
};
22+
1823
export type KeyboardToolbarProps = Omit<
1924
ViewProps,
2025
"style" | "testID" | "children"
@@ -54,6 +59,7 @@ export type KeyboardToolbarProps = Omit<
5459
* A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
5560
*/
5661
opacity?: HEX;
62+
insets?: SafeAreaInsets;
5763
} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
5864

5965
const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
@@ -83,6 +89,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
8389
opacity = DEFAULT_OPACITY,
8490
offset: { closed = 0, opened = 0 } = {},
8591
enabled = true,
92+
insets,
8693
...rest
8794
}) => {
8895
const colorScheme = useColorScheme();
@@ -110,8 +117,12 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
110117
{
111118
backgroundColor: `${theme[colorScheme].background}${opacity}`,
112119
},
120+
{
121+
paddingLeft: insets?.left,
122+
paddingRight: insets?.right,
123+
},
113124
],
114-
[colorScheme, opacity, theme],
125+
[colorScheme, opacity, theme, insets],
115126
);
116127
const offset = useMemo(
117128
() => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),

0 commit comments

Comments
 (0)