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

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
5 participants
@mkonicek
Contributor

mkonicek commented Feb 1, 2017

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

screenshot 2017-02-01 15 15 25

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

screenshot 2017-02-01 15 21 15

Keyboard is shown:

screenshot 2017-02-01 15 26 56


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:

screenshot 2017-02-01 15 24 47

@janicduplessis

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Feb 1, 2017

Collaborator

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

@facebook-github-bot shipit

Collaborator

janicduplessis commented Feb 1, 2017

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

@facebook-github-bot shipit

@facebook-github-bot

This comment has been minimized.

Show comment
Hide comment
@facebook-github-bot

facebook-github-bot Feb 1, 2017

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

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

@janicduplessis

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Feb 1, 2017

Collaborator

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

Collaborator

janicduplessis commented Feb 1, 2017

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

kathawthorne pushed a commit to KetoThrive/react-native that referenced this pull request Feb 3, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

edmofro pushed a commit to edmofro/react-native that referenced this pull request Feb 6, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 7, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

normanjoyner added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1

nicktate added a commit to nicktate/react-native that referenced this pull request Feb 9, 2017

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

Differential Revision: D4496428

fbshipit-source-id: c300ebe55bd93f8b243e0d7d0d6a132bc3a5a1c1
@Rovack

This comment has been minimized.

Show comment
Hide comment
@Rovack

Rovack Jul 6, 2017

@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.

Rovack commented Jul 6, 2017

@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 comment has been minimized.

Show comment
Hide comment
@jtewright

jtewright Jul 12, 2017

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>
  		);
  	}
  }

}

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>
  		);
  	}
  }

}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment