React 16 (APSL#173)

* Started to support r16

* First attempt to HOC all the things

* ScrollView working

* Moved to HOC all the components

* Merged with latest branch

* Updated Readme

* Updated Readme

* Removed unused deps

Author: alvaromb

.eslintrc

@@ -93,4 +93,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.47.0
+>=0.47.0

.flowconfig

@@ -5,4 +5,5 @@ AwesomeProjectTests
 index.ios.js
 iOS
 
-.idea/
+.idea/
+.vscode/

.gitignore

@@ -13,6 +13,7 @@ A ScrollView component that handles keyboard appearance and automatically scroll
 </p>
 
 ## Supported versions
+- `v0.3.0` requires `RN>=0.48`
 - `v0.2.0` requires `RN>=0.32.0`.
 - `v0.1.2` requires `RN>=0.27.2` but you should use `0.2.0` in order to make it work with multiple scroll views.
 - `v0.0.7` requires `react-native>=0.25.0`.
@@ -30,10 +31,10 @@ yarn add react-native-keyboard-aware-scroll-view
 ```
 
 ## Usage
-You can use the ``KeyboardAwareScrollView`` or the ``KeyboardAwareListView``
-components. Both accept ``ScrollView`` and ``ListView`` default props and
-implements a custom ``KeyboardAwareMixin`` to handle keyboard appearance.
-The mixin is also available if you want to use it in any other component.
+You can use the `KeyboardAwareScrollView`, the `KeyboardAwareListView` or the `KeyboardAwareFlatList`
+components. They accept `ScrollView`, `ListView` and `FlatList` default props respectively and
+implement a custom high order componente 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:
@@ -59,17 +60,17 @@ In order to scroll to any `TextInput` field, you can use the built-in method `sc
 ```js
 _scrollToInput (reactNode: any) {
   // Add a 'scroll' ref to your ScrollView
-  this.refs.scroll.scrollToFocusedInput(reactNode)
+  this.scroll.props.scrollToFocusedInput(reactNode)
 }
 ```
 
 ```jsx
-<KeyboardAwareScrollView ref='scroll'>
+<KeyboardAwareScrollView innerRef={ref => {this.scroll = ref}}>
   <View>
     <TextInput onFocus={(event: Event) => {
       // `bind` the function if you're using ES6 classes
       this._scrollToInput(ReactNative.findNodeHandle(event.target))
-    }/>
+    } />
   </View>
 </KeyboardAwareScrollView>
 ```
@@ -78,7 +79,7 @@ _scrollToInput (reactNode: any) {
 There's another built-in function that lets you programatically scroll to any position of the scroll view:
 
 ```js
-this.refs.scroll.scrollToPosition(0, 0, true)
+this.scroll.props.scrollToPosition(0, 0)
 ```
 
 ## Register to keyboard events
@@ -104,7 +105,7 @@ But if you want to use feature like `extraHeight`, you need to enable Android Su
 - Set `windowSoftInputMode` to `adjustPan` in `AndroidManifest.xml`.
 - Set `enableOnAndroid` property to `true`.
 
-Android Suppor is not perfect, here is the support list:
+Android Support is not perfect, here is the supported list:
 
 | **Prop** | **Android Support** |
 |----------|-----------------|
@@ -119,10 +120,11 @@ Android Suppor is not perfect, here is the support list:
 
 ## API
 ### Props
-All the `ScrollView`/`ListView` props will be passed.
+All the `ScrollView`/`ListView`/`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. |
 | `enableAutoAutomaticScroll` | `boolean` | When focus in `TextInput` will scroll the position, default is enabled. |
@@ -132,12 +134,33 @@ All the `ScrollView`/`ListView` props will be passed.
 | `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. |
 
+### Using high order component
+Enabling any component to be keyboard-aware is very easy. Take a look at the code of `KeyboardAwareListView`:
+
+```js
+/* @flow */
+
+import { ListView } from 'react-native'
+import listenToKeyboardEvents from './KeyboardAwareHOC'
+
+export default listenToKeyboardEvents(ListView)
+```
+
 ## License
 
 MIT.
+
+## Author
+
+Álvaro Medina Ballester `<amedina at apsl.net>`
+
+Built with 💛 by [APSL](https://github.com/apsl).

README.md

@@ -7,15 +7,16 @@ import * as React from 'react'
 import { ScrollViewProperties, ListViewProperties } from 'react-native'
 
 interface KeyboardAwareProps {
-    /**
+  /**
      * Adds an extra offset that represents the TabBarIOS height.
      *
+     * Default is false
      * @type {boolean}
      * @memberof KeyboardAwareProps
      */
-    viewIsInsideTabBar?: boolean
+  viewIsInsideTabBar?: boolean
 
-    /**
+  /**
      * Coordinates that will be used to reset the scroll when the keyboard hides.
      *
      * @type {{
@@ -24,39 +25,39 @@ interface KeyboardAwareProps {
      *     }}
      * @memberof KeyboardAwareProps
      */
-    resetScrollToCoords?: {
-        x: number,
-        y: number
-    }
+  resetScrollToCoords?: {
+    x: number
+    y: number
+  }
 
-    /**
+  /**
      * Lets the user enable or disable automatic resetScrollToCoords
      *
      * @type {boolean}
      * @memberof KeyboardAwareProps
      */
-    enableResetScrollToCoords?: boolean
+  enableResetScrollToCoords?: boolean
 
-    /**
+  /**
      * When focus in TextInput will scroll the position
      *
      * Default is true
      *
      * @type {boolean}
      * @memberof KeyboardAwareProps
      */
-    enableAutoAutomaticScroll?: boolean
+  enableAutoAutomaticScroll?: boolean
 
-    /**
+  /**
      * Adds an extra offset when focusing the TextInputs.
      *
      * Default is 75
      * @type {number}
      * @memberof KeyboardAwareProps
      */
-    extraHeight?: number
+  extraHeight?: number
 
-    /**
+  /**
      * Adds an extra offset to the keyboard.
      * Useful if you want to stick elements above the keyboard.
      *
@@ -65,26 +66,36 @@ interface KeyboardAwareProps {
      * @type {number}
      * @memberof KeyboardAwareProps
      */
-    extraScrollHeight?: number
+  extraScrollHeight?: number
 
-    /**
+  /**
      * Sets the delay time before scrolling to new position
      *
      * Default is 250
      *
      * @type {number}
      * @memberof KeyboardAwareProps
      */
-    keyboardOpeningTime?: number
+  keyboardOpeningTime?: number
 }
 
-interface KeyboardAwareListViewProps extends KeyboardAwareProps, ListViewProperties {}
-interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProperties {}
+interface KeyboardAwareListViewProps
+  extends KeyboardAwareProps,
+    ListViewProperties {}
+interface KeyboardAwareScrollViewProps
+  extends KeyboardAwareProps,
+    ScrollViewProperties {}
 
 interface KeyboardAwareState {
   keyboardSpace: number
 }
 
 export class KeyboardAwareMixin {}
-export class KeyboardAwareListView extends React.Component<KeyboardAwareListViewProps, KeyboardAwareState> { }
-export class KeyboardAwareScrollView extends React.Component<KeyboardAwareScrollViewProps, KeyboardAwareState> { }
+export class KeyboardAwareListView extends React.Component<
+  KeyboardAwareListViewProps,
+  KeyboardAwareState
+> {}
+export class KeyboardAwareScrollView extends React.Component<
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareState
+> {}

index.d.ts

@@ -1,12 +1,12 @@
 /* @flow */
 
-import KeyboardAwareMixin from './lib/KeyboardAwareMixin'
+import listenToKeyboardEvents from './lib/KeyboardAwareHOC'
 import KeyboardAwareScrollView from './lib/KeyboardAwareScrollView'
 import KeyboardAwareListView from './lib/KeyboardAwareListView'
 import KeyboardAwareFlatList from './lib/KeyboardAwareFlatList'
 
 export {
-  KeyboardAwareMixin,
+  listenToKeyboardEvents,
   KeyboardAwareListView,
   KeyboardAwareFlatList,
   KeyboardAwareScrollView

index.js

@@ -1,66 +1,6 @@
 /* @flow */
 
-import React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import { FlatList, Platform } from 'react-native';
-import KeyboardAwareMixin from './KeyboardAwareMixin';
+import { FlatList } from 'react-native'
+import listenToKeyboardEvents from './KeyboardAwareHOC'
 
-const KeyboardAwareFlatList = createReactClass({
-  propTypes: {
-    viewIsInsideTabBar: PropTypes.bool,
-    resetScrollToCoords: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
-    }),
-    onScroll: PropTypes.func,
-    enableOnAndroid: PropTypes.bool,
-  },
-  mixins: [KeyboardAwareMixin],
-
-  componentWillMount: function () {
-    this.setViewIsInsideTabBar(!!this.props.viewIsInsideTabBar)
-    if (this.props.resetScrollToCoords) {
-      this.setResetScrollToCoords(this.props.resetScrollToCoords)
-    }
-  },
-
-  onScroll: function (e: SyntheticEvent & {nativeEvent: {contentOffset: number}}) {
-    this.handleOnScroll(e)
-    this.props.onScroll && this.props.onScroll(e)
-  },
-
-  render: function () {
-    const {
-      enableOnAndroid,
-      contentContainerStyle,
-    } = this.props
-
-    const {
-      keyboardSpace,
-    } = this.state
-
-    let newContentContainerStyle
-
-    if (Platform.OS === 'android' && enableOnAndroid) {
-      newContentContainerStyle = Object.assign({}, contentContainerStyle)
-      newContentContainerStyle.paddingBottom = (newContentContainerStyle.paddingBottom || 0) + keyboardSpace
-    }
-
-    return (
-      <FlatList
-        ref={this.handleRef}
-        keyboardDismissMode='interactive'
-        contentInset={{bottom: keyboardSpace}}
-        automaticallyAdjustContentInsets={false}
-        showsVerticalScrollIndicator={true}
-        scrollEventThrottle={1}
-        {...this.props}
-        contentContainerStyle={newContentContainerStyle || contentContainerStyle}
-        onScroll={this.onScroll}
-      />
-    )
-  },
-})
-
-export default KeyboardAwareFlatList
+export default listenToKeyboardEvents(FlatList)