Background image gets shifted upwards when keyboard height overlaps the content

[vinay-sayone]

The background image I've set is shifting upwards if the content overlaps the keyboard. This happens only in android devices. I've set the windowSoftInputMode="adjustPan" in manifest file

screen.js

<ImageBackground
        source={images.designs.usr_details_bg}
        style={styles.bgImageContainer}>
        <SafeAreaView style={styles.mainContainer}>
          <KeyboardAwareScrollView
            style={styles.keyboardContainer}
            contentContainerStyle={styles.keyboardContentContainer}
            enableOnAndroid={true}
            showsVerticalScrollIndicator={false}>
            <View style={{marginTop: 180}}>
              <View style={styles.welcomeContainer}>
                <Text style={styles.welcomeTxt}>Welcome User</Text>
                <Text style={styles.startedTxt}>Let's Get Started!</Text>
              </View>
              <View style={styles.inner}>
                <Text style={styles.nameTxt}>Name</Text>
                <TextInput
                  maxLength={35}
                  value={this.state.name}
                  placeholder="Enter your name"
                  placeholderTextColor={AppStyles.colors.COLOR_BLACK_RUSSIAN}
                  style={styles.inputContainer}
                  onChangeText={(text) => {
                    if (text.length >= 35) {
                      Alert.alert('Maximum character limit reached');
                    }
                    this.setState({name: text});
                  }}
                />

                <TouchableOpacity
                  style={styles.btnContainer}
                  activeOpacity={0.7}
                  onPress={() => this.onPressContinue()}>
                  <LinearGradient
                    start={{x: 1, y: 0}} //here we are defined x as start position
                    end={{x: 0, y: 0}} //here we can define axis but as end position
                    colors={['#9713C6', '#32A0EE']}
                    style={styles.gradientContainer}>
                    <Text style={styles.btnTextStyle}> Continue </Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>
            </View>
          </KeyboardAwareScrollView>
          <View style={styles.paginationContainer}>
            <Text style={styles.pagesTxt}>1/8</Text>
            <View style={styles.dotsContainer}>
              <AnimatedDots currIndex={0} />
            </View>
          </View>
        </SafeAreaView>
      </ImageBackground>

styles.js

const Styles = StyleSheet.create({
  // container: {
  //   flex: 1,
  // },

  bgImageContainer: {
    flex: 1,
    // height: Platform.OS === 'ios' ? screenHeight : null,
    // width: screenWidth,
  },

  mainContainer: {
    flex: 1,
  },

  keyboardContainer: {
    flex: 1,
  },

  keyboardContentContainer: {
    justifyContent: 'center',
    borderWidth: 1,
  },

  welcomeContainer: {
    // marginTop: Platform.OS === 'ios' ? responsiveHeight(15) : null,
    paddingHorizontal: responsiveWidth(8),
    justifyContent: 'space-evenly',
    height: responsiveHeight(10),
  },

  welcomeTxt: {
    fontFamily: AppStyles.fonts.sfprotext_bold,
    fontSize: responsiveWidth(5),
  },

  startedTxt: {
    fontFamily: AppStyles.fonts.sfprotext_bold,
    fontSize: responsiveWidth(7),
  },

  inner: {
    justifyContent: 'space-evenly',
    height: responsiveHeight(5),
    paddingHorizontal: responsiveWidth(8),
    height: responsiveHeight(25),
    marginTop: responsiveHeight(3),
  },

  nameTxt: {
    color: AppStyles.colors.COLOR_COD_GRAY2,
    fontFamily: AppStyles.fonts.sfprotext_semibold,
    fontSize: 18,
  },

  inputContainer: {
    backgroundColor: AppStyles.colors.COLOR_WHITE,
    width: '100%',
    height: responsiveHeight(7),
    borderRadius: responsiveWidth(3),
    paddingLeft: responsiveWidth(7),
    fontSize: responsiveFontSize(1.6),
    shadowColor: '#95959529',
    shadowOffset: {height: 1, width: 1},
    shadowOpacity: 2,
    shadowRadius: 2,
    elevation: 4,
    fontFamily: AppStyles.fonts.sfprotext_regular,
  },

  btnContainer: {
    width: '100%',
    height: responsiveHeight(7),
  },

  gradientContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    shadowColor: '#00000029',
    shadowOffset: {height: 1, width: 1},
    shadowOpacity: 2,
    shadowRadius: 2,
    elevation: 4,
  },

  btnTextStyle: {
    color: AppStyles.colors.COLOR_WHITE,
    fontSize: responsiveFontSize(2),
    fontFamily: AppStyles.fonts.sfprotext_semibold,
  },

  paginationContainer: {
    flex: 0.1,
    width: '100%',
    // position: 'absolute',
    // bottom: Platform.OS === 'ios' ? responsiveHeight(-5) : responsiveHeight(-6),
    // alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    // alignContent: 'center',
    // borderWidth: 1,
  },

  pagesTxt: {
    fontFamily: AppStyles.fonts.sfprotext_medium,
    color: AppStyles.colors.COLOR_FIREFLY,
    fontSize: responsiveWidth(4),
    // borderWidth: 1,
    alignSelf: 'center',
  },

  dotsContainer: {
    height: 12,
    borderWidth: 1,
    // position: 'absolute',
    // right: responsiveWidth(2),
    // bottom: -5,
    // alignContent: 'center',
    alignSelf: 'center',
    // alignItems: 'center',
  },
});

[Great-hijack]

Same issue for me. any solution yet?

[guibas741]

For those facing the same issue, I've fixed it by setting the style of the ImageBackground to be:

{
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}

[evillyf]

thanks a lot, that worked!!

[shoaibarif244]

In android/app/src/main/AndroidManifest.xml, in activity tag Change android:windowSoftInputMode="adjustResize" To android:windowSoftInputMode="adjustPan"

[UdayVinaik]

In android/app/src/main/AndroidManifest.xml, in activity tag Change android:windowSoftInputMode="adjustResize" To android:windowSoftInputMode="adjustPan"

This actually works, thanks