Gathering detailed insights and metrics for @mtourj/react-native-keyboard-aware-scroll-view
Gathering detailed insights and metrics for @mtourj/react-native-keyboard-aware-scroll-view
Installations
npm install @mtourj/react-native-keyboard-aware-scroll-viewReleases
Unable to fetch releases
Developer
mtourj
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
18.12.1
NPM Version
9.2.0
Statistics
1 Stars
187 Commits
1 Forks
1 Watching
14 Branches
1 Contributors
Updated on 26 Sept 2023
Languages
JavaScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
11,775
Last day
-75%
5
Compared to previous day
Last week
267.1%
290
Compared to previous week
Last month
37.3%
567
Compared to previous month
Last year
7.9%
4,925
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
Versions
react-native-keyboard-aware-scroll-view
This fork was made to fix an issue where keyboardWillShow and keyboardDidShowEvents fired alongisde keyboardWillHide incorrectly and caused inaccurate scrolling when dismissing the keyboard. This implements a workaround that avoids that.
A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
Supported versions
v0.4.0requiresRN>=0.48v0.2.0requiresRN>=0.32.0.v0.1.2requiresRN>=0.27.2but you should use0.2.0in order to make it work with multiple scroll views.v0.0.7requiresreact-native>=0.25.0.- Use
v0.0.6for older RN versions.
Installation
Installation can be done through npm or yarn:
1npm i @mtourj/react-native-keyboard-aware-scroll-view --save
1yarn add @mtourj/react-native-keyboard-aware-scroll-view
Usage
You can use the KeyboardAwareScrollView, KeyboardAwareSectionList or the KeyboardAwareFlatList
components. They accept ScrollView, SectionList and FlatList default props respectively and
implement a custom high order component called KeyboardAwareHOC to handle keyboard appearance.
The high order component is also available if you want to use it in any other component.
Import react-native-keyboard-aware-scroll-view and wrap your content inside
it:
1import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
1<KeyboardAwareScrollView> 2 <View> 3 <TextInput /> 4 </View> 5</KeyboardAwareScrollView>
Auto-scroll in TextInput fields
As of v0.1.0, the component auto scrolls to the focused TextInput 😎. For versions v0.0.7 and older you can do the following.
Programatically scroll to any TextInput
In order to scroll to any TextInput field, you can use the built-in method scrollToFocusedInput. Example:
1_scrollToInput (reactNode: any) { 2 // Add a 'scroll' ref to your ScrollView 3 this.scroll.props.scrollToFocusedInput(reactNode) 4}
1<KeyboardAwareScrollView 2 innerRef={ref => { 3 this.scroll = ref 4 }}> 5 <View> 6 <TextInput 7 onFocus={(event: Event) => { 8 // `bind` the function if you're using ES6 classes 9 this._scrollToInput(ReactNative.findNodeHandle(event.target)) 10 }} 11 /> 12 </View> 13</KeyboardAwareScrollView>
Programatically scroll to any position
There's another built-in function that lets you programatically scroll to any position of the scroll view:
1this.scroll.props.scrollToPosition(0, 0)
Register to keyboard events
You can register to ScrollViewResponder events onKeyboardWillShow and onKeyboardWillHide:
1<KeyboardAwareScrollView 2 onKeyboardWillShow={(frames: Object) => { 3 console.log('Keyboard event', frames) 4 }}> 5 <View> 6 <TextInput /> 7 </View> 8</KeyboardAwareScrollView>
Android Support
First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml. Check here.
But if you want to use feature like extraHeight, you need to enable Android Support with the following steps:
- Make sure you are using react-native
0.46or above. - Set
windowSoftInputModetoadjustPaninAndroidManifest.xml. - Set
enableOnAndroidproperty totrue.
Android Support is not perfect, here is the supported list:
| Prop | Android Support |
|---|---|
viewIsInsideTabBar | Yes |
resetScrollToCoords | Yes |
enableAutomaticScroll | Yes |
extraHeight | Yes |
extraScrollHeight | Yes |
enableResetScrollToCoords | Yes |
keyboardOpeningTime | No |
API
Props
All the ScrollView/FlatList props will be passed.
| Prop | Type | Description |
|---|---|---|
innerRef | Function | Catch the reference of the component. |
viewIsInsideTabBar | boolean | Adds an extra offset that represents the TabBarIOS height. |
resetScrollToCoords | Object: {x: number, y: number} | Coordinates that will be used to reset the scroll when the keyboard hides. |
enableAutomaticScroll | boolean | When focus in TextInput will scroll the position, default is enabled. |
extraHeight | number | Adds an extra offset when focusing the TextInputs. |
extraScrollHeight | number | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |
enableResetScrollToCoords | boolean | Lets the user enable or disable automatic resetScrollToCoords. |
keyboardOpeningTime | number | Sets the delay time before scrolling to new position, default is 250 |
enableOnAndroid | boolean | Enable Android Support |
Methods
Use innerRef to get the component reference and use this.scrollRef.props to access these methods.
| Method | Parameter | Description |
|---|---|---|
getScrollResponder | void | Get ScrollResponder |
scrollToPosition | x: number, y: number, animated: bool = true | Scroll to specific position with or without animation. |
scrollToEnd | animated?: bool = true | Scroll to end with or without animation. |
scrollIntoView | element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } } | Scrolls an element inside a KeyboardAwareScrollView into view. |
Using high order component
Enabling any component to be keyboard-aware is very easy. Take a look at the code of KeyboardAwareFlatList:
1/* @flow */ 2 3import { FlatList } from 'react-native' 4import listenToKeyboardEvents from './KeyboardAwareHOC' 5 6export default listenToKeyboardEvents(FlatList)
The HOC can also be configured. Sometimes it's more convenient to provide a static config than configuring the behavior with props. This HOC config can be overriden with props.
1/* @flow */ 2 3import { FlatList } from 'react-native' 4import listenToKeyboardEvents from './KeyboardAwareHOC' 5 6const config = { 7 enableOnAndroid: true, 8 enableAutomaticScroll: true 9} 10 11export default listenToKeyboardEvents(config)(FlatList)
The available config options are:
1{ 2 enableOnAndroid: boolean, 3 contentContainerStyle: ?Object, 4 enableAutomaticScroll: boolean, 5 extraHeight: number, 6 extraScrollHeight: number, 7 enableResetScrollToCoords: boolean, 8 keyboardOpeningTime: number, 9 viewIsInsideTabBar: boolean, 10 refPropName: string, 11 extractNativeRef: Function 12}
License
MIT.
Author
Álvaro Medina Ballester <amedina at apsl.net>
Built with 💛 by APSL.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
14 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Score
1.7
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More