Screen Not Showing in Android with Even With `enableOnAndroid={true}`

Question

I have updated to Expo SDK 42 in my react-native app, and I am running into one issue one one particular screen that makes use of KeyboardAwareScrollView. On iOS everything is fine. But on Android all I see is a white screen below the header for the code below. Note that if I remove <KeyboardAwareScrollView> altogether, the content again shows up in Android.

Notice I have enableOnAndroid set to true on KeyboardAwareScrollView.

<KeyboardAwareScrollView
  enableOnAndroid={true}
  enableAutomaticScroll={(Platform.OS === 'ios')}
>

Here is the full code block:

  render() {
    return (
      <TouchableWithoutFeedback
        onPress={Keyboard.dismiss}
      >
        <KeyboardAwareScrollView
          enableOnAndroid={true}
          enableAutomaticScroll={(Platform.OS === 'ios')}
        >
          <View style={styles.layout.footerPadding}>
            <Image source={require('../assets/images/thestaff.jpg')} style={{
              width: '100%',
              height: winSize.width * 0.5,
            }} />
            <View style={{
              ...styles.forms.sectionContainer,
              borderTopWidth: 10,
              borderTopColor: styles.colors.primary,
            }}>
              <View style={{
                ...styles.forms.fieldContainer,
                flexDirection: 'column'
              }}>
                <Text style={{
                  ...styles.forms.fieldLabel,
                  ...styles.layout.fullWidth,
                }}>Please reach out with any concerns that you may have.</Text>
                <View style={{
                  ...styles.layout.flexRowJustifyEnd,
                  ...styles.layout.fullWidth,
                }}>
                  <Text style={{
                    ...styles.forms.fieldLabel,
                    marginTop: 10,
                    width: 190
                  }}>-The Office Staff</Text>
                </View>
                <TextInput
                  style={{
                    ...styles.layout.fullWidth,
                    marginTop: 30,
                  }}
                  multiline={true}
                  editable={true}
                  maxLength={1500}
                  placeholder="Enter a message"
                  onChangeText={(value) => {
                    this.setState({ message: value })
                  }}
                  value={this.state.message}
                />
              </View>          
            </View>
            <View style={styles.forms.submitButton}>
              <GradientButton
                indicatorColor={styles.colors.textInverse}
                onPress={this.handleSendMessage}
                isLoading={false}
                value="SEND"
              />
            </View>
          </View>
        </KeyboardAwareScrollView>
      </TouchableWithoutFeedback>
    );
  }

Any ideas on what I need to change would be helpful.

score 0 · Answer 1 · answered Jul 08 '21 at 12:36

0

Add styling to the touchable component and keyboardAwareScrollview component.

<TouchableWithoutFeedback
        style={{ flex: 1 }}
        onPress={Keyboard.dismiss}
      >
        <KeyboardAwareScrollView
          style={{ flex: 1 }}
          enableOnAndroid={true}
          enableAutomaticScroll={(Platform.OS === 'ios')}
        >

answered Jul 08 '21 at 12:36

Jignesh Mayani

6,937
1
20
36

I tried that. Unfortunately, it made no difference. Still a blank white screen below the header. – Muirik Jul 08 '21 at 12:42
but can i know why do you want to manage the keyboard avoiding view manually ? – Jignesh Mayani Jul 08 '21 at 12:44
as it is already managed by android system – Jignesh Mayani Jul 08 '21 at 12:45
make enableOnAndroid={false} and add android:windowSoftInputMode="adjustResize" to your android manifest.xml in main activity tag – Jignesh Mayani Jul 08 '21 at 12:50
Also see this thread: https://stackoverflow.com/questions/45466026/keyboard-aware-scroll-view-android-issue. The suggest is to use `enableOnAndroid={true}` – Muirik Jul 08 '21 at 12:59
What issues are you facing with this? in android – Jignesh Mayani Jul 08 '21 at 13:01
@Muirik, I have created a demo with the library and enableAndroid={true} seems working fine in my device – Jignesh Mayani Jul 08 '21 at 13:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234659/discussion-between-jignesh-mayani-and-muirik). – Jignesh Mayani Jul 08 '21 at 13:43

Screen Not Showing in Android with Even With `enableOnAndroid={true}`

1 Answers1