Merge pull request #222 from mateusz1913/chore/v7-docs

chore: prepare docs for v7

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
       configFile: path.resolve(__dirname, 'packages', 'example', 'babel.config.js'),
     },
   },
+  ignorePatterns: ['**/react-native-avoid-softinput/lib/**/*'],
   overrides: [
     {
       files: ['**/jest/*'],

docs/docs/api/module/SET_SHOULD_MIMIC_IOS_BEHAVIOR.mdx

@@ -5,6 +5,12 @@ sidebar_label: setShouldMimicIOSBehavior
 keywords: [react-native-avoid-softinput, setShouldMimicIOSBehavior, module]
 ---
 
+:::warning
+
+**DEPRECATED** - to provide best possible support for Android 15, install [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge)
+
+:::
+
 Use `setShouldMimicIOSBehavior` method, to determine whether keyboard on Android should be handled by the library (like on iOS) or should be managed by OS (via `android:windowSoftInputMode` param).
 
 ### Parameters

docs/docs/guides/ALTERNATIVES.mdx

@@ -2,21 +2,11 @@
 id: alternatives
 title: Alternatives
 sidebar_label: Alternatives
-keywords: [react-native-avoid-softinput, alternatives, react-native-keyboard-manager, react-native-keyboard-controller, react-native-keyboard-aware-scroll-view]
+keywords: [react-native-avoid-softinput, alternatives, react-native-keyboard-controller]
 ---
 
-If, for whatever reason, the library does not satisfy your project's use case, you can check following alternatives (all of them are great and much better than KeyboardAvoidingView):
+If, for whatever reason, the library does not satisfy your project's use case, you can check [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller)
 
-## [react-native-keyboard-manager](https://github.com/douglasjunior/react-native-keyboard-manager) + `android:windowSoftInputMode="adjustResize"`
-
-On iOS, you can use react-native-keyboard-manager which under the hood uses well-known [IQKeyboardManager](https://github.com/hackiftekhar/IQKeyboardManager). And for the Android, you might try default `adjustResize` behavior.
-
-## [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller)
-
-react-native-keyboard-controller has an interesting approach of detecting keyboard appearance on native side and letting you apply detected height to Reanimated or vanilla Animated views.
+`react-native-keyboard-controller` has an interesting approach of detecting keyboard appearance on native side and letting you apply detected height to Reanimated or vanilla Animated views.
 It's written in Kotlin and Swift, it uses WindowInsetsCompat API on Android and it also supports Fabric & TurboModules from [version 1.2.0](https://kirillzyusko.github.io/react-native-keyboard-controller/blog/fabric).
 Additionally, it has a interactive keyboard support from [version 1.5.0](https://kirillzyusko.github.io/react-native-keyboard-controller/blog/interactive-keyboard).
-
-## [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view)
-
-react-native-keyboard-aware-scroll-view can be used as a drop-in replacement for scroll containers that need to be keyboard aware. It has fully JS implementation, so it can be used in Expo Go apps.

docs/docs/guides/INSTALLATION.mdx

@@ -91,9 +91,17 @@ Add plugin inside of your `app.json` or `app.config.js`
 ### Keyboard handling on Android
 
 To make the keyboard handled **only** by `react-native-avoid-softinput` (and not by Android OS), you have to additionally make sure that default keyboard handling on Android is switched off (for iOS nothing to be done 🚀).
-To do that, you need to make 2 steps:
 
-#### Modify your Android's project `AndroidManifest.xml`
+#### Recommended setup
+
+To provide best possible support for Android 15, install [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge) and follow its setup after installation
+
+<details>
+<summary>:warning: Legacy setup</summary>
+
+To setup keyboard handling on Android without `react-native-edge-to-edge`, do the following:
+
+##### Modify your Android's project `AndroidManifest.xml`
 
 - **Expo project after [prebuild](https://docs.expo.dev/workflow/prebuild/) / bare RN project**
 
@@ -127,10 +135,12 @@ To make `react-native-avoid-softinput` responsible for managing the available sp
 
 Go to Expo's `app.json`/`app.config.js` and modify [`softwareKeyboardLayoutMode`](https://docs.expo.dev/versions/latest/config/app/#softwarekeyboardlayoutmode), so that it has `resize` value (in a new Expo project it should be the default).
 
-#### Use `AvoidSoftInput.setShouldMimicIOSBehavior(true)` later on in your app's code
+##### Use `AvoidSoftInput.setShouldMimicIOSBehavior(true)` later on in your app's code
 
 Remember to call `AvoidSoftInput.setShouldMimicIOSBehavior(true)` somewhere in the project's code (either in some root component, if you use the library globally or in specific screen, if you use the library only in some places).
 
+</details>
+
 ## 3. Define your use case
 
 <div style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch', margin: 20 }}>

docs/docs/guides/MIGRATION_FROM_V6_TO_V7.mdx

@@ -0,0 +1,19 @@
+---
+id: migration_from_v6_to_v7
+title: Migration from v6 to v7
+sidebar_label: Migration from v6 to v7
+keywords: [react-native-avoid-softinput, migration]
+---
+
+## Migrate to [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge) to provide best support for Android 15 "edge to edge" mode
+
+Since v7, the library supports detection of `react-native-edge-to-edge`.
+Follow the [installation page](./INSTALLATION.mdx) for the recommended setup for keyboard handling on Android.
+Existing `AvoidSoftInput.setShouldMimicIOSBehavior` function is considered deprecated from v7 and will be removed in future major versions.
+
+```diff
+useEffect(() => {
+-  AvoidSoftInput.setShouldMimicIOSBehavior(true); // <---- Tell Android that library will handle keyboard insets manually to match iOS behavior
+  AvoidSoftInput.setEnabled(true); // <---- Enable module
+}, []);
+```

docs/docs/guides/USAGE_MODULE.mdx

@@ -21,12 +21,10 @@ export const FormExample: React.FC = () => {
 // highlight-start
   const onFocusEffect = React.useCallback(() => {
     // This should be run when screen gains focus - enable the module where it's needed
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
     AvoidSoftInput.setEnabled(true);
     return () => {
       // This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup
       AvoidSoftInput.setEnabled(false);
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
     };
   }, []);
 

docs/docs/guides/USAGE_VIEW.mdx

@@ -18,19 +18,6 @@ import { useFocusEffect } from "@react-navigation/native";
 export const ModalExample: React.FC = () => {
   const [ modalVisible, setModalVisible ] = React.useState(false);
 
-// highlight-start
-  const onFocusEffect = React.useCallback(() => {
-    // This should be run when screen gains focus - enable the module where it's needed
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
-    return () => {
-      // This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
-    };
-  }, []);
-
-  useFocusEffect(onFocusEffect); // register callback to focus events
-// highlight-end
-
   function closeModal() {
     setModalVisible(false);
   }

docs/docs/recipes/BOTTOM_SHEET.mdx

@@ -37,14 +37,12 @@ export const BottomSheetExample: React.FC = () => {
   }
 
   const onFocusEffect = React.useCallback(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
     AvoidSoftInput.setEnabled(true);
     AvoidSoftInput.setAvoidOffset(70);
 
     return () => {
       AvoidSoftInput.setAvoidOffset(0);
       AvoidSoftInput.setEnabled(false);
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
     };
   }, []);
 

docs/docs/recipes/CUSTOM_CONFIG.mdx

@@ -20,7 +20,6 @@ import SingleInput from '../components/SingleInput';
 
 export const CustomAnimationConfigModuleExample: React.FC = () => {
   const onFocusEffect = React.useCallback(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
     AvoidSoftInput.setEnabled(true);
     AvoidSoftInput.setEasing('easeOut');
     AvoidSoftInput.setHideAnimationDelay(1000);
@@ -34,7 +33,6 @@ export const CustomAnimationConfigModuleExample: React.FC = () => {
       AvoidSoftInput.setShowAnimationDelay();
       AvoidSoftInput.setShowAnimationDuration();
       AvoidSoftInput.setEnabled(false);
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
     };
   }, []);
 
@@ -90,11 +88,9 @@ import SingleInput from '../components/SingleInput';
 
 export const CustomAnimationConfigViewExample: React.FC = () => {
   const onFocusEffect = React.useCallback(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
     AvoidSoftInput.setEnabled(true);
     return () => {
       AvoidSoftInput.setEnabled(false);
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
     };
   }, []);
 

docs/docs/recipes/FORM.mdx

@@ -28,11 +28,9 @@ const NOOP = () => {};
 
 export const FormExample: React.FC = () => {
   const onFocusEffect = React.useCallback(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
     AvoidSoftInput.setEnabled(true);
     return () => {
       AvoidSoftInput.setEnabled(false);
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
     };
   }, []);
 

docs/docs/recipes/MODAL.mdx

@@ -14,7 +14,7 @@ When the keyboard is visible, the only tasks are to push the input (if needed) a
 import { useFocusEffect } from '@react-navigation/native';
 import * as React from 'react';
 import { Image, Modal, ScrollView, StyleSheet, View } from 'react-native';
-import { AvoidSoftInput, AvoidSoftInputView } from 'react-native-avoid-softinput';
+import { AvoidSoftInputView } from 'react-native-avoid-softinput';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import Button from '../components/Button';
@@ -28,15 +28,6 @@ const icon = require('../../assets/AppIconTransparent.png');
 export const ModalExample: React.FC = () => {
   const [ modalVisible, setModalVisible ] = React.useState(false);
 
-  const onFocusEffect = React.useCallback(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
-    return () => {
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
-    };
-  }, []);
-
-  useFocusEffect(onFocusEffect);
-
   function closeModal() {
     setModalVisible(false);
   }

docs/docs/recipes/STICKY_FOOTER.mdx

@@ -17,7 +17,7 @@ Check [StickyFooterExample](https://github.com/mateusz1913/react-native-avoid-so
 import { useFocusEffect } from '@react-navigation/native';
 import * as React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import { AvoidSoftInput, useSoftInputHeightChanged } from 'react-native-avoid-softinput';
+import { useSoftInputHeightChanged } from 'react-native-avoid-softinput';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -36,16 +36,6 @@ export const StickyFooterExample: React.FC = () => {
     };
   });
 
-  const onFocusEffect = React.useCallback(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
-
-    return () => {
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
-    };
-  }, []);
-
-  useFocusEffect(onFocusEffect);
-
   /**
    * You can also use `useSoftInputShown` & `useSoftInputHidden`
    *

docs/sidebars.js

@@ -5,7 +5,7 @@ const sidebars = {
   docsSidebar: {
     'Guides': [
       'guides/installation',
-      'guides/migration_from_2_x_x',
+      'guides/migration_from_v6_to_v7',
       'guides/usage-module',
       'guides/usage-view',
       'guides/jest-mock-usage',

docs/versioned_docs/version-7.0.x/api/hooks/USE_SOFT_INPUT_APPLIED_OFFSET_CHANGED.mdx

@@ -0,0 +1,24 @@
+---
+id: use-soft-input-applied-offset-changed
+title: useSoftInputAppliedOffsetChanged
+sidebar_label: useSoftInputAppliedOffsetChanged
+keywords: [react-native-avoid-softinput, useSoftInputAppliedOffsetChanged, react hooks]
+---
+
+`useSoftInputAppliedOffsetChanged` is a shortcut for using `AvoidSoftInput.onSoftInputAppliedOffsetChange` method inside `useEffect`.
+
+### Parameters
+
+| Type                                                       | Required | Description                                                                       |
+| ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
+| (\{ appliedOffset \}: \{ appliedOffset: number \}) => void | yes      | function called during applying padding or translation with current applied value |
+
+### Example
+
+```ts
+import { useSoftInputAppliedOffsetChanged } from "react-native-avoid-softinput";
+
+useSoftInputAppliedOffsetChanged(({ appliedOffset }) => {
+  // Do sth
+});
+```

docs/versioned_docs/version-7.0.x/api/hooks/USE_SOFT_INPUT_HEIGHT_CHANGED.mdx

@@ -0,0 +1,24 @@
+---
+id: use-soft-input-height-changed
+title: useSoftInputHeightChanged
+sidebar_label: useSoftInputHeightChanged
+keywords: [react-native-avoid-softinput, useSoftInputHeightChanged, react hooks]
+---
+
+`useSoftInputHeightChanged` is a shortcut for using `AvoidSoftInput.onSoftInputHeightChange` method inside `useEffect`.
+
+### Parameters
+
+| Type                                                           | Required | Description                                                                 |
+| -------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- |
+| (\{ softInputHeight \}: \{ softInputHeight: number \}) => void | yes      | function called with current soft input height when soft input is displayed |
+
+### Example
+
+```ts
+import { useSoftInputHeightChanged } from "react-native-avoid-softinput";
+
+useSoftInputHeightChanged(({ softInputHeight }) => {
+  // Do sth
+});
+```

docs/versioned_docs/version-7.0.x/api/hooks/USE_SOFT_INPUT_HIDDEN.mdx

@@ -0,0 +1,24 @@
+---
+id: use-soft-input-hidden
+title: useSoftInputHidden
+sidebar_label: useSoftInputHidden
+keywords: [react-native-avoid-softinput, useSoftInputHidden, react hooks]
+---
+
+`useSoftInputHidden` is a shortcut for using `AvoidSoftInput.onSoftInputHidden` method inside `useEffect`.
+
+### Parameters
+
+| Type       | Required | Description                               |
+| ---------- | -------- | ----------------------------------------- |
+| () => void | yes      | function called when soft input is hidden |
+
+### Example
+
+```ts
+import { useSoftInputHidden } from "react-native-avoid-softinput";
+
+useSoftInputHidden(() => {
+  // Do sth
+});
+```