diff --git a/docs/docs/recipes/BOTTOM_SHEET.mdx b/docs/docs/recipes/BOTTOM_SHEET.mdx index 2704cc19..7483013a 100644 --- a/docs/docs/recipes/BOTTOM_SHEET.mdx +++ b/docs/docs/recipes/BOTTOM_SHEET.mdx @@ -79,7 +79,7 @@ export const BottomSheetExample: React.FC = () => { const styles = StyleSheet.create({ backdrop: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.5)', }, bottomSheet: { diff --git a/docs/versioned_docs/version-3.0.x/recipes/BOTTOM_SHEET.mdx b/docs/versioned_docs/version-3.0.x/recipes/BOTTOM_SHEET.mdx index 5d047bed..679d464f 100644 --- a/docs/versioned_docs/version-3.0.x/recipes/BOTTOM_SHEET.mdx +++ b/docs/versioned_docs/version-3.0.x/recipes/BOTTOM_SHEET.mdx @@ -81,7 +81,7 @@ export const BottomSheetExample: React.FC = () => { const styles = StyleSheet.create({ backdrop: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.5)', }, bottomSheet: { diff --git a/docs/versioned_docs/version-4.0.x/recipes/BOTTOM_SHEET.mdx b/docs/versioned_docs/version-4.0.x/recipes/BOTTOM_SHEET.mdx index 5d047bed..679d464f 100644 --- a/docs/versioned_docs/version-4.0.x/recipes/BOTTOM_SHEET.mdx +++ b/docs/versioned_docs/version-4.0.x/recipes/BOTTOM_SHEET.mdx @@ -81,7 +81,7 @@ export const BottomSheetExample: React.FC = () => { const styles = StyleSheet.create({ backdrop: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.5)', }, bottomSheet: { diff --git a/docs/versioned_docs/version-5.0.x/recipes/BOTTOM_SHEET.mdx b/docs/versioned_docs/version-5.0.x/recipes/BOTTOM_SHEET.mdx index 5d047bed..679d464f 100644 --- a/docs/versioned_docs/version-5.0.x/recipes/BOTTOM_SHEET.mdx +++ b/docs/versioned_docs/version-5.0.x/recipes/BOTTOM_SHEET.mdx @@ -81,7 +81,7 @@ export const BottomSheetExample: React.FC = () => { const styles = StyleSheet.create({ backdrop: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.5)', }, bottomSheet: { diff --git a/docs/versioned_docs/version-6.0.x/recipes/BOTTOM_SHEET.mdx b/docs/versioned_docs/version-6.0.x/recipes/BOTTOM_SHEET.mdx index 5d047bed..679d464f 100644 --- a/docs/versioned_docs/version-6.0.x/recipes/BOTTOM_SHEET.mdx +++ b/docs/versioned_docs/version-6.0.x/recipes/BOTTOM_SHEET.mdx @@ -81,7 +81,7 @@ export const BottomSheetExample: React.FC = () => { const styles = StyleSheet.create({ backdrop: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.5)', }, bottomSheet: { diff --git a/docs/versioned_docs/version-7.0.x/recipes/BOTTOM_SHEET.mdx b/docs/versioned_docs/version-7.0.x/recipes/BOTTOM_SHEET.mdx index 2704cc19..7483013a 100644 --- a/docs/versioned_docs/version-7.0.x/recipes/BOTTOM_SHEET.mdx +++ b/docs/versioned_docs/version-7.0.x/recipes/BOTTOM_SHEET.mdx @@ -79,7 +79,7 @@ export const BottomSheetExample: React.FC = () => { const styles = StyleSheet.create({ backdrop: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.5)', }, bottomSheet: { diff --git a/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_APPLIED_OFFSET_CHANGED.mdx b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_APPLIED_OFFSET_CHANGED.mdx new file mode 100644 index 00000000..8f511b3f --- /dev/null +++ b/docs/versioned_docs/version-8.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 +}); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_HEIGHT_CHANGED.mdx b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_HEIGHT_CHANGED.mdx new file mode 100644 index 00000000..465cbdf9 --- /dev/null +++ b/docs/versioned_docs/version-8.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 +}); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_HIDDEN.mdx b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_HIDDEN.mdx new file mode 100644 index 00000000..3e30b34e --- /dev/null +++ b/docs/versioned_docs/version-8.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 +}); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_SHOWN.mdx b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_SHOWN.mdx new file mode 100644 index 00000000..74ee9e64 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_SHOWN.mdx @@ -0,0 +1,24 @@ +--- +id: use-soft-input-shown +title: useSoftInputShown +sidebar_label: useSoftInputShown +keywords: [react-native-avoid-softinput, useSoftInputShown, react hooks] +--- + +`useSoftInputShown` is a shortcut for using `AvoidSoftInput.onSoftInputShown` 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 { useSoftInputShown } from "react-native-avoid-softinput"; + +useSoftInputShown(({ softInputHeight }) => { + // Do sth +}); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_STATE.mdx b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_STATE.mdx new file mode 100644 index 00000000..86d7e917 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/hooks/USE_SOFT_INPUT_STATE.mdx @@ -0,0 +1,22 @@ +--- +id: use-soft-input-state +title: useSoftInputState +sidebar_label: useSoftInputState +keywords: [react-native-avoid-softinput, useSoftInputState, react hooks] +--- + +`useSoftInputState` returns object with properties determining whether soft input is shown and how much screen it covers. + +### Return value + +``` +{ isSoftInputShown: boolean, softInputHeight: number } +``` + +### Example + +```ts +import { useSoftInputState } from "react-native-avoid-softinput"; + +const { isSoftInputShown, softInputHeight } = useSoftInputState(); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_APPLIED_OFFSET_CHANGE.mdx b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_APPLIED_OFFSET_CHANGE.mdx new file mode 100644 index 00000000..6d875da4 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_APPLIED_OFFSET_CHANGE.mdx @@ -0,0 +1,28 @@ +--- +id: on-soft-input-applied-offset-change +title: onSoftInputAppliedOffsetChange +sidebar_label: onSoftInputAppliedOffsetChange +keywords: [react-native-avoid-softinput, onSoftInputAppliedOffsetChange, module] +--- + +Use `onSoftInputAppliedOffsetChange` method, to e.g. create animation based on current applied offset value. + +### Parameters + +| Type | Required | Description | +| ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- | +| (\{ appliedOffset \}: \{ appliedOffset: number \}) => void | yes | function called during applying padding or translation with current applied value | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +const unsubscribe = AvoidSoftInput.onSoftInputAppliedOffsetChange( + ({ appliedOffset }) => { + // Do sth + } +); + +// Later invoke unsubscribe.remove() +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_HEIGHT_CHANGE.mdx b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_HEIGHT_CHANGE.mdx new file mode 100644 index 00000000..2007bb17 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_HEIGHT_CHANGE.mdx @@ -0,0 +1,28 @@ +--- +id: on-soft-input-height-change +title: onSoftInputHeightChange +sidebar_label: onSoftInputHeightChange +keywords: [react-native-avoid-softinput, onSoftInputHeightChange, module] +--- + +Use `onSoftInputHeightChange` method, if you want to listen to events when soft input's height changes. + +### Parameters + +| Type | Required | Description | +| -------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- | +| (\{ softInputHeight \}: \{ softInputHeight: number \}) => void | yes | function called with current soft input height when soft input is displayed | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +const unsubscribe = AvoidSoftInput.onSoftInputHeightChange( + ({ softInputHeight }) => { + // Do sth + } +); + +// later invoke unsubscribe.remove() +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_HIDDEN.mdx b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_HIDDEN.mdx new file mode 100644 index 00000000..278bd8ae --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_HIDDEN.mdx @@ -0,0 +1,26 @@ +--- +id: on-soft-input-hidden +title: onSoftInputHidden +sidebar_label: onSoftInputHidden +keywords: [react-native-avoid-softinput, onSoftInputHidden, module] +--- + +Use `onSoftInputHidden` method, if you want to listen to events when soft input is hidden. + +### Parameters + +| Type | Required | Description | +| ---------- | -------- | ----------------------------------------- | +| () => void | yes | function called when soft input is hidden | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +const unsubscribe = AvoidSoftInput.onSoftInputHidden(() => { + // Do sth +}); + +// later invoke unsubscribe.remove() +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_SHOWN.mdx b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_SHOWN.mdx new file mode 100644 index 00000000..2f1e5007 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/ON_SOFT_INPUT_SHOWN.mdx @@ -0,0 +1,26 @@ +--- +id: on-soft-input-shown +title: onSoftInputShown +sidebar_label: onSoftInputShown +keywords: [react-native-avoid-softinput, onSoftInputShown, module] +--- + +Use `onSoftInputShown` method, if you want to listen to events when soft input is shown. + +### Parameters + +| Type | Required | Description | +| -------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- | +| (\{ softInputHeight \}: \{ softInputHeight: number \}) => void | yes | function called with current soft input height when soft input is displayed | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +const unsubscribe = AvoidSoftInput.onSoftInputShown(({ softInputHeight }) => { + // Do sth +}); + +// later invoke unsubscribe.remove() +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_NOTHING.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_NOTHING.mdx new file mode 100644 index 00000000..261d516a --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_NOTHING.mdx @@ -0,0 +1,16 @@ +--- +id: set-adjust-nothing +title: setAdjustNothing +sidebar_label: setAdjustNothing +keywords: [react-native-avoid-softinput, setAdjustNothing, module] +--- + +Use `setAdjustNothing`, to set `android:windowSoftInputMode` attribute to `adjustNothing` value. + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setAdjustNothing(); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_PAN.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_PAN.mdx new file mode 100644 index 00000000..9aec2265 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_PAN.mdx @@ -0,0 +1,16 @@ +--- +id: set-adjust-pan +title: setAdjustPan +sidebar_label: setAdjustPan +keywords: [react-native-avoid-softinput, setAdjustPan, module] +--- + +Use `setAdjustPan`, to set `android:windowSoftInputMode` attribute to `adjustPan` value. + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setAdjustPan(); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_RESIZE.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_RESIZE.mdx new file mode 100644 index 00000000..ac5fb94d --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_RESIZE.mdx @@ -0,0 +1,16 @@ +--- +id: set-adjust-resize +title: setAdjustResize +sidebar_label: setAdjustResize +keywords: [react-native-avoid-softinput, setAdjustResize, module] +--- + +Use `setAdjustResize`, to set `android:windowSoftInputMode` attribute to `adjustResize` value. + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setAdjustResize(); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_UNSPECIFIED.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_UNSPECIFIED.mdx new file mode 100644 index 00000000..de294e39 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_ADJUST_UNSPECIFIED.mdx @@ -0,0 +1,16 @@ +--- +id: set-adjust-unspecified +title: setAdjustUnspecified +sidebar_label: setAdjustUnspecified +keywords: [react-native-avoid-softinput, setAdjustUnspecified, module] +--- + +Use `setAdjustUnspecified`, to set `android:windowSoftInputMode` attribute to `adjustUnspecified` value. + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setAdjustUnspecified(); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_AVOID_OFFSET.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_AVOID_OFFSET.mdx new file mode 100644 index 00000000..78a7d5db --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_AVOID_OFFSET.mdx @@ -0,0 +1,26 @@ +--- +id: set-avoid-offset +title: setAvoidOffset +sidebar_label: setAvoidOffset +keywords: [react-native-avoid-softinput, setAvoidOffset, module] +--- + +Use `setAvoidOffset` method, if you want to increase/decrease amount of translation/padding applied to react root view/scroll view. + +### Parameters + +| Type | Required | Description | +| ------ | -------- | ------------------------------------------------------ | +| number | yes | additional offset added to react root view/scroll view | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setAvoidOffset(40); // It will result in applied value 40dp greater than standard one +``` + +:::info +**Value applied to that method is persisted, so if you want to use that in a single use case, remember to clear it (just pass 0 as an argument)** +::: diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_DEFAULT_APP_SOFT_INPUT_MODE.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_DEFAULT_APP_SOFT_INPUT_MODE.mdx new file mode 100644 index 00000000..d6eb674a --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_DEFAULT_APP_SOFT_INPUT_MODE.mdx @@ -0,0 +1,16 @@ +--- +id: set-default-app-soft-input-mode +title: setDefaultAppSoftInputMode +sidebar_label: setDefaultAppSoftInputMode +keywords: [react-native-avoid-softinput, setDefaultAppSoftInputMode, module] +--- + +Use `setDefaultAppSoftInputMode`, to set `android:windowSoftInputMode` to default value declared in Android manifest. + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setDefaultAppSoftInputMode(); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_EASING.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_EASING.mdx new file mode 100644 index 00000000..8c6de96a --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_EASING.mdx @@ -0,0 +1,22 @@ +--- +id: set-easing +title: setEasing +sidebar_label: setEasing +keywords: [react-native-avoid-softinput, setEasing, module] +--- + +Use `setEasing` method, to customize animation's easing, available values are `easeIn`, `easeInOut`, `easeOut` and `linear`. + +### Parameters + +| Type | Required | Description | +| ------------------------------------------------ | -------- | ------------------ | +| `easeIn` or `easeInOut` or `easeOut` or `linear` | yes | animation's easing | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setEasing("easeInOut"); // Changes animation's easing to `easeInOut` curve +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_ENABLED.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_ENABLED.mdx new file mode 100644 index 00000000..4b520ace --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_ENABLED.mdx @@ -0,0 +1,22 @@ +--- +id: set-enabled +title: setEnabled +sidebar_label: setEnabled +keywords: [react-native-avoid-softinput, setEnabled, module] +--- + +Use `setEnabled` method, to enable or disable module. + +### Parameters + +| Type | Required | Description | +| ------- | -------- | --------------------------------- | +| boolean | yes | control whether module is enabled | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setEnabled(true); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_HIDE_ANIMATION_DELAY.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_HIDE_ANIMATION_DELAY.mdx new file mode 100644 index 00000000..19316a08 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_HIDE_ANIMATION_DELAY.mdx @@ -0,0 +1,22 @@ +--- +id: set-hide-animation-delay +title: setHideAnimationDelay +sidebar_label: setHideAnimationDelay +keywords: [react-native-avoid-softinput, setHideAnimationDelay, module] +--- + +Use `setHideAnimationDelay` method, to customize delay of hide offset animation with delay value in ms. + +### Parameters + +| Type | Required | Description | +| ------ | -------------------------------------------- | --------------------------- | +| number | no (defaults to 0 on Android and 300 on iOS) | hide offset animation delay | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setHideAnimationDelay(100); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_HIDE_ANIMATION_DURATION.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_HIDE_ANIMATION_DURATION.mdx new file mode 100644 index 00000000..41006083 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_HIDE_ANIMATION_DURATION.mdx @@ -0,0 +1,22 @@ +--- +id: set-hide-animation-duration +title: setHideAnimationDuration +sidebar_label: setHideAnimationDuration +keywords: [react-native-avoid-softinput, setHideAnimationDuration, module] +--- + +Use `setHideAnimationDuration` method, to customize duration of hide offset animation with duration value in ms. + +### Parameters + +| Type | Required | Description | +| ------ | -------------------- | ------------------------------ | +| number | no (defaults to 220) | hide offset animation duration | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setHideAnimationDuration(300); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_SHOULD_MIMIC_IOS_BEHAVIOR.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_SHOULD_MIMIC_IOS_BEHAVIOR.mdx new file mode 100644 index 00000000..abda0053 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_SHOULD_MIMIC_IOS_BEHAVIOR.mdx @@ -0,0 +1,28 @@ +--- +id: set-should-mimic-ios-behavior +title: setShouldMimicIOSBehavior +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 + +| Type | Required | Description | +| ------- | -------------------- | -------------------------------------------------- | +| boolean | yes | should library handle keyboard handling on Android | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setShouldMimicIOSBehavior(true); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_SHOW_ANIMATION_DELAY.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_SHOW_ANIMATION_DELAY.mdx new file mode 100644 index 00000000..13b15bea --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_SHOW_ANIMATION_DELAY.mdx @@ -0,0 +1,22 @@ +--- +id: set-show-animation-delay +title: setShowAnimationDelay +sidebar_label: setShowAnimationDelay +keywords: [react-native-avoid-softinput, setShowAnimationDelay, module] +--- + +Use `setShowAnimationDelay` method, to customize delay of show offset animation with delay value in ms. + +### Parameters + +| Type | Required | Description | +| ------ | ------------------ | --------------------------- | +| number | no (defaults to 0) | show offset animation delay | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setShowAnimationDelay(200); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/module/SET_SHOW_ANIMATION_DURATION.mdx b/docs/versioned_docs/version-8.0.x/api/module/SET_SHOW_ANIMATION_DURATION.mdx new file mode 100644 index 00000000..6810be82 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/module/SET_SHOW_ANIMATION_DURATION.mdx @@ -0,0 +1,22 @@ +--- +id: set-show-animation-duration +title: setShowAnimationDuration +sidebar_label: setShowAnimationDuration +keywords: [react-native-avoid-softinput, setShowAnimationDuration, module] +--- + +Use `setShowAnimationDuration` method, to customize duration of show offset animation with duration value in ms. + +### Parameters + +| Type | Required | Description | +| ------ | -------------------- | ------------------------------ | +| number | no (defaults to 660) | show offset animation duration | + +### Example + +```ts +import { AvoidSoftInput } from "react-native-avoid-softinput"; + +AvoidSoftInput.setShowAnimationDuration(800); +``` diff --git a/docs/versioned_docs/version-8.0.x/api/view/VIEW.mdx b/docs/versioned_docs/version-8.0.x/api/view/VIEW.mdx new file mode 100644 index 00000000..1a24f222 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/api/view/VIEW.mdx @@ -0,0 +1,48 @@ +--- +id: view +title: AvoidSoftInputView +sidebar_label: AvoidSoftInputView +keywords: [react-native-avoid-softinput, AvoidSoftInputView, view] +--- + +Wrap your content inside `AvoidSoftInputView`, if your form is rendered inside modal or you don't want to apply padding, or translation to React root view. + +### Props + +Extends `View` props + +| Prop | Type | Default value | +| -------------------------------- | ------------------------------------------------------------ | ------------------- | +| `avoidOffset` | number | 0 | +| `easing` | `easeIn` or `easeInOut` or `easeOut` or `linear` | `linear` | +| `enabled` | boolean | true | +| `hideAnimationDelay` | number | 0 | +| `hideAnimationDuration` | number | 220 | +| `onSoftInputAppliedOffsetChange` | function(e: \{ nativeEvent: \{ appliedOffset: number \}\}) | undefined | +| `onSoftInputHeightChange` | function(e: \{ nativeEvent: \{ softInputHeight: number \}\}) | undefined | +| `onSoftInputHidden` | function(e: \{ nativeEvent: \{ softInputHeight: number \}\}) | undefined | +| `onSoftInputShown` | function(e: \{ nativeEvent: \{ softInputHeight: number \}\}) | undefined | +| `showAnimationDelay` | number | 300/0 (iOS/Android) | +| `showAnimationDuration` | number | 660 | + +### Example + +```tsx +import { AvoidSoftInput } from "react-native-avoid-softinput"; + + + {/** Content that should be pushed above the keyboard */} +; +``` diff --git a/docs/versioned_docs/version-8.0.x/guides/ALTERNATIVES.mdx b/docs/versioned_docs/version-8.0.x/guides/ALTERNATIVES.mdx new file mode 100644 index 00000000..40f6e8fc --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/guides/ALTERNATIVES.mdx @@ -0,0 +1,12 @@ +--- +id: alternatives +title: Alternatives +sidebar_label: Alternatives +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 [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. +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). diff --git a/docs/versioned_docs/version-8.0.x/guides/INSTALLATION.mdx b/docs/versioned_docs/version-8.0.x/guides/INSTALLATION.mdx new file mode 100644 index 00000000..1855d512 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/guides/INSTALLATION.mdx @@ -0,0 +1,194 @@ +--- +id: installation +title: Getting Started +sidebar_label: Getting Started +slug: /guides +keywords: [react-native-avoid-softinput, installation, setup, keyboard handling, troubleshooting] +--- + +import oneDoesNotSimplyKeyboard from '/img/OneDoesNotSimplyKeyboard.jpg'; + +## 1. Installation & Requirements + +This library follows the React Native releases support policy. +It is supporting **the latest version**, and **the two previous minor series**. +You may find it working correctly with some older React Native versions, but it'll be a "Use at your own risk" case. + +This library supports "New Architecture". + +Library supports Android & iOS, for out-of-tree platforms, `View` component is used as fallback. + +**Install library with your package manager:** + +```sh +yarn add react-native-avoid-softinput +``` + +or + +```sh +npm i --save react-native-avoid-softinput +``` + +**(iOS-only) Install pods:** + +```sh +npx pod-install +``` + +#### Expo + +- ✅ You can use this library with [Development Builds](https://docs.expo.dev/development/introduction/). No config plugin is required. +- ❌ This library can't be used in the "Expo Go" app because it [requires custom native code](https://docs.expo.dev/workflow/customizing/). + +## 2. App's setup + +### Setting Kotlin version + +The library uses Kotlin language to implement Android part. +Depending on the version of React Native or Expo SDK and 3rd party libraries that are used in your project, you might (or might not) need to explicitly specify the version of Kotlin used in the app. + +- **Expo project after [prebuild](https://docs.expo.dev/workflow/prebuild/) / bare RN project** + +Go to `/android/build.gradle` inside your android folder to specify your `kotlinVersion` + +```java +buildscript { + ext { + kotlinVersion = "1.8.0" // <-- add a version here for resolution, version can be newer depending on the React Native version used in the project + } +} +``` + +- **Expo project before [prebuild](https://docs.expo.dev/workflow/prebuild/) / Expo managed project** + +Use `expo-build-properties` plugin to modify `kotlinVersion` value + +```sh +npx expo install expo-build-properties +``` + +Add plugin inside of your `app.json` or `app.config.js` + +```json +{ + "expo": { + "plugins": [ + [ + "expo-build-properties", + { + "android": { + "kotlinVersion": "1.8.0" // <-- add a version here for resolution, version can be newer depending on the Expo SDK version used in the project + } + } + ] + ] + } +} +``` + + +### 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 🚀). + +#### 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 + +
+:warning: Legacy setup + +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** + +Go to `/android/app/src/main/AndroidManifest.xml` and search for [`android:windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) attribute in the `` element. +To make `react-native-avoid-softinput` responsible for managing the available space when keyboard is popped up, that attribute needs to be set to `adjustResize` (in a new RN project it should be the default). + +```xml + + + + + + + + + + + + + + +``` + +- **Expo project before [prebuild](https://docs.expo.dev/workflow/prebuild/) / Expo managed project** + +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 + +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). + +
+ +## 3. Define your use case + +
+ One does not simply handle the keyboard globally in the app with 99 different form layouts +
+ +There're many possible ways to implement a form with some text fields. Depending on the ideas of the UX team and the imagination of the client/product owner, +you may need to implement some complex layouts, that not only have to be accessible, but should behave in a consistent way when the interaction with text fields/keyboard takes place. + +Creating some generic components (like KeyboardAvoidingView) that can magically wrap _any_ form layout in your app **is an anti-pattern**. +Especially, when there are many variables that may change the expected behavior like: + +- whether Android OS default keyboard handling is switched on or off +- whether the form layout is in the scrollable container or not +- are elements like modals/bottomsheets used and are these implemented in the JS layer or use some native primitives +- how complex those inputs are, how many text fields there are +- should some elements in the form be sticky +- etc. + +Instead, you should think how the keyboard interaction with the app should look, what elements should be visible when the keyboard pops up. + +In a basic case where you have a fullscreen scrollable form without a need to have submit button always visible, you might use [`AvoidSoftInput`](./guides/usage-module) module which pushes the whole root view above the keyboard, or detects the nearest scrollable ancestor and tries to scroll to covered text field element. + +In a more advanced case where you have a form inside a modal layout with text field inside, you may use [`AvoidSoftInputView`](./guides/usage-view) component which pushes itself above the keyboard, or detects the nearest scrollable ancestor and tries to scroll to covered text field element. + +In other case you have a task to make a form footer with submit buttons always visible even when the keyboard slides in (effectively making that footer sticky). +Then, you have to think how to make that footer separated from the rest of the text fields that are probably in some scrollable container. +At the end, you'll end up in a need to manually apply padding to the footer container. +Luckily, you might try [`useSoftInputShown`](./api/hooks/use-soft-input-shown), [`useSoftInputHidden`](./api/hooks/use-soft-input-hidden) & [`useSoftInputHeightChanged`](./api/hooks/use-soft-input-height-changed) hooks to detect when the keyboard is displayed and the height value it has. + +The point is, before blindly using the library, you should define what is the expected behavior and which tools you should use to achieve it. +If you don't know, which APIs from the library you should use for your use case, check [the example app](https://github.com/mateusz1913/react-native-avoid-softinput/tree/main/packages/mobile) and try to play with available APIs. + +## Troubleshooting + +### Incorrect `kotlinVersion` + +For more context, check [GH issue 88](https://github.com/mateusz1913/react-native-avoid-softinput/issues/88). + +Sometimes when using this library you may find that your build fails due to incorrect `kotlinVersion` in your native project. +To catch this you **need** to follow [Setting Kotlin version](#setting-kotlin-version) section. + +### Doubled padding on Android when form has many inputs, works as expected on iOS + +For more context, check [GH issue 155](https://github.com/mateusz1913/react-native-avoid-softinput/issues/155). + +The problem may appear if you didn't follow [Keyboard handling on Android](#keyboard-handling-on-android) section and you have e.g. [`adjustPan` behavior](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) set for your app. + +To fix it, follow the section to disable default keyboard handling on Android. + +If, for some reason, you need to keep `adjustPan` behavior for other parts of the app (where library does not need to handle the keyboard), you might check [`AvoidSoftInput.setAdjust(Pan|Resize|Nothing|Unspecified)`](./api/module/set-adjust-pan) functions. diff --git a/docs/versioned_docs/version-8.0.x/guides/JEST_MOCK_USAGE.mdx b/docs/versioned_docs/version-8.0.x/guides/JEST_MOCK_USAGE.mdx new file mode 100644 index 00000000..1e465520 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/guides/JEST_MOCK_USAGE.mdx @@ -0,0 +1,44 @@ +--- +id: jest-mock-usage +title: Jest mock usage +sidebar_label: Jest mock usage +keywords: [react-native-avoid-softinput, Jest, mock, testing] +--- + +To make testing with Jest easier, library provides mocked implementation that can be integrated in two ways: + +### Using mock in `__mocks__` directory + +1. Create `__mocks__/react-native-avoid-softinput` file. +2. Inside created file paste following lines: + +```js +const mock = require('react-native-avoid-softinput/jest/mock'); + +/** + * If needed, override mock like so: + * + * module.exports = Object.assign(mock, { useSoftInputState: jest.fn(() => ({ isSoftInputShown: true, softInputHeight: 300 })) }); + */ + +module.exports = mock; +``` + +### Using mock in Jest setup file + +1. Create Jest setup file, unless there is already one, and link it in [jest config](https://jestjs.io/docs/configuration#setupfiles-array) +2. Inside Jest setup file add following lines: + +```js +jest.mock('react-native-avoid-softinput', () => { + const mock = require('react-native-avoid-softinput/jest/mock'); + + /** + * If needed, override mock like so: + * + * return Object.assign(mock, { useSoftInputState: jest.fn(() => ({ isSoftInputShown: true, softInputHeight: 300 })) }); + */ + + return mock; +}); +``` diff --git a/docs/versioned_docs/version-8.0.x/guides/MIGRATION_FROM_V6_TO_V7.mdx b/docs/versioned_docs/version-8.0.x/guides/MIGRATION_FROM_V6_TO_V7.mdx new file mode 100644 index 00000000..13c85c74 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/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 +}, []); +``` diff --git a/docs/versioned_docs/version-8.0.x/guides/USAGE_MODULE.mdx b/docs/versioned_docs/version-8.0.x/guides/USAGE_MODULE.mdx new file mode 100644 index 00000000..04384039 --- /dev/null +++ b/docs/versioned_docs/version-8.0.x/guides/USAGE_MODULE.mdx @@ -0,0 +1,48 @@ +--- +id: usage-module +title: Usage - module +sidebar_label: Usage - module +keywords: [react-native-avoid-softinput, module, usage] +--- + +The preferrable usage of the module is to enable it where it's actually needed. + +Depending on the navigation setup you have, check the navigation's library documentation for correct way to run some actions when the screen gains/loses focus. + +The following example assumes `react-navigation` is used as a navigation: + +```ts +import * as React from "react"; +import { Button, ScrollView, TextInput, View } from "react-native"; +import { AvoidSoftInput } from "react-native-avoid-softinput"; +import { useFocusEffect } from "@react-navigation/native"; + +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.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); + }; + }, []); + + useFocusEffect(onFocusEffect); // register callback to focus events +// highlight-end + + return + + + + + + +