KeyboardAwareScrollView Resizing Screen Height

[SaegusaMayumi1234]

Describe the bug I'm not sure if this is a bug or expected behaviour, but KeyboardAwareScrollView resizing the screen. Is there a way to make it not resizing the screen height? Thank you so much to look into this issue!

Code snippet

interface ILoginProps {}

export const TestScreen: React.FC<ILoginProps> = observer(function TestScreen(props) {
  console.log('Re render');
  const login = () => {
    console.log('test');
  };
  return (
    <>
      <KeyboardAwareScrollView
        // bottomOffset={10}
        contentContainerStyle={{ flexGrow: 1 }}
        style={{ flexGrow: 1 }}>
        <View style={styles.container}>
          <View style={styles.centerContainer}>
            <Text style={styles.title}>Test Form</Text>
            <CustomTextInput label='test' />
            <HelperText style={{ alignSelf: 'flex-start' }} type='error' visible>
              invalid!
            </HelperText>
            <CustomTextInput isSecureInput label='test' />
            <View style={styles.forgotPasswordContainer}>
              <HelperText type='error' visible>
                invalid!
              </HelperText>
              <Pressable onPress={() => console.log('test')}>
                <Text style={{ ...styles.touchableText, fontSize: 12 }}>testm text?</Text>
              </Pressable>
            </View>
            <Button
              mode='contained'
              buttonColor={COLOR.PRIMARY}
              textColor='white'
              style={styles.button}
              onPress={login}>
              Login
            </Button>
            <View style={styles.accountCreateContainer}>
              <Text style={{ fontSize: 12 }}>tttt</Text>
              <Pressable onPress={() => console.log('test')}>
                <Text style={styles.touchableText}>ttttt</Text>
              </Pressable>
            </View>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'column',
                position: 'absolute',
                bottom: 30,
              }}>
              <View style={styles.iconContainer}>
                <Image
                  style={styles.icon}
                  source={require('../../assets/images/adaptive-icon.png')}
                />
              </View>
              <Text style={{ fontWeight: '600', fontSize: 20 }}>Text</Text>
            </View>
          </View>
          <StatusBar style='auto' />
        </View>
      </KeyboardAwareScrollView>
    </>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  centerContainer: {
    flex: 1,
    margin: 5,
    width: '80%',
    alignItems: 'center',
    // minHeight: Dimensions.get('window').height * 0.8,
  },
  forgotPasswordContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  accountCreateContainer: {
    flexDirection: 'row',
    columnGap: 5,
    // marginBottom: 100,
  },
  title: {
    fontWeight: '600',
    fontSize: 40,
    marginVertical: 40,
  },
  textInput: {
    width: '100%',
    height: 50,
  },
  button: {
    width: '100%',
    height: 40,
    marginTop: 60,
  },
  touchableText: {
    color: COLOR.PRIMARY,
    fontWeight: '600',
    fontSize: 12,
  },
  iconContainer: {
    width: 200,
    alignItems: 'flex-end',
    marginBottom: -25,
  },
  icon: {
    flex: 0,
    height: 50,
    width: 50,
    transform: [
      {
        rotate: '-25deg',
      },
    ],
  },
});

Repo for reproducing

• none

To Reproduce Steps to reproduce the behavior:

1. Click on TextInput

Expected behavior The "Text" should stay in bottom like image below

Screenshots But the problem it does like below:

Smartphone (please complete the following information):

• Desktop OS: Windows 11
• Device: Emulator Pixel 3a (Android Studio)
• OS: Android 14
• RN version: 0.73.6
• RN architecture: new
• JS engine: Hermes, v8
• Library version: 1.11.5

Additional context I did some nasty fix to add like minHeight: Dimensions.get('window').height * 0.8, in centerContainer style so the container doesn't get resizing

[kirillzyusko]

Hello @SaegusaMayumi1234

I think you are referring to https://github.com/kirillzyusko/react-native-keyboard-controller/issues/168

Basically it happen because of https://github.com/kirillzyusko/react-native-keyboard-controller/blob/2e66fa016a29ce33b19712399f88b92e39fdb8c9/src/components/KeyboardAwareScrollView/index.tsx#L328

Which is located in ScrollView and when keyboard appears -> it increases its own height and all yours element gets pushed...

The ideal solution would be to add such padding simply as an additional padding/inset to ScrollView. On iOS it's doable with contentInset property, but on Android there is no alternatives (as far as I know).

The fix with minHeight may sound as a reasonable one (it will prevent content resize).

But if you have other ideas on how to fix this problem - please share them here 🙌 I'll be glad to hear them 😊

[SaegusaMayumi1234]

Thank you so much for your reply! But I think I'll just go with pre-calculate the display size before the keyboard open and adding height of the container. I guess you can close this issue for now.

[kirillzyusko]

Thank you @SaegusaMayumi1234 for your suggestion!

Yeah, I will close this issue and will post another workaround (with minHeight) in original issue 🙌