Skip to content

Commit

Permalink
docs: checkout docs for 1.7.0 (#232)
Browse files Browse the repository at this point in the history
## 馃摐 Description

Cutout `1.7.0` version for documentation.

## 馃挕 Motivation and Context

In this documentation **Compatibility** and **API** sections were
changed, so we need to checkout new docs for given version to not mess
up with previous documentation version.

## 馃摙 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
- added `1.7.0` tag in dropdown;
- move `Next` version under `1.7.0` tag.

## 馃 How Has This Been Tested?

Tested via `localhost:3000` and preview 馃憖 .

## 馃摑 Checklist

- [x] CI successfully passed
  • Loading branch information
kirillzyusko committed Sep 8, 2023
1 parent ad7e959 commit bacba67
Show file tree
Hide file tree
Showing 30 changed files with 1,138 additions and 1 deletion.
2 changes: 1 addition & 1 deletion docs/docs/api/components/keyboard-avoiding-view.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ This new `KeyboardAvoidingView` maintains the familiar React Native [API](https:

Below is a visual difference between the implementations (the animation is _**4x**_ times slower for better visual perception).

import KeyboardAvoidingViewComparison from '../../../src/components/KeyboardAvoidingViewComparison'
import KeyboardAvoidingViewComparison from '@site/src/components/KeyboardAvoidingViewComparison'

<KeyboardAvoidingViewComparison />

Expand Down
3 changes: 3 additions & 0 deletions docs/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ const config = {
'1.6.0': {
label: '1.6.0',
},
'1.7.0': {
label: '1.7.0',
},
},
},
blog: {
Expand Down
8 changes: 8 additions & 0 deletions docs/versioned_docs/version-1.7.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,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`.
4 changes: 4 additions & 0 deletions docs/versioned_docs/version-1.7.0/api/hooks/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"label": "馃帲 Hooks",
"position": 1
}
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;
}
}
```
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit bacba67

Please sign in to comment.