React-native: ListView + TextInput = troubles with soft keyboard

[zxwild]

I'am trying to avoid keyboard autohides, when text field is placed at the bottom of the screen, so I need to reduce the main View height to lift up this text field.
The events are described below doesn't work at all, all variants I used don't show results, is it my mistake or a bug in RN?

import { Dimensions } from 'react-native';
const { Keyboard } = require('react-native');

class Form extends Component {

  constructor (props) {
    super(props);
    this.state = {
      visibleHeight: Dimensions.get('window').height
    };
  }

  componentWillMount () {
    Keyboard.addListener('keyboardWillShow', this.keyboardWillShow.bind(this));
    Keyboard.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
  }

  keyboardWillShow (e) {
    console.log('keyboardWillShow');
  }

  keyboardWillHide (e) {
    console.log('keyboardWillHide');
  }
  render(route, navigator) {
    return (
      <View style={[styles.main_container, {height: this.state.visibleHeight}]}></View>
    )
}

[vonovak]

The willShow events are not available on android. You wanna use keyboardDidShow

[zxwild]

I tried to use "Did" events, but it's useless this case.

When you handle keyboardDidShow at this moment keyboard is already shown and hidden as at screenshot above, because TextInput is overlapped by keyboard and ListView animation takes more time to display then keyboard displaying.

ListView scrolls and tries to keep TextInput visible , but this speed isn't enough for it.

Also I tried to handle TextInput.onFocus and ListView.scrollTo to move list to the required position, but I can't calculate required offset, my rows have different height and it's impossible to calc offset like offset = row_id * row_height.

So for now I have no idea how to solve it, I increased bottom padding for the form to 50% device height, and now it's possible to access bottom inputs by clicking twice on it, but it's weird.

[vonovak]

Perhaps you could try to implement willShow for Android, I bet lots of people would benefit from it. For me didShow works well enough for now.

[ThaJay]

How about KeyboardAvoidingView? is that usable? I want to use it as well.
https://github.com/facebook/react-native/blob/8b78846a9501ef9c5ce9d1e18ee104bfae76af2e/Libraries/Components/Keyboard/KeyboardAvoidingView.js

avoiding the keyboard needs to be trivial, it is used by just about every app there is.

[latusaki]

@ThaJay no, that view to me seems to only help in very simple scenarios. On the example of this post, the lowest inputs would still be hidden. If you use the 'position' behaviour, it just pushes everything up, in which case the lowest fields will be visible, but everything else above them hidden... I guess if you have extra logic that will use either padding or position based on the vertical location of selected fields, then it might be okayish, but again, these things should just be working ideally...

[KishPatel1996]

Is there a way to use KeyboardAvoidingView with a ScrollView?

[teyou]

It seems KeyboardAvoidingView doesn't work well on Android.
Somehow after keyboard hidden, there's still a big space taken under the screen.
Anyone have this issue?

[latusaki]

@teyou Android handles scrolling natively, you should not need to use it for it.

[reyesr]

@zxwild when you say «trying to avoid keyboard autohides», is it somewhat related to #9822 ?

[zxwild]

@reyesr yes, my gif looks almost the same as your, we need the keyboardWillShow event to calculate a screen height and shrink ListView up to prevent this behaviour

[afilp]

@latusaki I have Android 5 and it is not handled natively. Are you sure about that?

[latusaki]

@af7 for me wherever I have text that is obstructed by keyboard, the whole view is scrolled up smoothly. I had to add the following on AndroidManifest, as it would get stuck sometimes after putting the app on background:

android:windowSoftInputMode="adjustPan"

[zxwild]

android:windowSoftInputMode="adjustPan"

This solution works ok for me, at least better than before, thanks @latusaki

[shaddeen]

Has anyone experienced problems with KeyboardAvoidingView when dealing with multiple text fields? It appears that the hide, show and change notifications are fired when switching between fields when either tapping on them or using the return key. I've come up with a solution for iOS that works for me. It'd be great to know how everyone else is dealing with this issue or if I'm the only one seeing this. Ideally I'd like to make a PR for the existing component but not until I can come up with an elegant solution.

[lacker]

It sounds like the original problem is working as intended since the willShow events are not available on Android. I am going to close this issue for that reason but if someone was interested in putting together a PR that improved iOS+Android cross-compatibility here I think that would be pretty useful.