-
-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## 📜 Description Added `1.8.0` tag to docs. ## 💡 Motivation and Context To keep new changes in documentation/info about new functionality in a separate version to not add a confusion in which version it was added. ## 📢 Changelog ### Docs - added `1.8.0` tag in dropdown; - checkout docs for `1.8.0` tag. ## 🤔 How Has This Been Tested? Tested via preview. ## 📸 Screenshots (if appropriate): <img width="297" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/e9bd55d7-e4ed-435a-b4c1-e670c9ef9ee5"> ## 📝 Checklist - [x] CI successfully passed
- Loading branch information
1 parent
9430657
commit c12ede3
Showing
32 changed files
with
1,208 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 |
---|---|---|
|
@@ -56,6 +56,9 @@ const config = { | |
'1.7.0': { | ||
label: '1.7.0', | ||
}, | ||
'1.8.0': { | ||
label: '1.8.0', | ||
}, | ||
}, | ||
}, | ||
blog: { | ||
|
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.8.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.8.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`. |
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.8.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 | ||
} |
52 changes: 52 additions & 0 deletions
52
docs/versioned_docs/version-1.8.0/api/hooks/keyboard/use-keyboard-animation.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,52 @@ | ||
--- | ||
keywords: [react-native-keyboard-controller, useKeyboardAnimation, react-native animated, react hook] | ||
--- | ||
|
||
# useKeyboardAnimation | ||
|
||
`useKeyboardAnimation` is a hook which gives access to two animated values: | ||
|
||
- `height` - value which changes between **0** and **keyboardHeight**; | ||
- `progress` - value which changes between **0** (keyboard closed) and **1** (keyboard opened). | ||
|
||
## Example | ||
|
||
```tsx | ||
import { useKeyboardAnimation } from "react-native-keyboard-controller"; | ||
|
||
const { height, progress } = useKeyboardAnimation(); | ||
``` | ||
|
||
Also have a look on [example](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example) app for more comprehensive usage. | ||
|
||
## Using with class component | ||
|
||
```tsx | ||
import { | ||
KeyboardController, | ||
KeyboardContext, | ||
AndroidSoftInputModes, | ||
} from "react-native-keyboard-controller"; | ||
|
||
class KeyboardAnimation extends React.PureComponent { | ||
// 1. use context value | ||
static contextType = KeyboardContext; | ||
|
||
componentDidMount() { | ||
// 2. set input mode for android to `adjustResize` | ||
// (can be omitted if you already have `adjustResize` in `AndroidManifest.xml`) | ||
KeyboardController.setInputMode(AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE); | ||
} | ||
|
||
componentWillUnmount() { | ||
// 2. return to default input mode (for Android) | ||
// in order not to break other part of your app | ||
KeyboardController.setDefaultMode(); | ||
} | ||
|
||
render() { | ||
// 3. consume animated values 😊 | ||
const { animated } = this.context; | ||
} | ||
} | ||
``` |
Binary file added
BIN
+47.5 KB
docs/versioned_docs/version-1.8.0/api/hooks/keyboard/use-keyboard-handler/end.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.