- Notifications
You must be signed in to change notification settings - Fork75
Perfect TextInput ScrollView
License
baijunjie/react-native-input-scroll-view
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Mainly to achieve the following functions：
- When the keyboard pops up, the
TextInputwill automatically adjust to the top of the keyboard. - When the keyboard pops up, the content of the
ScrollViewwill not be obscured by the keyboard. - When multiline
TextInputgets focus, the selected cursor will be automatically adjusted to the top of the keyboard. - When the multiline
TextInputcreate new line, the new line will automatically adjust to the top of the keyboard. - Put your finger on top of
TextInputand slideScrollView, when you lift your finger, theTextInputwill not get focus.
npm
$ npm install react-native-input-scroll-view --save
yarn
$ yarn add react-native-input-scroll-view
importInputScrollViewfrom'react-native-input-scroll-view';...state={text:'',};render(){const{ text}=this.state;return(<InputScrollView><TextInput/><TextInput/><TextInputvalue={text}onChangeText={text=>this.setState({ text})}multiline/></InputScrollView>);}
React-native-input-scroll-view automatically modify onContentSizeChange, onSelectionChange, and onChangeTextInput props. It is not yet designed to pass them down if theTextInput is wrapped into another component so don’t forget to do it:
importInputScrollViewfrom'react-native-input-scroll-view';...constMyComponent=props=>(<View><TextInput{...props}/></View>);...state={text:'',};render(){const{ text}=this.state;return(<InputScrollView><MyComponentvalue={text}onChangeText={text=>this.setState({ text})}/></InputScrollView>);}
Note that if the cursor is to be correctly adjusted to the top of the keyboard, you must bindvalue toTextInput.
If your ReactNative version is on or abovev0.57, skip this section.
Before a certain version of ReactNative, multilineTextInput height on an Android device could not change properly based on its content, so we need to add additional processing code
importInputScrollViewfrom'react-native-input-scroll-view';...state={text:'',textareaHeight:null,};render(){const{ text, textareaHeight}=this.state;return(<InputScrollView><TextInput/><TextInput/><TextInputstyle={{height:textareaHeight}}value={text}onChangeText={text=>this.setState({ text})}onContentSizeChange={this._onContentSizeChange}multiline/></InputScrollView>);}_onContentSizeChange=({nativeEvent:event})=>{this.setState({textareaHeight:event.contentSize.height});};
| Property | Type | Default | Description |
|---|---|---|---|
topOffset | number | undefined | The offset of theInputScrollView relative to the top of the window. When the screen containsTopBar, it is usually set to the height ofTopBar. If not explicitly set, the program will automatically determine, but may cause problems.issues#43。 |
keyboardOffset | number | 40 | When automatic adjustment, the cursor relative to the top of the keyboard offset. |
multilineInputStyle | Style | null | If your multilineTextInput has a specific style, to ensure that the cursor can be accurately adjusted to the top of the keyboard, this is set as a multilineTextInput style, The style attributes that mainly includefontSize、fontFamily、lineHeight etc. affect the position of the cursor.Be careful not to includewidth andheight. |
useAnimatedScrollView | bool | false | Replace regularScrollView component withAnimated.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 |
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 |
"react": "^16.0.0-alpha.12""react-native": ">=0.46.0"
MIT
About
Perfect TextInput ScrollView
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors10
Uh oh!
There was an error while loading.Please reload this page.