Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

insetOnly option #403

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

insetOnly option #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
39119bb
separate option for disabling content inset
andrey-tsaplin Nov 14, 2019
3c5fc7c
insetOnly option
andrey-tsaplin Nov 14, 2019
57be85a
lint fix and version bump
andrey-tsaplin Nov 14, 2019
48f5067
fixed autoscroll behavior
andrey-tsaplin Nov 14, 2019
31e7d8f
fixed README
andrey-tsaplin Nov 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ Android Support is not perfect, here is the supported list:
| `viewIsInsideTabBar` | Yes |
| `resetScrollToCoords` | Yes |
| `enableAutomaticScroll` | Yes |
| `insetOnly` | Yes |
| `extraHeight` | Yes |
| `extraScrollHeight` | Yes |
| `enableResetScrollToCoords` | Yes |
Expand All @@ -136,17 +137,18 @@ Android Support is not perfect, here is the supported list:

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 `TextInput`s. |
| `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 |
| **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. |
| `insetOnly` | `boolean` | Only adds content inset for the keyboard and disables autoScroll. iOS will fit TextInput to the screen if it was visible before keyboard open. Default is false. |
| `extraHeight` | `number` | Adds an extra offset when focusing the `TextInput`s. |
| `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

Expand Down
20 changes: 13 additions & 7 deletions lib/KeyboardAwareHOC.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export type KeyboardAwareHOCProps = {
},
enableResetScrollToCoords?: boolean,
enableAutomaticScroll?: boolean,
insetOnly?: boolean,
extraHeight?: number,
extraScrollHeight?: number,
keyboardOpeningTime?: number,
Expand Down Expand Up @@ -94,6 +95,7 @@ export type KeyboardAwareHOCOptions = ?{
enableOnAndroid: boolean,
contentContainerStyle: ?Object,
enableAutomaticScroll: boolean,
insetOnly: boolean,
extraHeight: number,
extraScrollHeight: number,
enableResetScrollToCoords: boolean,
Expand All @@ -115,6 +117,7 @@ const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = {
enableOnAndroid: false,
contentContainerStyle: undefined,
enableAutomaticScroll: true,
insetOnly: false,
extraHeight: _KAM_EXTRA_HEIGHT,
extraScrollHeight: 0,
enableResetScrollToCoords: true,
Expand Down Expand Up @@ -169,6 +172,7 @@ function KeyboardAwareHOC(
}),
enableResetScrollToCoords: PropTypes.bool,
enableAutomaticScroll: PropTypes.bool,
insetOnly: PropTypes.bool,
extraHeight: PropTypes.number,
extraScrollHeight: PropTypes.number,
keyboardOpeningTime: PropTypes.number,
Expand All @@ -186,6 +190,7 @@ function KeyboardAwareHOC(
// HOC options are used to init default props, so that these options can be overriden with component props
static defaultProps = {
enableAutomaticScroll: hocOptions.enableAutomaticScroll,
insetOnly: hocOptions.insetOnly,
extraHeight: hocOptions.extraHeight,
extraScrollHeight: hocOptions.extraScrollHeight,
enableResetScrollToCoords: hocOptions.enableResetScrollToCoords,
Expand Down Expand Up @@ -361,14 +366,15 @@ function KeyboardAwareHOC(

// Keyboard actions
_updateKeyboardSpace = (frames: Object) => {
let keyboardSpace: number =
frames.endCoordinates.height + this.props.extraScrollHeight
if (this.props.viewIsInsideTabBar) {
keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT
}
this.setState({keyboardSpace})

// Automatically scroll to focused TextInput
if (this.props.enableAutomaticScroll) {
let keyboardSpace: number =
frames.endCoordinates.height + this.props.extraScrollHeight
if (this.props.viewIsInsideTabBar) {
keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT
}
this.setState({ keyboardSpace })
if (this.props.enableAutomaticScroll && !this.props.insetOnly) {
const currentlyFocusedField = TextInput.State.currentlyFocusedField()
const responder = this.getScrollResponder()
if (!currentlyFocusedField || !responder) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-keyboard-aware-scroll-view",
"version": "0.9.1",
"version": "0.9.2",
"description": "A React Native ScrollView component that resizes when the keyboard appears.",
"main": "index.js",
"types": "index.d.ts",
Expand Down