baijunjie / React Native Input Scroll View
Licence: mit
Perfect TextInput ScrollView
Stars: ✭ 323
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Input Scroll View
Metago
MetaGo provides fast cursor movement/selection for keyboard focused users in vscode
Stars: ✭ 151 (-53.25%)
Mutual labels: keyboard, cursor
Neural chinese transliterator
Can CNNs transliterate Pinyin into Chinese characters correctly?
Stars: ✭ 310 (-4.02%)
Mutual labels: keyboard
Android Slidingemojikeyboard
Our Sliding Emoji Keyboard app.
Stars: ✭ 286 (-11.46%)
Mutual labels: keyboard
Knphotobrowser
📷 图片 || 视频 浏览器(本地和网络) , UIViewController + CollectionView , 完美适配 iPhone 以及 iPad ,屏幕旋转功能 , 适配SDWebImage 5.0
Stars: ✭ 296 (-8.36%)
Mutual labels: scrollview
React Event Components
🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)
Stars: ✭ 271 (-16.1%)
Mutual labels: keyboard
Switch Desktop
⚡️ Keyboard-driven commands to navigate your apps faster
Stars: ✭ 320 (-0.93%)
Mutual labels: keyboard
Markovkeyboard
keyboard layout that changes by markov frequency
Stars: ✭ 307 (-4.95%)
Mutual labels: keyboard
Mongoose Paginate V2
A cursor based custom pagination library for Mongoose with customizable labels.
Stars: ✭ 283 (-12.38%)
Mutual labels: cursor
Azexpandableiconlistview
An expandable/collapsible view component written in Swift.
Stars: ✭ 284 (-12.07%)
Mutual labels: scrollview
React Hotkeys
React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
Stars: ✭ 279 (-13.62%)
Mutual labels: keyboard
Apnumberpad
Full clone of iOS number keyboard with the customizable function button.
Stars: ✭ 298 (-7.74%)
Mutual labels: keyboard
Containercontroller
UI Component. This is a copy swipe-panel from app: Apple Maps, Stocks. Swift version
Stars: ✭ 273 (-15.48%)
Mutual labels: scrollview
Cordova Plugin Native Keyboard
🎹 Add a Slack / WhatsApp - style chat keyboard to your Cordova app!
Stars: ✭ 271 (-16.1%)
Mutual labels: keyboard
Stickyscrollview
Sticky header and footer for android ScrollView.
Stars: ✭ 284 (-12.07%)
Mutual labels: scrollview
Whc keyboardmanager
IOS lightweight keyboard manager, use simple and powerful, the keyboard will never block input controls. iOS平台轻量级的键盘管理器,使用简单功能强大,键盘再也不会挡住输入控件
Stars: ✭ 296 (-8.36%)
Mutual labels: keyboard
Androidfastscroll
Fast scroll for Android RecyclerView and more
Stars: ✭ 316 (-2.17%)
Mutual labels: scrollview
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 slideScrollView
, when you lift your finger, theTextInput
will not get focus.
Installation
npm
$ npm install react-native-input-scroll-view --save
yarn
$ yarn add react-native-input-scroll-view
Usage
import InputScrollView from 'react-native-input-scroll-view';
...
state = {
text: '',
};
render() {
const { text } = this.state;
return (
<InputScrollView>
<TextInput />
<TextInput />
<TextInput value={text}
onChangeText={text => this.setState({ text })}
multiline />
</InputScrollView>
);
}
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:
import InputScrollView from 'react-native-input-scroll-view';
...
const MyComponent = props => (
<View>
<TextInput {...props} />
</View>
);
...
state = {
text: '',
};
render() {
const { text } = this.state;
return (
<InputScrollView>
<MyComponent value={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 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
import InputScrollView from 'react-native-input-scroll-view';
...
state = {
text: '',
textareaHeight: null,
};
render() {
const { text, textareaHeight } = this.state;
return (
<InputScrollView>
<TextInput />
<TextInput />
<TextInput style={{ height: textareaHeight }}
value={text}
onChangeText={text => this.setState({ text })}
onContentSizeChange={this._onContentSizeChange}
multiline />
</InputScrollView>
);
}
_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。 |
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
|
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
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].