React-native-keyboard-aware-scroll-view: Android support?

[cmmouritsen]

Should this work for Android? I was having an issue with a view in iOS and Android and I put this component in place. It seemed to fix the iOS version, but the Android version still behaves the same (the keyboard covers the content in the ScrollView).

[alvaromb]

Hello @cmmouritsen!

Yes, it should work for Android as long as the keyboard events are registered but I think that those events are not yet supported: https://github.com/facebook/react-native/issues/3468

Have you tried to use KeyboardDidShow and KeyboardDidHide?

[cmmouritsen]

Just changing the events to keyboardDidShow and keyboardDidHide didn't seem
to fix it. I'll have to dig into it a little more when I have some more
time to spend on it.

On Thu, Nov 12, 2015 at 6:28 AM Álvaro Medina Ballester <
[email protected]> wrote:

Hello @cmmouritsen https://github.com/cmmouritsen!

Yes, it should work for Android as long as the keyboard events are
registered but I think that those events are not yet supported:
facebook/react-native#3468
https://github.com/facebook/react-native/issues/3468

Have you tried to use KeyboardDidShow and KeyboardDidHide?

—
Reply to this email directly or view it on GitHub
https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/2#issuecomment-156102157
.

[alvaromb]

Ok, I would really like to have a PR for Android support.

Let me know if I can help you :)

[jblack10101]

I've started trying to add Android support: https://github.com/jblack10101/react-native-keyboard-aware-scroll-view. Android doesn't have handy events like keyboardDidShow and keyboardDidHide, so I'm extending the native ReactScrollView and checking if the keyboard is displayed in the onMeasure event.

I'm running into an issue where it says that "ScrollView can host only one direct child", but in my test project, I have only one direct child View of KeyboardAwareScrollView, e.g.:

<KeyboardAwareScrollView 
  style={ styles.container }
  contentContainerStyle={ styles.contentContainer }
  keyboardShouldPersistTaps={ true }
  keyboardDismissMode={ "on-drag" }>
  <View ref="wrapper" style={{ padding: 5 }}>
    <Text>Test</Text>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

I'm using React Native 0.19.1 and here's the stack trace:

E/unknown:React﹕ Exception in native call from JS
    java.lang.IllegalStateException: ScrollView can host only one direct child
            at android.widget.ScrollView.addView(ScrollView.java:257)
            at com.facebook.react.uimanager.ViewGroupManager.addView(ViewGroupManager.java:36)
            at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:366)
            at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:174)
            at com.facebook.react.uimanager.UIViewOperationQueue$2.run(UIViewOperationQueue.java:673)
            at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:723)
            at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32)
            at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:120)
            at android.view.Choreographer$CallbackRecord.run(Choreographer.java:790)
            at android.view.Choreographer.doCallbacks(Choreographer.java:596)
            at android.view.Choreographer.doFrame(Choreographer.java:556)
            at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:778)
            at android.os.Handler.handleCallback(Handler.java:739)
            at android.os.Handler.dispatchMessage(Handler.java:95)
            at android.os.Looper.loop(Looper.java:155)
            at android.app.ActivityThread.main(ActivityThread.java:5696)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1028)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:823)

I'm posting this here in hopes that someone may have an idea, but I will continue to look into it.

[alvaromb]

Hi @jblack10101! Which React Native version are you testing on? Under 0.19 I do get a resized scroll view in Android.

[jblack10101]

Hey @alvaromb, I'm getting this exception with react-native node version 0.19.0 and in Java, com.facebook.react:react-native:0.19.0 and 0.19.1. Which versions are you using?

[alvaromb]

I'm using 0.19, it's strange! Are you sure you're using only one child? ScrollView can host only one direct child

[jblack10101]

Yea, I pulled the latest react-native from master last night and built using it. I added some log statements, and even though I have a View as the only child of the KeyboardAwareScrollView, it looks like it is adding the Text and TextInput elements as direct children of the ScrollView and ignoring the View. I'll continue investigating.

[alvaromb]

That could be RN making some optimisations for you, IDK. Here https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/master/lib/KeyboardAwareScrollView.js#L25 you can see that this component just uses what you provide as children. Try to set some style into your container View, or set backgroundColor's to each of your views, it's useful to debug UI issues.

[karthickvkumar]

@jblack10101 How to register the react-native-keyboard-aware-scroll-view module in MainActivity.java for React Native 0.21

[jblack10101]

@karthickvkumar, sorry I've been on vacation and unable to respond, but the readme should have all of the information that you need to register the module. Please let me know if you have further questions.

[nickmaxwell10]

This helped me the most - https://github.com/exponentjs/react-native-tab-navigator/issues/48

For Android, it is a good idea to read up on android:windowSoftInputMode when dealing with the keyboard. Docs - http://developer.android.com/guide/topics/manifest/activity-element.html

I struggled for a while getting a chat-style (sticky) keyboard bar along with the react-native-keyboard-aware-scroll-view module (version 0.0.6).

As soon as I changed windowSoftInputMode in my main AndroidManifest.xml, it worked!

<-- AndroidManifest.xml -->
<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:windowSoftInputMode="stateUnspecified|adjustResize">

Also make sure you are subscribing to keyboardDidShow and keyboardDidHide on Android, for now (React Native 0.23.0).

[burgalon]

I'm using RN 0.24 and it seems like NativeModules.ScrollViewManager is not available on Android.
Getting ReactNativeJS: undefined is not an object (evaluating 'ScrollViewManager.getContentSize')

[anthonywebb]

It appears there is a pull request for android functionality (https://github.com/APSL/react-native-keyboard-aware-scroll-view/pull/4) but I have not heard if it actually works or not? I assume if it worked it would have been merged by now as android support seems like a nice addition.

[iSimonWeb]

:+1: up

[alvaromb]

It's on the list @iSimonWeb, sorry for the delay :(

[shukerullah]

+1

[abhishiv]

Just curious, why is it needed? Plain ScrollView works fine for me on android out of the box with android:configChanges="keyboard|keyboardHidden|orientation|screenSize" in my AndroidManifest.

[alvaromb]

I think there are some older Android versions that do not automatically scroll to the input fields @abhishiv. I've been very busy and I didn't had time yet to bring full Android support.

[lesniakania]

I have react-native 0.37.0 and react-native-keyboard-aware-scroll-view 0.2.6, basic scrolling functionality works for me, but neither extraScrollHeight nor extraHeight works for me.
Work on iOS version, though.

[brianinator]

I have the same issue as @lesniakania +1 about the extra space on Android. Should that be in another ticket?

[lesniakania]

ping @alvaromb ;]

[serranoarevalo]

@lesniakania How did you get the basic scrolling functionality to work? Mine just wont.

[lesniakania]

I just used README code, it just worked for me. What phone/android version you test on?

[alvaromb]

Hi all!

I can't figure out what's the issue. Can you describe? :)

[lesniakania]

For me the issue is that I want to use extraScrollHeight and it does not work for me on Android.
I'm using it because I have buttons below input and I want to make them visible when the keyboard is present. I set extraScrollHeight to the buttons' height and it works for me on iOS but not on Android.

[alvaromb]

Ok @lesniakania!

Let me check, we have several projects where we're using it in Android.

[lesniakania]

Awesome, thanks :)

[alvaromb]

I just reproduced the issue @lesniakania.

Can you create a separate issue and we'll track it there? Thanks!

[lesniakania]

Sure: https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/107
Thanks for quick feedback!

[alexprice1]

Has anyone been able to get this to work with Exponent?

[serranoarevalo]

@alexprice91 Take a look at KeyboardAvoidingView, it might work for you. I was also trying to make it work with Expo but I had no luck with it. KeyboardAvoidingView did the trick in both iOS and Android.

[alexprice1]

This does the trick. Thanks!!

[OwenFlood]

Has android support been added? It's working fine on ios, but on android nothing happens when the keyboard is opened. 😕

[Swordsman-Inaction]

@OwenFlood I'll start the work after https://github.com/facebook/react-native/pull/13129 is been merged.

[ms88privat]

@Swordsman-Inaction 🎉

[Palisand]

+1 Currently have to switch to RN's KeyboardAvoidingView on Android devices, but I still prefer this component over its equivalent in core. I can basically pop in KeyboardAwareScrollView it and it just works, while with KeyboardAvoidingView I have to set style, behavior, and a vertical offset.

[alvaromb]

Folks, keep in mind that in Android you can use softInputMode to handle the keyboard. Thanks to @Swordsman-Inaction, we'll have the resizing support with Android too, but for most cases softInputMode will be the best option.

[Swordsman-Inaction]

softInputMode is good enough for most cases, you guys can just use it.
For Android support, my PR is merged, but somehow it's not in 0.45, it's in master branch right now. I'll start working on it after 0.46(hopefully it will have my change) comes out.

[chirag04]

@Swordsman-Inaction did you get a chance to work on it? 46 is out now.

[Swordsman-Inaction]

@chirag04 I'm already working on it. 😀

[graphee-gabriel]

Hello, I'm new to react-native and exponent (but know pretty well android and ios native dev)
I can get it to work on Android, though it works perfect on iOS.
Am I missing something special to do for Android when using this lib with Expo?

[Palisand]

@graphee-gabriel Check out https://github.com/Palisand/kasv-expo. It's far from perfect, but it should help out.

[alvaromb]

@Palisand I don't know anything about expo, but do you want to stick a link to your lib in the docs? What's the difference between using this library with expo and yours?

[graphee-gabriel]

Hmmmm @alvaromb I tried your code, but it did not change anything, still no scrolling on android.

[alvaromb]

Ping @Swordsman-Inaction, who made the Android implementation.

[Swordsman-Inaction]

@graphee-gabriel Could you share more information? Which version? Code snippet? It's better to open an issue.

[rxb]

For anyone looking for this scrolling behavior on Expo, you have to set the status bar to any solid color in app.json

"androidStatusBar": {
    "backgroundColor": "#eeeeee",
},

Not sure why, but it works.

[kazixma]

@rxb I work too , but Now I can use KeyboardAvoidingView and ScrollView together when I set
"androidStatusBar": { "backgroundColor": "#eeeeee", },

Thank

[davidroman0O]

@rxb Damn, thx you so much, i almost had a heart attack...

[graphee-gabriel]

The status bar thing did not work for me but i found a workaround making a component for it.
I use the Facebook KeyboardAvoidingView on android with behavior padding and a weird keyboardVerticalOffset at -1000, it was the only way to make it work on my android phone.

Just use this component and replace KeyboardAwareScrollView by KeyboardAwareScrollViewCompat

EDIT: well it does work perfectly on this app, but i tried copying this component to another app that had the same problem, implemented it, and it does not work on the other app... This is really confusing, they have the same app.json settings etc... slightly frustrating :-)

import React from 'react'
import { Platform, KeyboardAvoidingView, ScrollView } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'


export default class KeyboardAwareScrollViewCompat extends React.Component {

  render() {
    if (Platform.OS === 'ios') {
      return (
        <KeyboardAwareScrollView {...this.props}>
          {this.props.children}
        </KeyboardAwareScrollView>
      )
    }

     return (
       <KeyboardAvoidingView {...this.props} behavior="padding" keyboardVerticalOffset={-1000}>
         <ScrollView>
           {this.props.children}
         </ScrollView>
       </KeyboardAvoidingView>
     )
  }
}

[himelnagrana]

@graphee-gabriel that worked and solved my 3 months long keyboard toggle problem (_where I have tried lots of hacks previously_). Thanks.

[KellyHannemann]

adding enableOnAndroid worked for me without having to use the statusbar trick
<KeyboardAwareScrollView style={{flexGrow: 1}} enableOnAndroid>