Skip to content

Commit

Permalink
docs: add a note about useResizeMode hook (#280)
Browse files Browse the repository at this point in the history
## 📜 Description
<!-- Describe your changes in detail -->

## 💡 Motivation and Context

Currently algolia search returns nothing about `useResizeMode` hook.

<img width="670" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/bf8ad425-10bf-49b0-a34a-54183f72451d">

This hook is not documented anywhere in the code, so I decided to add a
reference why it's needed. I thought that `Building own hook` guide is a
perfect place for that.

## 📢 Changelog

### Docs
- add a note about `useResizeMode` hook

## 🤔 How Has This Been Tested?

Tested on `localhost:3000`.

## 📸 Screenshots (if appropriate):

<img width="997" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/87410610-e0f4-4748-ab91-375fa1200433">

## 📝 Checklist

- [x] CI successfully passed
  • Loading branch information
kirillzyusko authored Nov 20, 2023
1 parent f251c51 commit 22e7a20
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 2 deletions.
10 changes: 9 additions & 1 deletion docs/docs/guides/building-own-hook.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ keywords: [react-native-keyboard-controller, react-native keyboard, react hook]

# Building own hook

Default hooks may not perfectly fit in your app, because it changes/restores `softInputMode` on mount/unmount of the component where it's used. Though in deep stacks sometimes it may be important to have different `softInputMode` per screen, but by default `react-navigation` keeps previous screens mounted, so if you are using default `useKeyboardAnimation` hook, then all following screens will have `softInputMode=adjustResize`.
Default hooks may not perfectly fit in your app, because it changes/restores `softInputMode` on mount/unmount of the component where it's used.

:::info
This is `useResizeMode` hook behavior - it changes `softInputMode` on mount to `adjustResize` and to default `softInput` on unmount. You may want to [read](../recipes/platform-differences.md#android) why it's crucial to change `softInputMode` to `adjustResize` before using this library.

If you have `android:windowSoftInputMode="adjustResize"` declared in `AndroidManifest.xml` - then you can skip this step at all and forget about changing `softInputMode` in runtime (however you still may want to create your own version of hook without calls to `KeyboardController.*`) 😎.
:::

Sometimes in deep stacks it may be important to have different `softInputMode` per screen, but by default `react-navigation` keeps previous screens mounted, so if you are using default `useKeyboardAnimation` hook, then all following screens will have `softInputMode=adjustResize`.

To prevent such behavior you can write own hook based on primitives from this library. The implementation may look like:

Expand Down
10 changes: 9 additions & 1 deletion docs/versioned_docs/version-1.9.0/guides/building-own-hook.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ keywords: [react-native-keyboard-controller, react-native keyboard, react hook]

# Building own hook

Default hooks may not perfectly fit in your app, because it changes/restores `softInputMode` on mount/unmount of the component where it's used. Though in deep stacks sometimes it may be important to have different `softInputMode` per screen, but by default `react-navigation` keeps previous screens mounted, so if you are using default `useKeyboardAnimation` hook, then all following screens will have `softInputMode=adjustResize`.
Default hooks may not perfectly fit in your app, because it changes/restores `softInputMode` on mount/unmount of the component where it's used.

:::info
This is `useResizeMode` hook behavior - it changes `softInputMode` on mount to `adjustResize` and to default `softInput` on unmount. You may want to [read](../recipes/platform-differences.md#android) why it's crucial to change `softInputMode` to `adjustResize` before using this library.

If you have `android:windowSoftInputMode="adjustResize"` declared in `AndroidManifest.xml` - then you can skip this step at all and forget about changing `softInputMode` in runtime (however you still may want to create your own version of hook without calls to `KeyboardController.*`) 😎.
:::

Sometimes in deep stacks it may be important to have different `softInputMode` per screen, but by default `react-navigation` keeps previous screens mounted, so if you are using default `useKeyboardAnimation` hook, then all following screens will have `softInputMode=adjustResize`.

To prevent such behavior you can write own hook based on primitives from this library. The implementation may look like:

Expand Down

0 comments on commit 22e7a20

Please sign in to comment.