BackgroundImage being pushed up with KeyboardAvoidView on Android with React Native

Question

I want to stop BackgroundImage being pushed when keyboard appears and only the TextInput components and the button should be pushed up. This works fine with the current code on iOS but does not work fine on Android. I have tried with absolute position of ImageBackground and flex and height of ImageBackground but nothing has worked so far. Following are the code and the screenshot on Android:

<ImageBackground
          source={require('../../../assets/images/backgroundImage.png')}
          style={{
            // flex: 1,
            justifyContent: 'center',
            // height: '100%',
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
          }}
          resizeMode='cover'>
          <KeyboardAvoidingView
            style={{ flexGrow: 1 }}
            enabled
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
            <View
              style={{
                flex: 1,
                justifyContent: 'flex-end',
                alignItems: 'center',
                paddingHorizontal: 16,
                paddingVertical: 1,
                flexDirection: 'column',
                height: '100%',
              }}>
              <Image
                source={require('../../../assets/images/logo.png')}
                style={{ marginBottom: 50 }}
                resizeMode='contain'
              />

              <SafeAreaView
                style={{
                  height: '50%',
                  justifyContent: 'flex-end',
                  width: '100%',
                }}>
                <View
                  style={{
                    width: '100%',
                    justifyContent: 'flex-end',
                    marginBottom: 10,
                  }}>
                  <TextInput
                    ref={this.classIdRef}
                    style={{
                      width: '100%',
                      backgroundColor: '#fff',
                      height: 50,
                      borderRadius: 4,
                      marginBottom: 15,
                      paddingHorizontal: 15,
                    }}
                    placeholderTextColor='rgb(218, 218, 218)'
                    placeholder='Class ID'
                    value={roomId}
                    onChangeText={(text) => this.setRoomId({ roomId: text })}
                  />

                  <TextInput
                    ref={this.nicknameRef}
                    style={{
                      width: '100%',
                      backgroundColor: '#fff',
                      height: 50,
                      borderRadius: 4,
                      marginBottom: 20,
                      paddingHorizontal: 15,
                    }}
                    placeholder='Nickname'
                    placeholderTextColor='rgb(218, 218, 218)'
                    value={nickName}
                    onChangeText={(text) =>
                      this.setNickName({ nickName: text })
                    }
                  />

                  <TouchableOpacity
                    onPress={this.navigateToClassroomHandler}
                    style={{
                      backgroundColor: 'rgb(251, 158, 85)',
                      width: '100%',
                      height: 50,
                      justifyContent: 'center',
                      alignItems: 'center',
                      borderRadius: 4,
                    }}
                    disabled={roomId === '' || nickName === ''}>
                    <Text
                      style={{
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: 'bold',
                      }}>
                      Attend Class
                    </Text>
                  </TouchableOpacity>
                </View>
              </SafeAreaView>
            </View>
          </KeyboardAvoidingView>
        </ImageBackground>

Update 1: Sorry, forgot to add the screenshots (I had already added android:windowSoftInputMode="adjustResize" in the manifest file):

And with android:windowSoftInputMode="adjustPan", it looks like following:

score 0 · Answer 1 · answered Dec 25 '20 at 08:32

0

I think you can add this to your AndroidManifest.xml file.

android:windowSoftInputMode="adjustPan"

Then the view doesn't get shrunk and the text inputs got pushed up.

answered Dec 25 '20 at 08:32

First Arachne

786
1
8
18

I was using `android:windowSoftInputMode="adjustResize"`. But I have replaced it with your suggestion and the problem still persists. Please compare the 3 screenshots I provided above under "UPDATE 1". – Fawad Khalil Dec 25 '20 at 10:18
Please try ScrollView instead of KeyboardAvoidingView. – First Arachne Dec 25 '20 at 19:59
I don't think the Image in the center of the screen can be adjusted with ScrollView before and after the Keyboard appears, is it? – Fawad Khalil Dec 25 '20 at 22:03

BackgroundImage being pushed up with KeyboardAvoidView on Android with React Native

1 Answers1