Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baijunjie/react-native-input-scroll-view
Perfect TextInput ScrollView
https://github.com/baijunjie/react-native-input-scroll-view
cursor keyboard multiline react-native scrollview textinput
Last synced: 3 months ago
JSON representation
Perfect TextInput ScrollView
- Host: GitHub
- URL: https://github.com/baijunjie/react-native-input-scroll-view
- Owner: baijunjie
- License: mit
- Archived: true
- Created: 2017-09-09T16:39:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T14:53:00.000Z (almost 4 years ago)
- Last Synced: 2024-02-25T03:05:46.954Z (4 months ago)
- Topics: cursor, keyboard, multiline, react-native, scrollview, textinput
- Language: JavaScript
- Size: 8.63 MB
- Stars: 350
- Watchers: 10
- Forks: 73
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-react-native - react-native-input-scroll-view
README
# react-native-input-scroll-view [](https://badge.fury.io/js/react-native-input-scroll-view)
Mainly to achieve the following functions：
- When the keyboard pops up, the `TextInput` will automatically adjust to the top of the keyboard.
- When the keyboard pops up, the content of the `ScrollView` will not be obscured by the keyboard.
- When multiline `TextInput` gets focus, the selected cursor will be automatically adjusted to the top of the keyboard.
- When the multiline `TextInput` create new line, the new line will automatically adjust to the top of the keyboard.
- Put your finger on top of `TextInput` and slide `ScrollView`, when you lift your finger, the `TextInput` will not get focus.
## Installation
npm
```shell
$ npm install react-native-input-scroll-view --save
```
yarn
```shell
$ yarn add react-native-input-scroll-view
```
## Usage
```jsx
import InputScrollView from 'react-native-input-scroll-view';
...
state = {
text: '',
};
render() {
const { text } = this.state;
return (
this.setState({ text })}
multiline />
);
}
```
React-native-input-scroll-view automatically modify onContentSizeChange, onSelectionChange, and onChange `TextInput` props. It is not yet designed to pass them down if the `TextInput` is wrapped into another component so don’t forget to do it:
```jsx
import InputScrollView from 'react-native-input-scroll-view';
...
const MyComponent = props => (
);
...
state = {
text: '',
};
render() {
const { text } = this.state;
return (
this.setState({ text })}
/>
);
}
```
**Note that if the cursor is to be correctly adjusted to the top of the keyboard, you must bind `value` to `TextInput`.**
## Multiline TextInput in the Android
**If your ReactNative version is on or above `v0.57`, skip this section.**
Before a certain version of ReactNative, multiline `TextInput` height on an Android device could not change properly based on its content, so we need to add additional processing code
```jsx
import InputScrollView from 'react-native-input-scroll-view';
...
state = {
text: '',
textareaHeight: null,
};
render() {
const { text, textareaHeight } = this.state;
return (
this.setState({ text })}
onContentSizeChange={this._onContentSizeChange}
multiline />
);
}
_onContentSizeChange = ({nativeEvent:event}) => {
this.setState({ textareaHeight: event.contentSize.height });
};
```
## Props
| Property | Type | Default | Description |
| ----------------------- | -------- | ------- | ---------------------------------------- |
| `topOffset` | `number` | `undefined` | The offset of the `InputScrollView` relative to the top of the window. When the screen contains `TopBar`, it is usually set to the height of `TopBar`. If not explicitly set, the program will automatically determine, but may cause problems. [issues#43](https://github.com/baijunjie/react-native-input-scroll-view/issues/43)。 |
| `keyboardOffset` | `number` | `40` | When automatic adjustment, the cursor relative to the top of the keyboard offset. |
| `multilineInputStyle` | `Style` | `null` | If your multiline `TextInput` has a specific style, to ensure that the cursor can be accurately adjusted to the top of the keyboard, this is set as a multiline `TextInput` style, The style attributes that mainly include `fontSize`、`fontFamily`、`lineHeight` etc. affect the position of the cursor. **Be careful not to include `width` and `height`**. |
| `useAnimatedScrollView` | `bool` | `false` | Replace regular `ScrollView` component with `Animated.ScrollView` component. |
| `supportHardwareKeyboard` | `bool` | `false` | `beta` If your device does not use a soft keyboard, try using this parameter to solve the problem. [issues#69](https://github.com/baijunjie/react-native-input-scroll-view/issues/69) |
| `keyboardAvoidingViewProps` | `props` | `null` | `KeyboardAvoidingView` component Props. Check them here: https://facebook.github.io/react-native/docs/keyboardavoidingview |
| `...ScrollView.props` | `props` | | All props from ScrollView are inherited. Check them here: https://facebook.github.io/react-native/docs/scrollview.html |
## ENV
```
"react": "^16.0.0-alpha.12"
"react-native": ">=0.46.0"
```
## Product case
[](https://itunes.apple.com/us/app/id-butler-free/id1291749714?mt=8)
## License
MIT