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

[ceefour]

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.

[akhil-geekyants]

@ceefour tried to reproduce the issue. Couldn't see anything like above. It will be helpful, if you can create a test repo for us to test.

Gif

[ceefour]

@akhil-geekyants Sure, here it is : https://github.com/ceefour/keyboardavoider

[akhil-geekyants]

@ceefour this is happening only with the latest expo on Android device. Tried a sample app with a long form created using react-native init. It works fine. KitchenSink app with CRNA also works fine with an older expo version (19.0.1).

Not a NativeBase bug.

[ceefour]

Thanks @akhil-geekyants , reported to https://github.com/expo/expo/issues/1073

[SupriyaKalghatgi]

Closing this issue

[ceefour]

@akhil-geekyants Please help me, can you show me where is the working app:

1. " a sample app with a long form created using react-native init"
2. "KitchenSink app with CRNA also works fine with an older expo version (19.0.1)". I'm not sure which KitchenSink app that you mentioned has a long form demo. Because current KitchenSink has no demonstration at all of long forms. All of the forms are short. That's why if you could update the KitchenSink app to add a long form example, it will be very helpful.

I'm trying to diagnose the problem, but I need to localize first where it is actually happening, because there are so many components at stake which I'm unfamiliar with:

1. expo app?
2. expo SDK ?
3. react native ?
4. native-base ?
5. KeyboardAvoidingView ?
6. keyboard-aware-scroll-view ?
7. the Android version?
8. the Android keyboard?
9. user's (my) own mistake in code ?
10. behavior = height / position / padding variations ?
11. style / flex / alignItems / justifyContent / etc. ?

So if you can share me these two working examples (first I need to confirm if they're indeed working in my system) and I can try to triage at which point does it break..

cc @tcdavis @ide re: https://github.com/expo/expo/issues/1073#issuecomment-350120860

[akhil-geekyants]

@ceefour you can check the sample app created using react-native init here

For Kitchen Sink App add some extra fields in any of the files to make it exceed the height of the device.

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

[waqaramjad]

i am facing the same issue i tried every solution but my problem not solved

[chriswait]

Tried to get my head around this here: https://github.com/expo/expo/issues/1073

Could anyone with a better understanding of this let me know if I'm missing something obvious?

[rahamin1]

@chriswait @waqaramjad Have you found a solution?

[chriswait]

I swapped all my instances of <Content> for <KeyboardAwareScrollView enableOnAndroid>.

[rahamin1]

Thanks @chriswait
It helped.
I added extraScrollHeight. Not sure if there is a way to do without it,

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

export default class Settings extends React.Component {
  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <KeyboardAwareScrollView enableOnAndroid extraScrollHeight={200} >
        <TextInput placeholder= "Input1" style={styles.input} />
        <TextInput placeholder= "Input2" style={styles.input} />
        <TextInput placeholder= "Input3" style={styles.input} />
        <TextInput placeholder= "Input4" style={styles.input} />
        <TextInput placeholder= "Input5" style={styles.input} />
      </KeyboardAwareScrollView>
    );
  }
}

const styles = StyleSheet.create({
  input: {
    height: 100, borderColor: 'gray', borderWidth: 1, padding: 10, margin: 10
  }
});

[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>

[gruianichita]

@allan-simon it works, thx

[AmmarAshfaq]

contentContainerStyle={{
height: height - 80,
width
}}
keyboardDismissMode="interactive"
keyboardShouldPersistTaps="handled"
>

it works

[raheemuddin786]

Thanks allan-simon, it worked 👍

[favger]

@allan-simon thanks mate, its worked. I was looking for the problem for about 1 hour...