docs: rephrase translucent StatusBar handling on Android for keyboardVerticalOffset (#892)

## 📜 Description

Re-phrased note about `translucent` StatusBar.

## 💡 Motivation and Context

When I re-read explanation again I realized that it's not very clear how
it should work. So I re-phrazed it.

Also in this PR I changed width of SVG image, and added missing
punctuation signs 🙂

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

- replace SVGs;
- rephrase a note about `translucent` StatusBar.

## 🤔 How Has This Been Tested?

Tested via preview.

## 📸 Screenshots (if appropriate):

<img width="940" alt="image"
src="https://github.com/user-attachments/assets/23ca0382-f01f-4cfe-8222-ab8a0df5dcb7"
/>

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

docs/docs/api/components/keyboard-avoiding-view.mdx

@@ -132,7 +132,7 @@ A boolean prop indicating whether `KeyboardAvoidingView` is enabled or disabled.
 
 ### `keyboardVerticalOffset`
 
-This is the distance between the top of the user screen and the react native view This is particularly useful when there are fixed headers, navigation bars, or other UI elements at the top of the screen. Default is `0`.
+This is the distance between the top of the user screen and the react native view. This is particularly useful when there are fixed headers, navigation bars, or other UI elements at the top of the screen. Default is `0`.
 
 import KeyboardVerticalOffset from "@site/src/components/KeyboardVerticalOffset";
 
@@ -169,19 +169,17 @@ Below shown a visual representation of `keyboardVerticalOffset`:
 
 <KeyboardVerticalOffset />
 
-:::warning Translucent `StatusBar`
-If you are using translucent `StatusBar` on Android, then `StatusBar` padding gets handled by `react-navigation` automatically and it will include safe-area padding in `useHeaderHeight` (i. e. `StatusBar` height will be included in the returned value and it will match iOS behavior).
+:::warning Handling `StatusBar` height on Android with `useHeaderHeight`
+On `Android`, how you handle the `StatusBar` height depends on whether the `StatusBar` is **translucent** or **not**:
 
-If you are not using translucent `StatusBar`, then you need to include `StatusBar` height yourself:
+- **If the `StatusBar` is translucent**, `react-navigation` **automatically includes the `StatusBar` height** in `useHeaderHeight()`, along with safe-area padding. This behavior aligns with iOS, so you don’t need to manually add the `StatusBar` height.
+- **If the StatusBar is not translucent**, `useHeaderHeight()` does **not** include the `StatusBar` height. In this case, you need to add it manually:
 
 ```tsx
 const headerHeight = useHeaderHeight() + (StatusBar.currentHeight ?? 0);
 ```
 
-<blockquote>
-  `StatusBar.currentHeight` is Android-only prop so you can use `?? 0` and don't
-  write platform-specific code using `Platform.OS` or `Platform.select`.
-</blockquote>
+Since `StatusBar.currentHeight` is an **Android-only** property, using `?? 0` ensures it doesn’t cause issues on iOS. This approach avoids the need for `Platform.OS` or `Platform.select` checks.
 
 :::
 

docs/src/components/KeyboardVerticalOffset/kvo-dark.svg

@@ -132,7 +132,7 @@ A boolean prop indicating whether `KeyboardAvoidingView` is enabled or disabled.
 
 ### `keyboardVerticalOffset`
 
-This is the distance between the top of the user screen and the react native view This is particularly useful when there are fixed headers, navigation bars, or other UI elements at the top of the screen. Default is `0`.
+This is the distance between the top of the user screen and the react native view. This is particularly useful when there are fixed headers, navigation bars, or other UI elements at the top of the screen. Default is `0`.
 
 import KeyboardVerticalOffset from "@site/src/components/KeyboardVerticalOffset";
 
@@ -169,19 +169,17 @@ Below shown a visual representation of `keyboardVerticalOffset`:
 
 <KeyboardVerticalOffset />
 
-:::warning Translucent `StatusBar`
-If you are using translucent `StatusBar` on Android, then `StatusBar` padding gets handled by `react-navigation` automatically and it will include safe-area padding in `useHeaderHeight` (i. e. `StatusBar` height will be included in the returned value and it will match iOS behavior).
+:::warning Handling `StatusBar` height on Android with `useHeaderHeight`
+On `Android`, how you handle the `StatusBar` height depends on whether the `StatusBar` is **translucent** or **not**:
 
-If you are not using translucent `StatusBar`, then you need to include `StatusBar` height yourself:
+- **If the `StatusBar` is translucent**, `react-navigation` **automatically includes the `StatusBar` height** in `useHeaderHeight()`, along with safe-area padding. This behavior aligns with iOS, so you don’t need to manually add the `StatusBar` height.
+- **If the StatusBar is not translucent**, `useHeaderHeight()` does **not** include the `StatusBar` height. In this case, you need to add it manually:
 
 ```tsx
 const headerHeight = useHeaderHeight() + (StatusBar.currentHeight ?? 0);
 ```
 
-<blockquote>
-  `StatusBar.currentHeight` is Android-only prop so you can use `?? 0` and don't
-  write platform-specific code using `Platform.OS` or `Platform.select`.
-</blockquote>
+Since `StatusBar.currentHeight` is an **Android-only** property, using `?? 0` ensures it doesn’t cause issues on iOS. This approach avoids the need for `Platform.OS` or `Platform.select` checks.
 
 :::