React-native-keyboard-aware-scroll-view: children not rendering anything after upgrading to RN 0.63.0

[bneigher]

After upgrading, it seems that this component may have broken. Does anyone else see this happening?

[nvdnvd00]

the same issue with me

[tamirrab]

Same here

[harry503]

It's happening with me too. Does anyone has any solution?

[tankers746]

This change to ScrollView https://github.com/facebook/react-native/commit/d2f314af75b63443db23e131aaf93c2d064e4f44

Trips up the listenToKeyboardEvents function in KeyboardAwareHOC.js

A workaround is to create your own KeyboardAwareScrollView by wrapping ScrollView in the listenToKeyboardEvents function.

import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';
import { ScrollView } from 'react-native';

const KeyboardAwareScrollView = listenToKeyboardEvents((props) => <ScrollView {...props} />);

[kesha-antonov]

I created my own simple component as a replacement:

import React from 'react'
import {
  ScrollView,
  KeyboardAvoidingView,
} from 'react-native'
import PropTypes from 'prop-types'

function KeyboardAwareScrollView (props) {
  const {
    behavior,
    children,
    ...rest
  } = props

  return (
    <KeyboardAvoidingView behavior={behavior}>
      <ScrollView
        keyboardShouldPersistTaps='handled'
        {...rest}
      >
        {children}
      </ScrollView>
    </KeyboardAvoidingView>
  )
}

KeyboardAwareScrollView.propTypes = {
  behavior: PropTypes.string.isRequired,
  children: PropTypes.any.isRequired,
}

KeyboardAwareScrollView.defaultProps = {
  behavior: 'position',
}

export default KeyboardAwareScrollView

[ricmatsui]

Using [email protected], it seems like type of ScrollView is object which is conflicting with the listenToKeyboardEvents(options)(Comp) version of listenToKeyboardEvents. It seems like it's returning the function (Comp) => KeyboardAwareHOC(Comp, configOrComp) even when called as listenToKeyboardEvents(ScrollView), which triggers the React error:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Using a custom build with the options version of the function removed fixes the issue for me:

diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js
index c6e1469..496068b 100644
--- a/lib/KeyboardAwareHOC.js
+++ b/lib/KeyboardAwareHOC.js
@@ -541,11 +541,7 @@ function KeyboardAwareHOC(
 // listenToKeyboardEvents(ScrollView);
 // listenToKeyboardEvents(options)(Comp);
 const listenToKeyboardEvents = (configOrComp: any) => {
-  if (typeof configOrComp === 'object') {
-    return (Comp: Function) => KeyboardAwareHOC(Comp, configOrComp)
-  } else {
-    return KeyboardAwareHOC(configOrComp)
-  }
+  return KeyboardAwareHOC(configOrComp)
 }

 export default listenToKeyboardEvents

[Esxiel]

I sent a different pull request for people who still want the HOC to be usable with configs, but I'm not sure if the maintainer will look at them anytime soon. Also, this naive fix is assuming that only ScrollViews are recognized as objects.

- const listenToKeyboardEvents = (configOrComp: any) => {
-   if (typeof configOrComp === 'object') {
+ const listenToKeyboardEvents = (configOrComp: React.ReactElement | KeyboardAwareHOCProps) => {
+   if(configOrComp?.displayName === "ScrollView") {
+     return KeyboardAwareHOC(configOrComp)
+   }
+   else if (typeof configOrComp === 'object') {

[suupham2506]

Simply, I use KeyboardAvoidingView and ScrollView. Working perfectly.

[codler]

React-native 0.63.0 have been released and it has still issue

[codler]

I have forked the repo to fix this issue.
```
npm i @codler/react-native-keyboard-aware-scroll-view

[bneigher]

@rborn can you tag a new version? npm is installing an older version still

[rborn]

@bneigher don't have yet npm rights :) working on it, will let you know

[bneigher]

@rborn you can still make the tag and version in github, and npm should be able to recognize the new code.

[bneigher]

but for now I can hardcode github / master in my package.json

[rborn]

@bneigher tag created, I talked to the owner of the package and he'll push to npm when he has a little time :)

[CyrusZei]

well, since this repo is dying, react-native has already solved this problem.

KeyboardAvoidingView and it is really easy to use.

import React from 'react';
import { 
    ScrollView,
    KeyboardAvoidingView,
    TextInput, StyleSheet,
    Text,
    Platform,
    Button,
    Keyboard
} from 'react-native';

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <ScrollView keyboardShouldPersistTaps="handled">
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: {
    fontSize: 36,
    marginBottom: 48
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36
  },
  btnContainer: {
    backgroundColor: "white",
    marginTop: 12
  }
});

export default KeyboardAvoidingComponent;

that is all you need to add and it will fix it.

[export-mike]

@codler thanks for publishing the fork I tried the options from @CyrusZei and @kesha-antonov

And found they both resulted in strange whitespace being added to android on my forms and on ios I found pressing next on the keyboard didn't always scroll down to the next input. especially on the last input in a form

Using the fork was the best option for me, as it resulted in making no changes to the existing forms in my app

[BenoitFroment]

@codler Thanks too

[wilmerjpg]

Thanks @codler !