HOC options API

Author: slorber

lib/KeyboardAwareHOC.js

@@ -87,11 +87,63 @@ export type ScrollIntoViewOptions = ?{
   ) => ScrollPosition
 }
 
+
+
+
+
+export type KeyboardAwareHOCOptions = ?{
+  enableOnAndroid: boolean,
+  contentContainerStyle: ?Object,
+  enableAutomaticScroll: boolean,
+  extraHeight: number,
+  extraScrollHeight: number,
+  enableResetScrollToCoords: boolean,
+  keyboardOpeningTime: number,
+  viewIsInsideTabBar: boolean,
+  refPropName: string,
+  extractNativeRef: Function
+}
+
 function getDisplayName(WrappedComponent: React$Component) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component'
 }
 
-function listenToKeyboardEvents(ScrollableComponent: React$Component) {
+const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = {
+  enableOnAndroid: false,
+  contentContainerStyle: undefined,
+  enableAutomaticScroll: true,
+  extraHeight: _KAM_EXTRA_HEIGHT,
+  extraScrollHeight: 0,
+  enableResetScrollToCoords: true,
+  keyboardOpeningTime: _KAM_KEYBOARD_OPENING_TIME,
+  viewIsInsideTabBar: false,
+
+  // The ref prop name that will be passed to the wrapped component to obtain a ref
+  // If your ScrollView is already wrapped, maybe the wrapper permit to get a ref
+  // For example, with glamorous-native ScrollView, you should use "innerRef"
+  refPropName: "ref",
+  // Sometimes the ref you get is a ref to a wrapped view (ex: Animated.ScrollView)
+  // We need access to the imperative API of a real native ScrollView so we need extraction logic
+  extractNativeRef: (ref: Object) => {
+    // getNode() permit to support Animated.ScrollView automatically
+    // see https://github.com/facebook/react-native/issues/19650
+    // see https://stackoverflow.com/questions/42051368/scrollto-is-undefined-on-animated-scrollview/48786374
+    if ( ref.getNode ) {
+      return ref.getNode()
+    }
+    else {
+      return ref
+    }
+  },
+}
+
+function KeyboardAwareHOC(ScrollableComponent: React$Component, userOptions: KeyboardAwareHOCOptions) {
+
+  const options: KeyboardAwareHOCOptions = {
+    ...ScrollIntoViewDefaultOptions,
+    ...userOptions,
+  }
+
   return class extends React.Component<
     KeyboardAwareHOCProps,
     KeyboardAwareHOCState
@@ -118,21 +170,26 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
       extraHeight: PropTypes.number,
       extraScrollHeight: PropTypes.number,
       keyboardOpeningTime: PropTypes.number,
-      onScroll: PropTypes.func,
+      onScroll: PropTypes.oneOfType([
+        PropTypes.func, // Normal listener
+        PropTypes.object, // Animated.event listener
+      ]),
       update: PropTypes.func,
       contentContainerStyle: PropTypes.any,
       enableOnAndroid: PropTypes.bool,
       innerRef: PropTypes.func,
       ...keyboardEventPropTypes
     }
 
+    // HOC options are used to init default props, so that these options can be overriden with component props
     static defaultProps = {
-      enableAutomaticScroll: true,
-      extraHeight: _KAM_EXTRA_HEIGHT,
-      extraScrollHeight: 0,
-      enableResetScrollToCoords: true,
-      keyboardOpeningTime: _KAM_KEYBOARD_OPENING_TIME,
-      viewIsInsideTabBar: false
+      enableAutomaticScroll: options.enableAutomaticScroll,
+      extraHeight: options.extraHeight,
+      extraScrollHeight: options.extraScrollHeight,
+      enableResetScrollToCoords: options.enableResetScrollToCoords,
+      keyboardOpeningTime: options.keyboardOpeningTime,
+      viewIsInsideTabBar: options.viewIsInsideTabBar,
+      enableOnAndroid: options.enableOnAndroid,
     }
 
     constructor(props: KeyboardAwareHOCProps) {
@@ -239,11 +296,11 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
         }
         const responder = this.getScrollResponder()
         responder &&
-          responder.scrollResponderScrollNativeHandleToKeyboard(
-            reactNode,
-            extraHeight,
-            true
-          )
+        responder.scrollResponderScrollNativeHandleToKeyboard(
+          reactNode,
+          extraHeight,
+          true
+        )
       }, keyboardOpeningTime)
     }
 
@@ -291,13 +348,13 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
 
     // 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 })
         const currentlyFocusedField = TextInput.State.currentlyFocusedField()
         const responder = this.getScrollResponder()
         if (!currentlyFocusedField || !responder) {
@@ -343,7 +400,7 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
                     ) {
                       this.scrollForExtraHeightOnAndroid(
                         totalExtraHeight -
-                          (keyboardPosition - textInputBottomPosition)
+                        (keyboardPosition - textInputBottomPosition)
                       )
                     }
                   }
@@ -410,11 +467,9 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
     }
 
     _handleRef = (ref: React.Component<*>) => {
-      if (ref) {
-        this._rnkasv_keyboardView = ref.getNode ? ref.getNode() : ref
-        if (this.props.innerRef) {
-          this.props.innerRef(this._rnkasv_keyboardView)
-        }
+      this._rnkasv_keyboardView = ref ? options.extractNativeRef(ref) : ref
+      if (this.props.innerRef) {
+        this.props.innerRef(this._rnkasv_keyboardView)
       }
     }
 
@@ -437,13 +492,14 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
       if (Platform.OS === 'android' && enableOnAndroid) {
         newContentContainerStyle = [].concat(contentContainerStyle).concat({
           paddingBottom:
-            ((contentContainerStyle || {}).paddingBottom || 0) +
-            this.state.keyboardSpace
+          ((contentContainerStyle || {}).paddingBottom || 0) +
+          this.state.keyboardSpace
         })
       }
+      const refProps = { [options.refPropName]: this._handleRef }
       return (
         <ScrollableComponent
-          ref={this._handleRef}
+          {...refProps}
           keyboardDismissMode='interactive'
           contentInset={{ bottom: this.state.keyboardSpace }}
           automaticallyAdjustContentInsets={false}
@@ -470,4 +526,16 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
   }
 }
 
+// Allow to pass options, without breaking change, and curried for composition
+// listenToKeyboardEvents(ScrollView);
+// listenToKeyboardEvents(options)(Comp);
+const listenToKeyboardEvents = (configOrComp: any) => {
+  if ( typeof configOrComp === "object" ) {
+    return (Comp: Function) => KeyboardAwareHOC(Comp,configOrComp)
+  }
+  else {
+    return KeyboardAwareHOC(configOrComp)
+  }
+}
+
 export default listenToKeyboardEvents