Skip to content

Commit f0d9094

Browse files
kirillzyuskokirillzyusko
authored
chore: checkout docs for 1.5.0 tag (#140)
## 📜 Description Ported `next` docs under new `1.5.0` tag. ## 💡 Motivation and Context To make new version of docs publicly available 🙂 ## 📢 Changelog ### Docs - added `1.5.0` in versions dropdown; ## 🤔 How Has This Been Tested? Tested on localhost:3000 🙂 ## 📸 Screenshots (if appropriate): <img width="262" alt="image" src="https://user-images.githubusercontent.com/22820318/230842691-63d3757d-951b-414c-9269-b2e1f0a3832a.png"> ## 📝 Checklist - [x] CI successfully passed
1 parent 2bbeead commit f0d9094

27 files changed

+950
-0
lines changed

‎docs/docusaurus.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ const config = {
4444
'1.4.0': {
4545
label: '1.4.0',
4646
},
47+
'1.5.0': {
48+
label: '1.5.0',
49+
},
4750
},
4851
},
4952
blog: {

‎docs/versioned_docs/version-1.5.0/api/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "API Reference",
3+
"position": 4,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "API reference containing information about all public methods and their signatures"
7+
}
8+
}

‎docs/versioned_docs/version-1.5.0/api/hooks/_category_.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Hooks",
3+
"position": 1
4+
}

‎docs/versioned_docs/version-1.5.0/api/hooks/use-keyboard-animation.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# useKeyboardAnimation
2+
3+
`useKeyboardAnimation` is a hook which gives access to two animated values:
4+
- `height` - value which changes between **0** and **keyboardHeight**;
5+
- `progress` - value which changes between **0** (keyboard closed) and **1** (keyboard opened).
6+
7+
## Example
8+
9+
```tsx
10+
import { useKeyboardAnimation } from "react-native-keyboard-controller";
11+
12+
const { height, progress } = useKeyboardAnimation();
13+
```
14+
15+
Also have a look on [example](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example) app for more comprehensive usage.
16+
17+
## Using with class component
18+
19+
```tsx
20+
import {
21+
KeyboardController,
22+
KeyboardContext,
23+
AndroidSoftInputModes,
24+
} from "react-native-keyboard-controller";
25+
26+
class KeyboardAnimation extends React.PureComponent {
27+
// 1. use context value
28+
static contextType = KeyboardContext;
29+
30+
componentDidMount() {
31+
// 2. set input mode for android to `adjustResize`
32+
// (can be omitted if you already have `adjustResize` in `AndroidManifest.xml`)
33+
KeyboardController.setInputMode(AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
34+
}
35+
36+
componentWillUnmount() {
37+
// 2. return to default input mode (for Android)
38+
// in order not to break other part of your app
39+
KeyboardController.setDefaultMode();
40+
}
41+
42+
render() {
43+
// 3. consume animated values 😊
44+
const { animated } = this.context;
45+
}
46+
}
47+
```

‎docs/versioned_docs/version-1.5.0/api/hooks/use-keyboard-handler/end.png‎

47.5 KB
Loading

‎docs/versioned_docs/version-1.5.0/api/hooks/use-keyboard-handler/index.mdx‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import CodeBlock from '@theme/CodeBlock';
2+
3+
# useKeyboardHandler
4+
5+
`useKeyboardHandler` is a hook that offers low-level but more powerful API in comparison to `useKeyboardAnimation`. Using this hook you are getting an access to keyboard lifecycle events and you can easily determine the moment of the beginning animation, the end of the animation and get keyboard position in every frame of the animation.
6+
7+
## Example
8+
9+
```tsx
10+
useKeyboardHandler(
11+
{
12+
onStart: (e) => {
13+
'worklet';
14+
},
15+
onMove: (e) => {
16+
'worklet';
17+
},
18+
onInteractive: (e) => {
19+
'worklet';
20+
},
21+
onEnd: (e) => {
22+
'worklet';
23+
},
24+
},
25+
[]
26+
);
27+
```
28+
29+
:::caution Worklet directives
30+
31+
Don't forget to add `worklet` directive to all `onStart`/`onMove`/`onInteractive`/`onEnd` handlers. Otherwise your code will throw exception.
32+
33+
These handlers are not workletized by default, since it's not a part of `reanimated` package.
34+
35+
:::
36+
37+
:::info Unlock 120 FPS on iOS
38+
Since `onMove` handler on iOS is based on `CADisplayLink` usage - you may need to add following content in `Info.plist` if you want to have your animations running at 120 FPS on devices with ProMotion displays:
39+
40+
```diff
41+
+ <key>CADisableMinimumFrameDurationOnPhone</key>
42+
+ <true/>
43+
```
44+
:::
45+
46+
### Event structure
47+
48+
- `height` - height of the keyboard;
49+
- `progress` - a value between `0` (closed) and `1` (opened) indicating relative keyboard position.
50+
51+
### Handlers
52+
53+
#### `onStart`
54+
55+
export const onStartCode = (
56+
<CodeBlock
57+
language="ts"
58+
>
59+
{`useKeyboardHandler(
60+
{
61+
onStart: (e) => {
62+
'worklet';
63+
const willKeyboardAppear = e.progress === 1;
64+
}
65+
},
66+
[]
67+
);`}
68+
</CodeBlock>
69+
);
70+
71+
<div className="grid">
72+
<div className="description-block">
73+
This function is called before the keyboard movement starts. <code>height</code> and <code>progress</code> values will have <b>destination</b> values, i. e. if keyboard was closed but will appear - these values will have a values like "keyboard is already opened" (<code>progress</code> will be equal to <code>1</code> and <code>height</code> will have non-zero value).
74+
<br/>
75+
<br/>
76+
<div className="desktop">
77+
{onStartCode}
78+
</div>
79+
</div>
80+
<div>
81+
<img src={require('./start.png').default} />
82+
</div>
83+
</div>
84+
<div className="mobile">
85+
{onStartCode}
86+
</div>
87+
88+
#### `onMove`
89+
90+
export const onMoveCode = (
91+
<CodeBlock
92+
language="ts"
93+
>
94+
{`useKeyboardHandler(
95+
{
96+
onMove: (e) => {
97+
'worklet';
98+
progress.value = e.progress;
99+
height.value = e.height;
100+
}
101+
},
102+
[]
103+
);`}
104+
</CodeBlock>
105+
);
106+
107+
<div className="grid">
108+
<div className="description-block">
109+
This function will be called every frame when the keyboard changes its position.
110+
<br/>
111+
<br/>
112+
<div className="desktop">
113+
{onMoveCode}
114+
</div>
115+
</div>
116+
<div>
117+
<img src={require('./move.png').default} />
118+
</div>
119+
</div>
120+
<div className="mobile">
121+
{onMoveCode}
122+
</div>
123+
124+
:::info Not precise values
125+
There is no corresponding events in iOS for this hook. So values will not be perfectly synchronized with the keyboard.
126+
127+
The same is applied to Android < 11 - these OS versions don't have API for getting keyboard positions during an animation.
128+
:::
129+
130+
#### `onInteractive`
131+
132+
export const onInteractiveCode = (
133+
<CodeBlock
134+
language="ts"
135+
>
136+
{`useKeyboardHandler(
137+
{
138+
onInteractive: (e) => {
139+
'worklet';
140+
progress.value = e.progress;
141+
height.value = e.height;
142+
}
143+
},
144+
[]
145+
);`}
146+
</CodeBlock>
147+
);
148+
149+
<div className="grid">
150+
<div className="description-block">
151+
This function will be called every frame when user changes position of the keyboard by the drag.
152+
<br />
153+
<br />
154+
If finger is released and keyboard animates to its final destination, then the standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code> lifecycles will be triggered.
155+
<br/>
156+
<br/>
157+
<div className="desktop">
158+
{onInteractiveCode}
159+
</div>
160+
</div>
161+
<div>
162+
<img src={require('./interactive.png').default} />
163+
</div>
164+
</div>
165+
<div className="mobile">
166+
{onInteractiveCode}
167+
</div>
168+
169+
:::info Event availability
170+
This event is available only on Android >= 11. To receive it you need to use [KeyboardGestureArea](./../keyboard-gesture-area).
171+
172+
On iOS you need to specify `keyboardDismissMode="interactive"` on your `ScrollView`.
173+
:::
174+
175+
#### `onEnd`
176+
177+
export const onEndCode = (
178+
<CodeBlock
179+
language="ts"
180+
>
181+
{`useKeyboardHandler(
182+
{
183+
onEnd: (e) => {
184+
'worklet';
185+
progress.value = e.progress;
186+
height.value = e.height;
187+
}
188+
},
189+
[]
190+
);`}
191+
</CodeBlock>
192+
);
193+
194+
<div className="grid">
195+
<div className="description-block">
196+
This function will be called when the keyboard has completed its movement. The event will contain <b>current</b> keyboard metrics.
197+
<br/>
198+
<br/>
199+
<div className="desktop">
200+
{onEndCode}
201+
</div>
202+
</div>
203+
<div>
204+
<img src={require('./end.png').default} />
205+
</div>
206+
</div>
207+
208+
<div className="mobile">
209+
{onEndCode}
210+
</div>

‎docs/versioned_docs/version-1.5.0/api/hooks/use-keyboard-handler/interactive.png‎

59.8 KB
Loading

‎docs/versioned_docs/version-1.5.0/api/hooks/use-keyboard-handler/move.png‎

53.3 KB
Loading

‎docs/versioned_docs/version-1.5.0/api/hooks/use-keyboard-handler/start.png‎

48.6 KB
Loading

‎docs/versioned_docs/version-1.5.0/api/hooks/use-reanimated-keyboard-animation.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# useReanimatedKeyboardAnimation
2+
3+
`useReanimatedKeyboardAnimation` is a hook which gives access to two reanimated values:
4+
- `height` - value which changes between **0** and **keyboardHeight**;
5+
- `progress` - value which changes between **0** (keyboard closed) and **1** (keyboard opened).
6+
7+
## Example
8+
9+
```tsx
10+
import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
11+
12+
const { height, progress } = useReanimatedKeyboardAnimation();
13+
```
14+
15+
Also have a look on [example](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example) app for more comprehensive usage.
16+
17+
## Using with class component
18+
19+
```tsx
20+
import {
21+
KeyboardController,
22+
KeyboardContext,
23+
AndroidSoftInputModes,
24+
} from "react-native-keyboard-controller";
25+
26+
class KeyboardAnimation extends React.PureComponent {
27+
// 1. use context value
28+
static contextType = KeyboardContext;
29+
30+
componentDidMount() {
31+
// 2. set input mode for android to `adjustResize`
32+
// (can be omitted if you already have `adjustResize` in `AndroidManifest.xml`)
33+
KeyboardController.setInputMode(AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
34+
}
35+
36+
componentWillUnmount() {
37+
// 2. return to default input mode (for Android)
38+
// in order not to break other part of your app
39+
KeyboardController.setDefaultMode();
40+
}
41+
42+
render() {
43+
// 3. consume reanimated values 😊
44+
const { reanimated } = this.context;
45+
}
46+
}
47+
```

0 commit comments

Comments
 (0)