expo: Expo SDK 23 doesn't support KeyboardAvoidingView/KeyboardAwareScrollView - TextInput hidden when keyboard visible

add something like this to your app.json if you want this component to work with default props:

    "androidStatusBar": {
      "backgroundColor": "#C2185B",
    },

that makes it work as expected. the reason is that the status bar is translucent by default in expo but not in react-native. if someone wants to add more info to docs that would be appreciated!

I got it working with

<KeyboardAvoidingView behavior="padding">
    ...
</KeyboardAvoidingView>

Yes, Put Content inside KeyboardAwareScrollView <Container>

    <KeyboardAwareScrollView
        extraScrollHeight={100}
        enableOnAndroid={true} 
        keyboardShouldPersistTaps='handled'
        >
        <Content padder >
          <Logo message={message} />
          <Form style={{ margin: 20 }}>
            <Item >
              {/* <Icon active name='md-call' />                */}
              <Input
                style={{color: "#FFF", paddingLeft: 40}} 
                placeholder="Enter your email address"
                value={this.props.email}
                onChangeText={this.onemailChanged}
                keyboardType="email-address"
                disabled={this.props.loading}
                autoCorrect={false}
                autoCapitalize={'none'}
                returnKeyType={'done'}
              />
            </Item>

          </Form>
        </Content>
      </KeyboardAwareScrollView>   
  </Container>

I was able to reproduce the issue on this Snack.

https://snack.expo.io/r1A0kaj-M

Rather than wrapping <Content /> in a <KeyboardAwareScrollView />, I think you can simply add the enableOnAndroid prop to the <Content />. NativeBase passes it along.

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

Side note: androidStatusBar option in app.json didn’t solve it for me. I’m on expo 32 currently.

for anyone who’s looking for a sample code… the trick is to actually not use keyboardavoidingview with the status bar trick

      <Container style={styles.background}>
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Email</Label>
              <Input value={this.state.email} onChangeText={email => this.setState({email})}/>
            </Item>
          </Form>
        </Content>
      </Container>

@pandapaul awesome, your tricks works , had i been looking for this issue one hour earlier I wouldn’t have seen your response 😃

Still investigating, but just in case my experience helps someone in the future:

I found that if I was using NativeBase’s <Content> then this behaviour did not work as I expected on Android (i.e the keyboard often covered the input I was interacting with). But, if I swapped it out for <KeyboardAwareScrollView enableOnAndroid>then everything worked as expected.

I’m not sure why nativebase (“cross-platform UI components”) doesn’t include the enableOnAndroid prop which makes this work on Android. I wondered if this was because the default expectation on Android is for the platform to pan the contents of the window (which in most cases probably results in the input being visible without any need to listen to keyboard events in the <ScrollView>).

However, as I understand it, expo eject produces an Android project with a manifest configured with android:windowSoftInputMode="adjustResize". This means the <ScrollView> will be resized, but I’m not experienced enough with react-native and/or Android to predict whether that will trigger any scrolling.

If it doesn’t, this probably explains why using a <Content> on an Expo project will result in the keyboard covering inputs on Android - the <ScrollView> isn’t panning, and <KeyboardAwareScrollView> isn’t enabled.

@gerardo15 I suspect this is why nesting <KeyboardAwareScrollView>s “works” in the example provided by @samarhaider above - they’re including enableOnAndroid, which <Content> does not.

P.S @SupriyaKalghatgi I’d love someone who probably actually understands the complexity here to check my understanding 😄

@samarhaider How does this work? if you look at Content> from Native Base, it is a KeyboardAwareScrollView

so basically you are placing a KeyboardAwareScrollView inside a KeyboardAwareScrollView?

@brentvatne That seems to work great on Android. However, absolutely nothing happens on iOS as far as I can tell, no position adjustment for keyboard events. Is there a similar trick to get this to work on iOS?

@brentvatne @mauroporrasp Yeah, makes me wondering: what if the status bar is hidden entirely, i.e. a full screen app ?

THANK YOU @mario-subotic ! Your hard work is really appreciated!

Your Snack also reproduces on Expo 21 (the oldest supported by Snack).