Skip to content

Commit

Permalink
Merge branch 'master' into ancestor_check
Browse files Browse the repository at this point in the history
# Conflicts:
#	lib/KeyboardAwareMixin.js
  • Loading branch information
joseph kim committed Jun 28, 2016
2 parents 97fc6a6 + 160974f commit ecbdfd7
Show file tree
Hide file tree
Showing 5 changed files with 246 additions and 20 deletions.
201 changes: 201 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
{
"parser": "babel-eslint",

"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
},

"env": {
"es6": true,
"jasmine": true,
"node": 1,
},

"plugins": [
"react"
],

"globals": {
"__DEV__": true,
"__dirname": false,
"__fbBatchedBridgeConfig": false,
"cancelAnimationFrame": false,
"clearImmediate": true,
"clearInterval": false,
"clearTimeout": false,
"console": false,
"document": false,
"escape": false,
"exports": false,
"fetch": false,
"global": false,
"jest": false,
"Map": true,
"module": false,
"navigator": false,
"process": false,
"Promise": true,
"requestAnimationFrame": true,
"require": false,
"Set": true,
"setImmediate": true,
"setInterval": false,
"setTimeout": false,
"window": false,
"XMLHttpRequest": false,
"pit": false,
"FormData": true,
},

"rules": {
"comma-dangle": 0,
"no-cond-assign": 1,
"no-console": 0,
"no-constant-condition": 0,
"no-control-regex": 1,
"no-debugger": 1,
"no-dupe-keys": 1,
"no-empty": 0,
"no-empty-character-class": 1,
"no-ex-assign": 1,
"no-extra-boolean-cast": 1,
"no-extra-parens": 0,
"no-extra-semi": 1,
"no-func-assign": 1,
"no-inner-declarations": 0,
"no-invalid-regexp": 1,
"no-negated-in-lhs": 1,
"no-obj-calls": 1,
"no-regex-spaces": 1,
"no-reserved-keys": 0,
"no-sparse-arrays": 1,
"no-unreachable": 1,
"use-isnan": 1,
"valid-jsdoc": 0,
"valid-typeof": 1,

"block-scoped-var": 0,
"complexity": 0,
"consistent-return": 0,
"curly": 1,
"default-case": 0,
"dot-notation": 1,
"eqeqeq": 1,
"guard-for-in": 0,
"no-alert": 1,
"no-caller": 1,
"no-div-regex": 1,
"no-else-return": 0,
"no-labels": 1,
"no-eq-null": 0,
"no-eval": 1,
"no-extend-native": 1,
"no-extra-bind": 1,
"no-fallthrough": 1,
"no-floating-decimal": 1,
"no-implied-eval": 1,
"no-iterator": 1,
"no-lone-blocks": 1,
"no-loop-func": 0,
"no-multi-str": 0,
"no-native-reassign": 0,
"no-new": 1,
"no-new-func": 1,
"no-new-wrappers": 1,
"no-octal": 1,
"no-octal-escape": 1,
"no-proto": 1,
"no-redeclare": 0,
"no-return-assign": 1,
"no-script-url": 1,
"no-self-compare": 1,
"no-sequences": 1,
"no-unused-expressions": 0,
"no-void": 1,
"no-warning-comments": 0,
"no-with": 1,
"radix": 1,
"vars-on-top": 0,
"wrap-iife": 0,
"yoda": 1,

"strict": 0,

"no-catch-shadow": 1,
"no-delete-var": 1,
"no-label-var": 1,
"no-shadow": 1,
"no-shadow-restricted-names": 1,
"no-undef": 2,
"no-undefined": 0,
"no-undef-init": 1,
"no-unused-vars": [1, {"vars": "all", "args": "none"}],
"no-use-before-define": 0,
"handle-callback-err": 1,
"no-mixed-requires": 1,
"no-new-require": 1,
"no-path-concat": 1,
"no-process-exit": 0,
"no-restricted-modules": 1,
"no-sync": 0,

"key-spacing": 0,
"comma-spacing": 0,
"no-multi-spaces": 0,
"brace-style": 0,
"camelcase": 0,
"consistent-this": [1, "self"],
"eol-last": 1,
"func-names": 0,
"func-style": 0,
"new-cap": 0,
"new-parens": 1,
"no-nested-ternary": 0,
"no-array-constructor": 1,
"no-lonely-if": 0,
"no-new-object": 1,
"no-spaced-func": 1,
"semi-spacing": 1,
"no-ternary": 0,
"no-trailing-spaces": 1,
"no-underscore-dangle": 0,
"no-mixed-spaces-and-tabs": 1,
"quotes": [1, "single", "avoid-escape"],
"quote-props": 0,
"semi": 0,
"sort-vars": 0,
"keyword-spacing": 1,
"space-in-brackets": 0,
"space-in-parens": 0,
"space-infix-ops": 1,
"space-unary-ops": [1, { "words": true, "nonwords": false }],
"max-nested-callbacks": 0,
"one-var": 0,
"wrap-regex": 0,

"max-depth": 0,
"max-len": 0,
"max-params": 0,
"max-statements": 0,
"no-bitwise": 1,
"no-plusplus": 0,

"react/display-name": 0,
"react/jsx-boolean-value": 0,
"react/jsx-quotes": [1, "single", "avoid-escape"],
"react/jsx-no-undef": 1,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 0,
"react/jsx-uses-vars": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 0,
"react/no-unknown-property": 0,
"react/prop-types": 0,
"react/react-in-jsx-scope": 0,
"react/self-closing-comp": 1,
"react/wrap-multilines": 0
}
}
3 changes: 3 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
language: node_js
node_js:
- 6.2.0
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
# react-native-keyboard-aware-scroll-view

<img src="https://travis-ci.org/APSL/react-native-keyboard-aware-scroll-view.svg?branch=master" />

A ScrollView component that handles keyboard appearance and automatically scrolls to focused `TextInput`.

<p align="center">
<img src="https://raw.githubusercontent.com/wiki/APSL/react-native-keyboard-aware-scroll-view/kasv.gif" alt="Scroll demo" width="400">
</p>

## Supported versions
Use `react-native>=0.25.0` for `v0.0.7` & up and `v0.0.6` for older RN versions.
`v0.1.2` requires `RN>=0.27.2`
`v0.0.7` requires `react-native>=0.25.0`
use `v0.0.6` for older RN versions.

## Installation
Installation can be done through ``npm``:
Expand Down Expand Up @@ -89,6 +94,7 @@ All the `ScrollView`/`ListView` props will be passed.
|----------|----------|-----------------|
| `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. |
| `enableAutoAutomaticScroll` | `boolean` | When focus in TextInput will scroll the position, default is enabled. |
## License
Expand Down
44 changes: 27 additions & 17 deletions lib/KeyboardAwareMixin.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* @flow */

import ReactNative, { TextInput, DeviceEventEmitter, UIManager } from 'react-native'
import { PropTypes } from 'react'
import ReactNative, { TextInput, Keyboard } from 'react-native'
import TimerMixin from 'react-timer-mixin'

const _KAM_DEFAULT_TAB_BAR_HEIGHT = 49
Expand All @@ -9,6 +10,17 @@ const _KAM_EXTRA_HEIGHT = 75

const KeyboardAwareMixin = {
mixins: [TimerMixin],
propTypes: {
enableAutoAutomaticScroll: PropTypes.bool,
extraHeight: PropTypes.number,
},

getDefaultProps: function () {
return {
enableAutoAutomaticScroll: true,
extraHeight: _KAM_EXTRA_HEIGHT,
}
},

setViewIsInsideTabBar: function (viewIsInsideTabBar: bool) {
this.viewIsInsideTabBar = viewIsInsideTabBar
Expand All @@ -35,19 +47,17 @@ const KeyboardAwareMixin = {
keyboardSpace: keyboardSpace,
})
// Automatically scroll to focused TextInput
const currentlyFocusedField = TextInput.State.currentlyFocusedField()
if (!currentlyFocusedField) {
return
}
UIManager.viewIsAncestorOf(
currentlyFocusedField,
this.getScrollHandle().getScrollResponder().getInnerViewNode(),
(isAncestor) => {
if (isAncestor) {
this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
}
if (this.props.enableAutoAutomaticScroll) {
const currentlyFocusedField = TextInput.State.currentlyFocusedField()
if (!currentlyFocusedField) {
return
}
try {
this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
} catch (e) {

}
)
}
},

resetKeyboardSpace: function () {
Expand All @@ -63,8 +73,8 @@ const KeyboardAwareMixin = {

componentDidMount: function () {
// Keyboard events
this.keyboardWillShowEvent = DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
this.keyboardWillHideEvent = DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
this.keyboardWillShowEvent = Keyboard.addListener('keyboardWillShow', this.updateKeyboardSpace)
this.keyboardWillHideEvent = Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace)
},

componentWillUnmount: function () {
Expand All @@ -80,7 +90,7 @@ const KeyboardAwareMixin = {
/**
* @param extraHeight: takes an extra height in consideration.
*/
scrollToFocusedInput: function (reactNode: Object, extraHeight: number = _KAM_EXTRA_HEIGHT) {
scrollToFocusedInput: function (reactNode: Object, extraHeight: number = this.props.extraHeight) {
const scrollView = this.refs._rnkasv_keyboardView.getScrollResponder()
this.setTimeout(() => {
scrollView.scrollResponderScrollNativeHandleToKeyboard(
Expand All @@ -89,7 +99,7 @@ const KeyboardAwareMixin = {
}, _KAM_KEYBOARD_OPENING_TIME)
},

scrollToFocusedInputWithNodeHandle: function (nodeID: number, extraHeight: number = _KAM_EXTRA_HEIGHT) {
scrollToFocusedInputWithNodeHandle: function (nodeID: number, extraHeight: number = this.props.extraHeight) {
const reactNode = ReactNative.findNodeHandle(nodeID)
this.scrollToFocusedInput(reactNode, extraHeight)
},
Expand Down
10 changes: 8 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "react-native-keyboard-aware-scroll-view",
"version": "0.1.0",
"version": "0.1.2",
"description": "A React Native ScrollView component that resizes when the keyboard appears.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"lint": "eslint lib",
"test": "npm run lint"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -34,5 +35,10 @@
"homepage": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#readme",
"dependencies": {
"react-timer-mixin": "^0.13.3"
},
"devDependencies": {
"babel-eslint": "^6.0.4",
"eslint": "^2.12.0",
"eslint-plugin-react": "^5.1.1"
}
}

0 comments on commit ecbdfd7

Please sign in to comment.