Content hides Input when keyboard visible (i.e. not keyboard-aware-scroll-view)

react-native, react and native-base version

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "test": "node ./node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@expo/vector-icons": "^6.2.1",
    "expo": "^23.0.0",
    "firebase": "^4.6.2",
    "native-base": "^2.3.3",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz",
    "react-native-datepicker": "^1.6.0",
    "react-navigation": "^1.0.0-beta.19",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "jest-expo": "^23.0.0"
  }
}

Expected behaviour

Content advertises to replace KeyboardAwareScrollView.

1. Auto-Scrolling should happen when I type an input on lower half of screen.
2. It is possible to scroll manually to make the input visible.

Actual behaviour

1. No auto-scrolling happens. Both with Asus ZenUI keyboard and Google Gboard.
2. It’s not possible to scroll manually to make the input visible. (see below for workaround)

Wrapping the Input/Item with KeyboardAvoidingView does not work either.

Input:

is obscured:

Steps to reproduce (code snippet or screenshot)

      <Container>
        <Content>
          <Form>
             ...other <Item>s...
            <Item stackedLabel>
              <Label>Pekerjaan (lainnya)</Label>
              <Input value={this.state.userProfile.employment_other}
                onChangeText={(text) => this.setState({userProfile: {...this.state.userProfile, employment_other: text}})}/>
            </Item>
          </Form>
        </Content>
      </Container>

Tried using: <Content contentContainerStyle={{flex: 1}}> but made the content squashed.

Partial Workaround: As @samarhaider suggests (https://github.com/GeekyAnts/NativeBase/issues/534#issuecomment-344689283) it’s possible to use @Andr3wHur5t’s <KeyboardSpacer/> to allow scrolling manually when keyboard is visible. However, auto-scroll still does not occur even with KeyboardSpacer :

Is the bug present in both ios and android or in any one of them?

Only tested with Android 7.0. Probably related to #534, #79.

Tips

I suggest modifying the KitchenSink to add long forms to better test this behavior in the future.

[Almaju]

I made it work with https://github.com/APSL/react-native-keyboard-aware-scroll-view on Expo

You need to add this to app.json:

"androidStatusBar": {
  "backgroundColor": "#000000"
}

Then:

import React from 'react';
import { Platform, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const Content = () => (
  <KeyboardAwareScrollView
    enableOnAndroid
    enableAutomaticScroll
    keyboardOpeningTime={0}
    extraHeight={Platform.select({ android: 200 })}
  >
    <View>
      {props.children}
    </View>
  </KeyboardAwareScrollView>
);

[allan-simon]

following this comment https://github.com/expo/expo/issues/1073#issuecomment-467782012
simply adding enableOnAndroid to Content make it works (as Content behind the hood is already a keyboaravoidingview-ish )

  <Container>
    <Content enableOnAndroid>
      <Form>
        <Item>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>