BREAKING: [CLI] New app template: Resize UI when keyboard is shown on Android

[mkonicek]

When building the Chat example for react-navigation, I realized the default Android behavior doesn't actually work:

(From https://developer.android.com/guide/topics/manifest/activity-element.html)

In my app there's a <ListView> and a <TextInput> below it. Without this PR the UI pans which is a very bad user experience.

Keyboard is hidden:

Keyboard is shown:

---

Let's use "adjustResize", it seems to be a reasonable default in most cases and people can always change the constant in their AndroidManifest.xml if needed. Definitely better than the default "adjustUnspecified" we've been using until now.

This is a BREAKING change because some libraries like react-native-keyboard-spacer might be making assumptions about the constant being set to "adjustUnspecified" and therefore might not work correctly in new apps. Will create an issue on that repo, tweet about this change and add it to the breaking changes doc.

Test plan (required)

Soft keyboard is handled correctly without the use of KeyboardAvoidingView or any KeyboardSpacer - no need to hack around the keyboard in JS, Android resizes the UI for us:

[janicduplessis]

Cool, someone actually posted this issue on the fb group yesterday.

@facebook-github-bot shipit

[facebook-github-bot]

@janicduplessis has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[janicduplessis]

Another thing we might want to do related to this is make KeyboardAvoidingView do nothing on Android.

[Rovack]

@janicduplessis Did your suggestion to make KeyboardAvoidingView do nothing on Android ever get implemented?
As it stands, it seems to be necessary to write different code for Android and iOS, since KeyboardAvoidingView is still needed on iOS, but breaks on Android.

[jtewright]

This is a good workaround:

'use strict';

import React from 'react';
import {
	KeyboardAvoidingView,
	Platform,
	View,
} from 'react-native';

export default class KeyboardView extends React.Component {

	/*
	 * This only works with android:windowSoftInputMode="adjustResize"
	 * set in AndroidManifest.xml.
	*/

  render() {
  	if (Platform.OS === 'android') {
  		return (
  			<View style={this.props.style}>
      		{this.props.children}
    		</View>
  		);
  	}
  	else {
  		return (
  			<KeyboardAvoidingView {...this.props}>
      		{this.props.children}
      	</KeyboardAvoidingView>
  		);
  	}
  }

}