Skip to content

Commit 6c696f6

Browse files
committed
chore: prepare docs for v7
1 parent f696b66 commit 6c696f6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1722
-126
lines changed

.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
configFile: path.resolve(__dirname, 'packages', 'example', 'babel.config.js'),
99
},
1010
},
11+
ignorePatterns: ['**/react-native-avoid-softinput/lib/**/*'],
1112
overrides: [
1213
{
1314
files: ['**/jest/*'],

docs/docs/api/module/SET_SHOULD_MIMIC_IOS_BEHAVIOR.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ sidebar_label: setShouldMimicIOSBehavior
55
keywords: [react-native-avoid-softinput, setShouldMimicIOSBehavior, module]
66
---
77

8+
:::warning
9+
10+
**DEPRECATED** - to provide best possible support for Android 15, install [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge)
11+
12+
:::
13+
814
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).
915

1016
### Parameters

docs/docs/guides/ALTERNATIVES.mdx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,11 @@
22
id: alternatives
33
title: Alternatives
44
sidebar_label: Alternatives
5-
keywords: [react-native-avoid-softinput, alternatives, react-native-keyboard-manager, react-native-keyboard-controller, react-native-keyboard-aware-scroll-view]
5+
keywords: [react-native-avoid-softinput, alternatives, react-native-keyboard-controller]
66
---
77

8-
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):
8+
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)
99

10-
## [react-native-keyboard-manager](https://github.com/douglasjunior/react-native-keyboard-manager) + `android:windowSoftInputMode="adjustResize"`
11-
12-
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.
13-
14-
## [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller)
15-
16-
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.
10+
`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.
1711
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).
1812
Additionally, it has a interactive keyboard support from [version 1.5.0](https://kirillzyusko.github.io/react-native-keyboard-controller/blog/interactive-keyboard).
19-
20-
## [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view)
21-
22-
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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,17 @@ Add plugin inside of your `app.json` or `app.config.js`
9191
### Keyboard handling on Android
9292

9393
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 🚀).
94-
To do that, you need to make 2 steps:
9594

96-
#### Modify your Android's project `AndroidManifest.xml`
95+
#### Recommended setup
96+
97+
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
98+
99+
<details>
100+
<summary>:warning: Legacy setup</summary>
101+
102+
To setup keyboard handling on Android without `react-native-edge-to-edge`, do the following:
103+
104+
##### Modify your Android's project `AndroidManifest.xml`
97105

98106
- **Expo project after [prebuild](https://docs.expo.dev/workflow/prebuild/) / bare RN project**
99107

@@ -127,10 +135,12 @@ To make `react-native-avoid-softinput` responsible for managing the available sp
127135

128136
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).
129137

130-
#### Use `AvoidSoftInput.setShouldMimicIOSBehavior(true)` later on in your app's code
138+
##### Use `AvoidSoftInput.setShouldMimicIOSBehavior(true)` later on in your app's code
131139

132140
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).
133141

142+
</details>
143+
134144
## 3. Define your use case
135145

136146
<div style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch', margin: 20 }}>

docs/docs/guides/MIGRATION_FROM_2_X_X.mdx

Lines changed: 0 additions & 65 deletions
This file was deleted.
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
id: migration_from_v6_to_v7
3+
title: Migration from v6 to v7
4+
sidebar_label: Migration from v6 to v7
5+
keywords: [react-native-avoid-softinput, migration]
6+
---
7+
8+
## 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
9+
10+
Since v7, the library supports detection of `react-native-edge-to-edge`.
11+
Follow the [installation page](./INSTALLATION.mdx) for the recommended setup for keyboard handling on Android.
12+
Existing `AvoidSoftInput.setShouldMimicIOSBehavior` function is considered deprecated from v7 and will be removed in future major versions.
13+
14+
```diff
15+
useEffect(() => {
16+
- AvoidSoftInput.setShouldMimicIOSBehavior(true); // <---- Tell Android that library will handle keyboard insets manually to match iOS behavior
17+
AvoidSoftInput.setEnabled(true); // <---- Enable module
18+
}, []);
19+
```

docs/docs/guides/USAGE_MODULE.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,10 @@ export const FormExample: React.FC = () => {
2121
// highlight-start
2222
const onFocusEffect = React.useCallback(() => {
2323
// This should be run when screen gains focus - enable the module where it's needed
24-
AvoidSoftInput.setShouldMimicIOSBehavior(true);
2524
AvoidSoftInput.setEnabled(true);
2625
return () => {
2726
// This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup
2827
AvoidSoftInput.setEnabled(false);
29-
AvoidSoftInput.setShouldMimicIOSBehavior(false);
3028
};
3129
}, []);
3230

docs/docs/guides/USAGE_VIEW.mdx

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,6 @@ import { useFocusEffect } from "@react-navigation/native";
1818
export const ModalExample: React.FC = () => {
1919
const [ modalVisible, setModalVisible ] = React.useState(false);
2020

21-
// highlight-start
22-
const onFocusEffect = React.useCallback(() => {
23-
// This should be run when screen gains focus - enable the module where it's needed
24-
AvoidSoftInput.setShouldMimicIOSBehavior(true);
25-
return () => {
26-
// This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup
27-
AvoidSoftInput.setShouldMimicIOSBehavior(false);
28-
};
29-
}, []);
30-
31-
useFocusEffect(onFocusEffect); // register callback to focus events
32-
// highlight-end
33-
3421
function closeModal() {
3522
setModalVisible(false);
3623
}

docs/docs/recipes/BOTTOM_SHEET.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,12 @@ export const BottomSheetExample: React.FC = () => {
3737
}
3838

3939
const onFocusEffect = React.useCallback(() => {
40-
AvoidSoftInput.setShouldMimicIOSBehavior(true);
4140
AvoidSoftInput.setEnabled(true);
4241
AvoidSoftInput.setAvoidOffset(70);
4342

4443
return () => {
4544
AvoidSoftInput.setAvoidOffset(0);
4645
AvoidSoftInput.setEnabled(false);
47-
AvoidSoftInput.setShouldMimicIOSBehavior(false);
4846
};
4947
}, []);
5048

docs/docs/recipes/CUSTOM_CONFIG.mdx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import SingleInput from '../components/SingleInput';
2020

2121
export const CustomAnimationConfigModuleExample: React.FC = () => {
2222
const onFocusEffect = React.useCallback(() => {
23-
AvoidSoftInput.setShouldMimicIOSBehavior(true);
2423
AvoidSoftInput.setEnabled(true);
2524
AvoidSoftInput.setEasing('easeOut');
2625
AvoidSoftInput.setHideAnimationDelay(1000);
@@ -34,7 +33,6 @@ export const CustomAnimationConfigModuleExample: React.FC = () => {
3433
AvoidSoftInput.setShowAnimationDelay();
3534
AvoidSoftInput.setShowAnimationDuration();
3635
AvoidSoftInput.setEnabled(false);
37-
AvoidSoftInput.setShouldMimicIOSBehavior(false);
3836
};
3937
}, []);
4038

@@ -90,11 +88,9 @@ import SingleInput from '../components/SingleInput';
9088

9189
export const CustomAnimationConfigViewExample: React.FC = () => {
9290
const onFocusEffect = React.useCallback(() => {
93-
AvoidSoftInput.setShouldMimicIOSBehavior(true);
9491
AvoidSoftInput.setEnabled(true);
9592
return () => {
9693
AvoidSoftInput.setEnabled(false);
97-
AvoidSoftInput.setShouldMimicIOSBehavior(false);
9894
};
9995
}, []);
10096

0 commit comments

Comments
 (0)