|
| 1 | +--- |
| 2 | +keywords: |
| 3 | + [ |
| 4 | + react-native-keyboard-controller, |
| 5 | + KeyboardAvoidingView, |
| 6 | + keyboard avoiding view, |
| 7 | + avoid keyboard, |
| 8 | + android, |
| 9 | + ] |
| 10 | +--- |
| 11 | + |
| 12 | +# KeyboardAvoidingView |
| 13 | + |
| 14 | +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. |
| 15 | + |
| 16 | +## Why another `KeyboardAvoidingView` is needed? |
| 17 | + |
| 18 | +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. |
| 19 | + |
| 20 | +Below is a visual difference between the implementations (the animation is _**4x**_ times slower for better visual perception). |
| 21 | + |
| 22 | +import KeyboardAvoidingViewComparison from "@site/src/components/KeyboardAvoidingViewComparison"; |
| 23 | + |
| 24 | +<KeyboardAvoidingViewComparison /> |
| 25 | + |
| 26 | +:::info Found a bug? Help the project and report it! |
| 27 | + |
| 28 | +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 🙏 |
| 29 | + |
| 30 | +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 😎 |
| 31 | + |
| 32 | +::: |
| 33 | + |
| 34 | +## Example |
| 35 | + |
| 36 | +```tsx |
| 37 | +import React from "react"; |
| 38 | +import { |
| 39 | + Text, |
| 40 | + TextInput, |
| 41 | + TouchableOpacity, |
| 42 | + View, |
| 43 | + StyleSheet, |
| 44 | +} from "react-native"; |
| 45 | +import { KeyboardAvoidingView } from "react-native-keyboard-controller"; |
| 46 | + |
| 47 | +export default function KeyboardAvoidingViewExample() { |
| 48 | + return ( |
| 49 | + <KeyboardAvoidingView |
| 50 | + behavior={"padding"} |
| 51 | + contentContainerStyle={styles.container} |
| 52 | + keyboardVerticalOffset={100} |
| 53 | + style={styles.content} |
| 54 | + > |
| 55 | + <View style={styles.inner}> |
| 56 | + <Text style={styles.heading}>Header</Text> |
| 57 | + <View> |
| 58 | + <TextInput placeholder="Username" style={styles.textInput} /> |
| 59 | + <TextInput placeholder="Password" style={styles.textInput} /> |
| 60 | + </View> |
| 61 | + <TouchableOpacity style={styles.button}> |
| 62 | + <Text style={styles.text}>Submit</Text> |
| 63 | + </TouchableOpacity> |
| 64 | + </View> |
| 65 | + </KeyboardAvoidingView> |
| 66 | + ); |
| 67 | +} |
| 68 | + |
| 69 | +const styles = StyleSheet.create({ |
| 70 | + container: { |
| 71 | + flex: 1, |
| 72 | + }, |
| 73 | + content: { |
| 74 | + flex: 1, |
| 75 | + maxHeight: 600, |
| 76 | + }, |
| 77 | + heading: { |
| 78 | + fontSize: 36, |
| 79 | + marginBottom: 48, |
| 80 | + fontWeight: "600", |
| 81 | + }, |
| 82 | + inner: { |
| 83 | + padding: 24, |
| 84 | + flex: 1, |
| 85 | + justifyContent: "space-between", |
| 86 | + }, |
| 87 | + textInput: { |
| 88 | + height: 45, |
| 89 | + borderColor: "#000000", |
| 90 | + borderWidth: 1, |
| 91 | + borderRadius: 10, |
| 92 | + marginBottom: 36, |
| 93 | + paddingLeft: 10, |
| 94 | + }, |
| 95 | + button: { |
| 96 | + marginTop: 12, |
| 97 | + height: 45, |
| 98 | + borderRadius: 10, |
| 99 | + backgroundColor: "rgb(40, 64, 147)", |
| 100 | + justifyContent: "center", |
| 101 | + alignItems: "center", |
| 102 | + }, |
| 103 | + text: { |
| 104 | + fontWeight: "500", |
| 105 | + fontSize: 16, |
| 106 | + color: "white", |
| 107 | + }, |
| 108 | +}); |
| 109 | +``` |
| 110 | + |
| 111 | +## Props |
| 112 | + |
| 113 | +### [`View Props`](https://reactnative.dev/docs/view#props) |
| 114 | + |
| 115 | +Inherits [View Props](https://reactnative.dev/docs/view#props). |
| 116 | + |
| 117 | +### `behavior` |
| 118 | + |
| 119 | +Specify how to react to the presence of the keyboard. Could be one value of: |
| 120 | + |
| 121 | +- `position` |
| 122 | +- `padding` |
| 123 | +- `height` |
| 124 | + |
| 125 | +### `contentContainerStyle` |
| 126 | + |
| 127 | +The style of the content container (View) when behavior is `position`. |
| 128 | + |
| 129 | +### `enabled` |
| 130 | + |
| 131 | +A boolean prop indicating whether `KeyboardAvoidingView` is enabled or disabled. Default is `true`. |
| 132 | + |
| 133 | +### `keyboardVerticalOffset` |
| 134 | + |
| 135 | +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`. |
0 commit comments