Gathering detailed insights and metrics for react-native-smart-scroll-view
Installations
npm install react-native-smart-scroll-viewDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
4.0.0
NPM Version
3.10.8
Releases
Unable to fetch releases
Contributors
5
Unable to fetch Contributors
Languages
3
JavaScript
Objective-C
Java
JavaScript (76.99%)
Objective-C (15.77%)
Java (7.25%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
jrans
Download Statistics
Total Downloads
32,799
Last Day
4
Last Week
42
Last Month
515
Last Year
1,209
GitHub Statistics
153 Stars
71 Commits
31 Forks
5 Watching
4 Branches
5 Contributors
Maintainers
2
Package Meta Information
Latest Version
1.3.7
Package Id
react-native-smart-scroll-view@1.3.7
Size
2.24 MB
NPM Version
3.10.8
Node Version
4.0.0
Total Downloads
Cumulative downloads
Total Downloads
32,799
Last day
-71.4%
4
Compared to previous day
Last week
-77.9%
42
Compared to previous week
Last month
625.4%
515
Compared to previous month
Last year
-22.3%
1,209
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
Versions
react-native-smart-scroll-view
A pure JS React Native Component for IOS.
A wrapper around react-native ScrollView to handle keyboard events and auto adjust input fields to be visible above keyboard on focus.
Takes in your components and recursively searches for any component (i.e. TextInput) that is given smartScrollOptions as a prop. Further props are added to these components to ensure they are always visible above the keyboard and within the ScrollView when focused.
There is also the option to autofocus the next component with smartScrollOptions on TextInput submission, and the ability to autofocus any component by setting the smartScrollOptionsprops appropriately and specifying the index of the component (more info below) .
Great for use with forms which have multiple TextInput fields!
Getting Started
Installation
1$ npm i react-native-smart-scroll-view --save
Properties
In wrapping around the ScrollView and using the TextInput to control keyboard we have used their native properties to create our functionality. You can still add most props to TextInputs and we will allow you to pass some props to the ScrollView but do so with care.
SmartScrollView Props
| Prop | Default | Type | Description |
|---|---|---|---|
| forceFocusField | undefined | number or string | Force scroll the view to the TextInput field at the specified index (smart children indexed in order from 0) or 'scrollRef' you have given to your smart child (see smartScrollOptions below) |
| scrollContainerStyle | {flex: 1} | number | Style options for the View that wraps the ScrollView, the ScrollView will take up all available space. |
| scrollPadding | 5 | number | Padding between the top of the keyboard/ScrollView and the focused TextInput field |
| contentContainerStyle | {flex: 1} | number | Set to the ScrollView contentContainerStyle prop |
| zoomScale | 1 | number | Set to the ScrollView zoomScale prop |
| showsVerticalScrollIndicator | true | bool | Set to the ScrollView showsVerticalScrollIndicator prop |
| contentInset | {top: 0, left: 0, bottom: 0, right: 0} | object | Set to the ScrollView contentInset prop |
| onScroll | () => {} | func | Set to the ScrollView onScroll function. It will be called alongside our own |
| onRefFocus | ()=>{} | func | Gives back the 'ref' of the node whenever a smart component is focused |
Smart Component Props
Smart components can be the native 'TextInput' s, other component like 'View' s or your own custom components.
For each component that you would like to use, provide the prop smartScrollOptions alongside the normal props. Beware* some props of native components like TextInputs may be modified by the Smart Scroll View (see below).
smartScrollOptions - An object with the following keys:
| Key | Type | Description |
|---|---|---|
| type | enum (text,custom) | For type 'text' the 'moveToNext' and 'onSubmitEditing' options can be set (see below). For type 'custom' further scrolling must be done by forcing the index |
| moveToNext | bool | If true, the next TextInput field will be focused when the submit button on the keyboard is pressed. Should be set to false or omitted for the last input field on the page. Warning this will not work if keyboardType for the TextInput is set to 'number-pad', 'decimal-pad', 'phone-pad' or 'numeric' as they do not have a return key |
| onSubmitEditing(next) | func | Optional function that takes a callback. When invoked, the callback will focus the next TextInput field. If no function is specified the next TextInput field is focused. Example: (next) => { if (condition) { next() } } |
| scrollRef | string | To be used in conjunction with the 'forceFocusField' prop of the 'SmartScrollView'. Use 'scrollRef' to reference a particular component which can then be set to forceFocusField to have control where the focus is |
How We Modify TextInput Props
For any component which has 'smartScrollOptions.type = text', it is inferred that it is either a 'TextInput' component or contains a 'TextInput' component. The props of the enclosing 'TextInput' component are modified in the following way.
- We attach our own
onFocusfunction and will call yours alongside. - If
moveToNextinsmartScrollOptionsis true:- The
onSubmitEditingis replaced with our own. See above. blurOnSubmitis set to false
- The
Example Usage
Code for the above gif is found here
Here is another example of the smart-scroll-view in action.
To run the code yourself and play around, open and run the Xcode project.
1open SuperScrollingFormExample/ios/SuperScrollingFormExample.xcodeproj
TODO
- Allow for more types other than text input to have smart scroll functionality.
- i.e. a customisable picker component that can be used to replace keyboard to allow the user to select a value from a picker.
- Any image, button, slider....
- Allow for header/banner above keyboard.
- Better animations....
- Your issues/suggestions!
Feel free to comment, question, create issues, submit PRs... to make this view even smarter
No vulnerabilities found.
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: SuperScrollingFormExample/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 7/17 approved changesets -- score normalized to 4
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
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Score
3.4
/10
Last Scanned on 2025-01-27
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