feat: rounded prop for KeyboardEffects (#1578)

## 📜 Description

Added `rounded` property for `KeyboardEffects` component.

## 💡 Motivation and Context

These changes were requested in
#1567

In fact it makes sense - if you want to render a solid background so
that messages are not visible in corners, i. e. create effect of
shrinking view - why not? So I made it cusomizable.

Few important findings:
- since we now control rounding via new prop I reverted changes where
`translucent` property by default make keyboard not-rounded;
- I intentionally chose `rounded` name to be consistent with
`translucent` (not `isRounded` etc.)

Closes
#1567

## 📢 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 -->

### Docs

- added documentation for new `rounded` property;

### JS

- `translucent` doesn't disable rounding by default;
- added new `rounded` property.

## 🤔 How Has This Been Tested?

Tested manually in example app.

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|
|<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/5324c943-be74-4ee3-ba52-5c3db826d9ce"
/>|<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/49caf660-bda2-4a82-848f-10d91c4f6586"
/>|

## 📝 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/AIKeyboard/index.tsx

@@ -22,7 +22,7 @@ const AIKeyboard = () => (
     <SafeAreaView style={styles.hero}>
       <Text style={styles.title}>Describe an image or add a suggestion.</Text>
     </SafeAreaView>
-    <KeyboardEffects translucent>
+    <KeyboardEffects translucent rounded={false}>
       <KeyboardGradient />
     </KeyboardEffects>
     <KeyboardStickyView offset={{ opened: 16 }} style={styles.sticky}>

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

@@ -61,3 +61,13 @@ A boolean prop indicating whether the keyboard backdrop should be translucent. W
 :::note Multiple instances
 Multiple mounted `KeyboardEffects` instances share a single native keyboard state, reconciled the same way React Native's `StatusBar` reconciles multiple instances: each instance's `translucent` value sits on a shared stack, and whichever instance was mounted (or updated) most recently wins. When that instance unmounts, the keyboard falls back to the value of the next-most-recently-mounted instance still on screen — not straight to opaque.
 :::
+
+### `rounded`
+
+A boolean prop indicating whether the effect view should match the keyboard's rounded top corners. When `true` (default), content behind an opaque keyboard is clipped to those corners. Set it to `false` to ignore the automatic corner rounding and fully cover the keyboard bounds — useful when a scrollable surface behind the keyboard should remain completely occluded.
+
+```tsx
+<KeyboardEffects rounded={false}>
+  <View style={{ flex: 1, backgroundColor: "purple" }} />
+</KeyboardEffects>
+```

docs/versioned_docs/version-1.22.0/api/components/keyboard-effects/index.mdx

@@ -61,3 +61,13 @@ A boolean prop indicating whether the keyboard backdrop should be translucent. W
 :::note Multiple instances
 Multiple mounted `KeyboardEffects` instances share a single native keyboard state, reconciled the same way React Native's `StatusBar` reconciles multiple instances: each instance's `translucent` value sits on a shared stack, and whichever instance was mounted (or updated) most recently wins. When that instance unmounts, the keyboard falls back to the value of the next-most-recently-mounted instance still on screen — not straight to opaque.
 :::
+
+### `rounded`
+
+A boolean prop indicating whether the effect view should match the keyboard's rounded top corners. When `true` (default), content behind an opaque keyboard is clipped to those corners. Set it to `false` to ignore the automatic corner rounding and fully cover the keyboard bounds — useful when a scrollable surface behind the keyboard should remain completely occluded.
+
+```tsx
+<KeyboardEffects rounded={false}>
+  <View style={{ flex: 1, backgroundColor: "purple" }} />
+</KeyboardEffects>
+```

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

@@ -22,7 +22,7 @@ const AIKeyboard = () => (
     <SafeAreaView style={styles.hero}>
       <Text style={styles.title}>Describe an image or add a suggestion.</Text>
     </SafeAreaView>
-    <KeyboardEffects translucent>
+    <KeyboardEffects translucent rounded={false}>
       <KeyboardGradient />
     </KeyboardEffects>
     <KeyboardStickyView offset={{ opened: 16 }} style={styles.sticky}>

src/components/KeyboardEffects/index.tsx

@@ -49,6 +49,14 @@ export type KeyboardEffectsProps = {
    * @default false
    */
   translucent?: boolean;
+  /**
+   * Whether the effect view should match the keyboard's rounded top corners.
+   *
+   * Set to `false` when the effect should fully cover the keyboard bounds.
+   *
+   * @default true
+   */
+  rounded?: boolean;
 } & KeyboardStickyViewProps;
 
 /**
@@ -70,16 +78,16 @@ export type KeyboardEffectsProps = {
 const KeyboardEffects = forwardRef<
   View,
   React.PropsWithChildren<KeyboardEffectsProps>
->(({ translucent, children, ...props }, ref) => {
+>(({ translucent, rounded = true, children, ...props }, ref) => {
   const stackEntry = useRef<TranslucentStackEntry>({
     translucent: Boolean(translucent),
   }).current;
   const containerStyle = useMemo(
     () => [
       styles.container,
-      KEYBOARD_HAS_ROUNDED_CORNERS && !translucent && styles.rounded,
+      KEYBOARD_HAS_ROUNDED_CORNERS && rounded && styles.rounded,
     ],
-    [translucent],
+    [rounded],
   );
 
   useEffect(() => {