-
-
Notifications
You must be signed in to change notification settings - Fork 85
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a425e7c
commit 7b5e2c9
Showing
37 changed files
with
1,479 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"label": "API Reference", | ||
"position": 4, | ||
"link": { | ||
"type": "generated-index", | ||
"description": "API reference containing information about all public methods and their signatures" | ||
} | ||
} |
4 changes: 4 additions & 0 deletions
4
docs/versioned_docs/version-1.10.0/api/components/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "📚 Components", | ||
"position": 2 | ||
} |
124 changes: 124 additions & 0 deletions
124
docs/versioned_docs/version-1.10.0/api/components/keyboard-avoiding-view.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
--- | ||
keywords: [react-native-keyboard-controller, KeyboardAvoidingView, keyboard avoiding view, avoid keyboard, android] | ||
--- | ||
|
||
# KeyboardAvoidingView | ||
|
||
This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed. | ||
|
||
## Why another `KeyboardAvoidingView` is needed? | ||
|
||
This new `KeyboardAvoidingView` maintains the familiar React Native [API](https://reactnative.dev/docs/keyboardavoidingview) but ensures consistent behavior and animations on both `iOS` and `Android` platforms. Unlike the existing solution, which primarily caters to `iOS`, this component eliminates platform discrepancies, providing a unified user experience. By reproducing the same animations and behaviors on both platforms, it simplifies cross-platform development, meets user expectations for consistency, and enhances code maintainability. Ultimately, it addresses the need for a reliable and uniform keyboard interaction solution across different devices. | ||
|
||
Below is a visual difference between the implementations (the animation is _**4x**_ times slower for better visual perception). | ||
|
||
import KeyboardAvoidingViewComparison from '@site/src/components/KeyboardAvoidingViewComparison' | ||
|
||
<KeyboardAvoidingViewComparison /> | ||
|
||
:::info Found a bug? Help the project and report it! | ||
|
||
If you found any bugs or inconsistent behavior comparing to `react-native` implementation - don't hesitate to open an [issue](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/new?assignees=kirillzyusko&labels=bug&template=bug_report.md&title=). It will help the project 🙏 | ||
|
||
Also if there is any well-known problems in original `react-native` implementation which can not be fixed for a long time and they are present in this implementation as well - also feel free to submit an [issue](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/new?assignees=kirillzyusko&labels=bug&template=bug_report.md&title=). Let's make this world better together 😎 | ||
|
||
::: | ||
|
||
## Example | ||
|
||
```tsx | ||
import React from 'react'; | ||
import { | ||
Text, | ||
TextInput, | ||
TouchableOpacity, | ||
View, | ||
StyleSheet, | ||
} from 'react-native'; | ||
import { KeyboardAvoidingView } from 'react-native-keyboard-controller'; | ||
|
||
export default function KeyboardAvoidingViewExample() { | ||
return ( | ||
<KeyboardAvoidingView | ||
behavior={'padding'} | ||
contentContainerStyle={styles.container} | ||
keyboardVerticalOffset={100} | ||
style={styles.content} | ||
> | ||
<View style={styles.inner}> | ||
<Text style={styles.heading}>Header</Text> | ||
<View> | ||
<TextInput placeholder="Username" style={styles.textInput} /> | ||
<TextInput placeholder="Password" style={styles.textInput} /> | ||
</View> | ||
<TouchableOpacity style={styles.button}> | ||
<Text style={styles.text}>Submit</Text> | ||
</TouchableOpacity> | ||
</View> | ||
</KeyboardAvoidingView> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
}, | ||
content: { | ||
flex: 1, | ||
maxHeight: 600, | ||
}, | ||
heading: { | ||
fontSize: 36, | ||
marginBottom: 48, | ||
fontWeight: '600', | ||
}, | ||
inner: { | ||
padding: 24, | ||
flex: 1, | ||
justifyContent: 'space-between', | ||
}, | ||
textInput: { | ||
height: 45, | ||
borderColor: '#000000', | ||
borderWidth: 1, | ||
borderRadius: 10, | ||
marginBottom: 36, | ||
paddingLeft: 10, | ||
}, | ||
button: { | ||
marginTop: 12, | ||
height: 45, | ||
borderRadius: 10, | ||
backgroundColor: 'rgb(40, 64, 147)', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}, | ||
text: { | ||
fontWeight: '500', | ||
fontSize: 16, | ||
color: 'white', | ||
}, | ||
}); | ||
``` | ||
|
||
## Props | ||
|
||
### `behavior` | ||
|
||
Specify how to react to the presence of the keyboard. Could be one value of: | ||
|
||
- `position` | ||
- `padding` | ||
- `height` | ||
|
||
### `contentContainerStyle` | ||
|
||
The style of the content container (View) when behavior is `position`. | ||
|
||
### `enabled` | ||
|
||
A boolean prop indicating whether `KeyboardAvoidingView` is enabled or disabled. Default is `true`. | ||
|
||
### `keyboardVerticalOffset` | ||
|
||
This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. Default is `0`. |
110 changes: 110 additions & 0 deletions
110
docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
--- | ||
keywords: [react-native-keyboard-controller, KeyboardAwareScrollView, keyboard aware view, aware scroll view] | ||
--- | ||
|
||
# KeyboardAwareScrollView | ||
|
||
import Lottie from 'lottie-react'; | ||
import lottie from '../../../src/components/HomepageFeatures/text-inputs.lottie.json'; | ||
|
||
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}> | ||
<Lottie animationData={lottie} style={{ width: 400, height: 400 }} loop /> | ||
</div> | ||
|
||
`ScrollView` that effortlessly handles keyboard appearance, automatically scrolls to focused `TextInput` and provides a native-like performance. | ||
|
||
## Comparison | ||
|
||
Current `react-native` ecosystem has a plenty of solutions that solves the problem of focused inputs being covered by keyboard. Each of them has its own advantages and disadvantages. | ||
|
||
Below is a table with the most important functions and their support in various implementations: | ||
|
||
||[react-native-avoid-soft-input](https://mateusz1913.github.io/react-native-avoid-softinput/)|[react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view)|[react-native-keyboard-manager](https://github.com/douglasjunior/react-native-keyboard-manager)|[react-native-keyboard-controller](./keyboard-aware-scroll-view.mdx)| | ||
|-----|-----|-----|-----|-----| | ||
|Respects keyboard animation|🟠 <sup><small>1</small></sup>|❌|✅|✅| | ||
|JS implementation|❌|✅|❌|🟠 <sup><small>2</small></sup>| | ||
|Reacts on focused input layout changes|❌|❌|🟠 <sup><small>3</small></sup>|✅| | ||
|Reacts on focus changes|✅|✅|✅|✅| | ||
|Auto-scroll when user is typing and input in non visible area|❌|❌|🟠 <sup><small>3</small></sup>|✅| | ||
|Android support|✅|✅|❌|✅| | ||
|Maintained|✅|❌|✅|✅| | ||
|Support Fabric (new) architecture|✅|🟠 <sup><small>4</small></sup>|❌|✅| | ||
|
||
> <sup>1</sup> <b>only</b> on <b>iOS</b> | ||
> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some hooks (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>useFocusedInputHandler</code>) exposed from native code | ||
> <sup>3</sup> achievable with <code>KeyboardManager.reloadLayoutIfNeeded()</code> usage in appropriate <code>TextInput</code> callbacks (<code>onLayout</code>/<code>onChangeText</code>) | ||
> <sup>4</sup> since it's JS based solution it supports new architecture, but it uses <b>deprecated</b> API. | ||
## Props | ||
|
||
### ScrollView Props | ||
|
||
Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props). | ||
|
||
### `bottomOffset` | ||
|
||
The distance between keyboard and focused `TextInput` when keyboard is shown. | ||
|
||
## Example | ||
|
||
```tsx | ||
import React from 'react'; | ||
import { StyleSheet, TextInputProps, TextInput as TextInputRN } from 'react-native'; | ||
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'; | ||
|
||
const TextInput = (props: TextInputProps) => { | ||
return ( | ||
<TextInputRN | ||
placeholderTextColor="#6c6c6c" | ||
style={styles.textInput} | ||
multiline | ||
numberOfLines={2} | ||
testID={props.placeholder} | ||
{...props} | ||
placeholder={`${props.placeholder} (${props.keyboardType === 'default' ? 'text' : 'numeric'})`} | ||
/> | ||
); | ||
}; | ||
|
||
export default function AwareScrollView() { | ||
return ( | ||
<KeyboardAwareScrollView | ||
bottomOffset={50} | ||
style={styles.container} | ||
contentContainerStyle={styles.content} | ||
> | ||
{new Array(10).fill(0).map((_, i) => ( | ||
<TextInput | ||
key={i} | ||
placeholder={`TextInput#${i}`} | ||
keyboardType={i % 2 === 0 ? 'numeric' : 'default'} | ||
/> | ||
))} | ||
</KeyboardAwareScrollView> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
paddingHorizontal: 16, | ||
}, | ||
content: { | ||
paddingTop: 50, | ||
}, | ||
textInput: { | ||
width: '100%', | ||
minHeight: 50, | ||
maxHeight: 200, | ||
marginBottom: 50, | ||
borderColor: 'black', | ||
borderWidth: 2, | ||
marginRight: 160, | ||
borderRadius: 10, | ||
color: 'black', | ||
paddingHorizontal: 12, | ||
}, | ||
}); | ||
``` |
41 changes: 41 additions & 0 deletions
41
docs/versioned_docs/version-1.10.0/api/components/keyboard-sticky-view/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
--- | ||
keywords: [react-native-keyboard-controller, KeyboardStickyView, keyboard sticky view, keyboard sticky footer, sticky view, sticky footer, keyboard, android] | ||
--- | ||
|
||
# KeyboardStickyView | ||
|
||
A `KeyboardStickyView` component seamlessly ensures that a designated view sticks to the keyboard's movements, maintaining visibility and interaction. Use it when you want to enhance the user experience by preventing important UI elements from being obscured by the keyboard, creating a smooth and user-friendly interface in your React Native application. | ||
|
||
:::info `KeyboardAvoidingView` vs `KeyboardStickyView` | ||
Unlike [KeyboardAvoidingView](../keyboard-avoiding-view.mdx) the `KeyboardStickyView` just moves the content along with keyboard and not resizing the inner view. Try to compare animations of `KeyboardStickyView` and `KeyboardAvoidingView` to see a difference in details on how it works and which component is suitable for your needs. | ||
::: | ||
|
||
import ksv from './ksv.lottie.json'; | ||
import kav from '@site/src/components/KeyboardAvoidingViewComparison/kav-animated.lottie.json'; | ||
import ComparisonTable from '@site/src/components/ComparisonTable'; | ||
|
||
<ComparisonTable | ||
leftLottie={ksv} | ||
rightLottie={kav} | ||
leftText={<i><code>KeyboardStickyView</code> - only footer is moving (container is not resized)</i>} | ||
rightText={<i><code>KeyboardAvoidingView</code> - entire container is getting resized</i>} | ||
/> | ||
|
||
## Example | ||
|
||
```tsx | ||
const offset = { closed: 0, opened: 20 }; | ||
|
||
<KeyboardStickyView offset={offset}> | ||
<Footer /> | ||
</KeyboardStickyView> | ||
``` | ||
|
||
## Props | ||
|
||
### offset | ||
|
||
An object containing next properties: | ||
|
||
- **closed** - additional offset to the view when keyboard is closed. Default value is `0`. | ||
- **opened** - additional offset to the view when keyboard is opened. Default value is `0`. |
1 change: 1 addition & 0 deletions
1
docs/versioned_docs/version-1.10.0/api/components/keyboard-sticky-view/ksv.lottie.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "🎣 Hooks", | ||
"position": 1 | ||
} |
4 changes: 4 additions & 0 deletions
4
docs/versioned_docs/version-1.10.0/api/hooks/input/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "📝 Input", | ||
"position": 2 | ||
} |
34 changes: 34 additions & 0 deletions
34
docs/versioned_docs/version-1.10.0/api/hooks/input/use-focused-input-handler.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
keywords: [react-native, react native, react-native-keyboard-controller, useFocusedInputHandler, onTextChanged, onChangeText, input interceptor, react-native-reanimated, worklet, react hook] | ||
--- | ||
|
||
# useFocusedInputHandler | ||
|
||
`useFocusedInputHandler` is a hook that allows to intercept events from a focused `TextInput`. | ||
|
||
## Example | ||
|
||
```ts | ||
useFocusedInputHandler({ | ||
onChangeText: ({text}) => { | ||
'worklet'; | ||
} | ||
}, []); | ||
``` | ||
|
||
### Handlers | ||
|
||
#### `onChangeText` | ||
|
||
Fires an event whenever user changes text in focused `TextInput` (i. e. adds or deletes symbols). Event has following structure: | ||
|
||
```ts | ||
type FocusedInputTextChangedEvent = { | ||
text: string; | ||
}; | ||
``` | ||
|
||
This handler can be handy when you need to have an access to what user typed on a global level (i. e. when you don't have a direct access to your `TextInput`), for example: | ||
|
||
- you develop a generic component for any kind of avoidance focused inputs (i. e. `AwareScrollView`) that doesn't have an access to child `TextInputs` by design; | ||
- you track user activity on the screen and if there is no activity for certain period of time then you do a certain action (logout for example). If you want to reset timer when user interacts with a keyboard - usage of this hook can be a good choice. |
44 changes: 44 additions & 0 deletions
44
docs/versioned_docs/version-1.10.0/api/hooks/input/use-reanimated-focused-input.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
--- | ||
keywords: [react-native-keyboard-controller, useReanimatedFocusedInput, react-native-reanimated, react hook, focused input, layout] | ||
--- | ||
|
||
# useReanimatedFocusedInput | ||
|
||
Hook that returns an information about `TextInput` that currently has a focus. Returns `null` if no input has focus. | ||
|
||
Hook will update its value in next cases: | ||
|
||
- when keyboard changes its size (appears, disappears, changes size because of different input mode); | ||
- when focus was changed from one `TextInput` to another; | ||
- when `layout` of focused input was changed; | ||
- when user types a text. | ||
|
||
:::info Events order | ||
The value from `useReanimatedFocusedInput` will be always updated before keyboard events, so you can safely read values in `onStart` handler and be sure they are up-to-date. | ||
::: | ||
|
||
## Event structure | ||
|
||
The `input` property from this hook is returned as `SharedValue`. The returned data has next structure: | ||
|
||
```ts | ||
type FocusedInputLayoutChangedEvent = { | ||
target: number; // tag of the focused TextInput | ||
layout: { // layout of the focused TextInput | ||
x: number; // `x` coordinate inside the parent component | ||
y: number; // `y` coordinate inside the parent component | ||
width: number; // `width` of the TextInput | ||
height: number; // `height` of the TextInput | ||
absoluteX: number; // `x` coordinate on the screen | ||
absoluteY: number; // `y` coordinate on the screen | ||
}; | ||
}; | ||
``` | ||
|
||
## Example | ||
|
||
```tsx | ||
const {input} = useReanimatedFocusedInput(); | ||
``` | ||
|
||
Also have a look on [example](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example) app for more comprehensive usage. |
4 changes: 4 additions & 0 deletions
4
docs/versioned_docs/version-1.10.0/api/hooks/keyboard/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "⌨️ Keyboard", | ||
"position": 1 | ||
} |
Oops, something went wrong.