Permalink
Browse files

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

… Android

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

<img width="868" alt="screenshot 2017-02-01 15 15 25" src="https://cloud.githubusercontent.com/assets/346214/22512559/518e3bf0-e891-11e6-9a86-2dafac5b250f.png">

(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:

<img width="437" alt="screenshot 2017-02-01 15 21 15" src="https://cloud.githubusercontent.com/assets/346214/22512814/23fc93d4-e892-11e6-9e45-94041dbe8eba.png">

Keyboard is shown:

<img width="439" alt="screenshot 2017-02-01 15 26 56" src="https://cloud.githubusercontent.com/assets/346214/22513062/e4e1835c-e892-11e6-93b7-fe5616135b91.png">

 ---

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
Closes #12154

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1
  • Loading branch information...
mkonicek authored and facebook-github-bot committed Feb 1, 2017
1 parent 866ac17 commit e3d4ace3ae46e3e4046e1ec5a201b92033deb24a
Showing with 2 additions and 1 deletion.
  1. +2 −1 local-cli/templates/HelloWorld/android/app/src/main/AndroidManifest.xml
@@ -19,7 +19,8 @@
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />

1 comment on commit e3d4ace

@Parrryy

This comment has been minimized.

Show comment
Hide comment
@Parrryy

Parrryy Mar 16, 2017

This is working great on our Android device. We used to use behaviour padding but with this height works perfectly.

Parrryy commented on e3d4ace Mar 16, 2017

This is working great on our Android device. We used to use behaviour padding but with this height works perfectly.

Please sign in to comment.