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: facebook/react-native#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 <
notifications@github.com> 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
facebook/react-native#3468

Have you tried to use KeyboardDidShow and KeyboardDidHide?

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

[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 - ptomasroos/react-native-tab-navigator#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 (#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]

👍 up