Skip to content

Commit

Permalink
docs: checkout 1.15 (#728)
Browse files Browse the repository at this point in the history
## 📜 Description

Added new `1.15` version.

## 💡 Motivation and Context

Added new `1.15` version in dropdown.

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### Docs

- checkout a new `1.15` version;

## 🤔 How Has This Been Tested?

Tested via preview.

## 📸 Screenshots (if appropriate):

<img width="2094" alt="image"
src="https://github.com/user-attachments/assets/391d21e9-3b34-4880-9782-c89c24681a9f"
/>

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Dec 12, 2024
1 parent bf9e349 commit 1bdb523
Show file tree
Hide file tree
Showing 44 changed files with 2,613 additions and 0 deletions.
3 changes: 3 additions & 0 deletions docs/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ const config = {
"1.14.0": {
label: "1.14.0",
},
"1.15.0": {
label: "1.15.0",
},
},
},
blog: {
Expand Down
8 changes: 8 additions & 0 deletions docs/versioned_docs/version-1.15.0/api/_category_.json
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"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"label": "📚 Components",
"position": 2
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
---
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

### [`View Props`](https://reactnative.dev/docs/view#props)

Inherits [View Props](https://reactnative.dev/docs/view#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`.
Loading

0 comments on commit 1bdb523

Please sign in to comment.