V10 - KeyboardAwareScrollView - Too much space when there's not enough content

[LeoRedin]

Hey folks! It's me again. @frankcalise I noticed this weird behaviour on the Screen component while using the new Keyboard and Screen components.
I'll be trying more to fix this, but as of now I have no idea why there's that huge gap between the button and the keyboard.. I've set the screen to use Scroll preset.

From what I got its mostly an Android issue. I've just got myself a Mac and will be able to test tomorrow.

Thanks!

Here's how the code of this screen looks like:

<Screen
  preset={'scroll'}
  contentContainerStyle={themed($screenContentContainer)}
  safeAreaEdges={['bottom']}
>
  <View
    style={{
      marginTop: 12,
      flex: 1,
    }}
  >
    <Text
      size="xs"
      style={commonStyles.mb12}
      weight="semiBold"
      text="Reason for refusing service"
    />

    <View style={themed($cardStyle)}>
      <Dropdown<RefusalReasons>
        containerStyle={themed($dropdownContainer)}
        style={themed($dropdown)}
        data={refusalReasons}
        maxHeight={300}
        labelField="reason"
        valueField="reason"
        value={selectedReason}
        onChange={(item) => {
          setSelectedReason(item.reason);
        }}
        renderItem={({ reason }) => (
          <View style={themed($reasonItem)}>
            <Text>{reason}</Text>
          </View>
        )}
      />
    </View>

    <View style={themed($cardStyle)}>
      <TextField
        inputWrapperStyle={themed($textFieldWithoutStyle)}
        multiline
        placeholder="Add notes"
        onChangeText={(text: string) => setNote(text)}
        value={note}
        defaultValue={note}
        placeholderTextColor={colors.palette.textPlaceholder}
      />
    </View>
  </View>

  <View>
    <Button
      onPress={handleRefuseService}
      isLoading={updateCustomer.isPending}
      text="Save"
      disabled={shouldDisableSaveButton}
      disabledStyle={themed($disabledSave)}
    />
  </View>
</Screen>

const $cardStyle: ThemedStyle<ViewStyle> = ({ spacing, colors }) => ({
  backgroundColor: colors.palette.baseWhite,
  padding: spacing.md,
  borderRadius: spacing.sm,
  marginBottom: spacing.sm,
});

const $textFieldWithoutStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
  backgroundColor: colors.transparent,
  borderRadius: 0,
  borderWidth: 0,
});

const $dropdown: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
  borderWidth: 1,
  borderRadius: spacing.xs,
  borderColor: colors.palette.borderPrimary,
  padding: spacing.xs,
});

const $dropdownContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  padding: spacing.sm,
  borderRadius: spacing.xs,
});

const $reasonItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  paddingHorizontal: spacing.sm,
  marginBottom: spacing.xs,
});

const $disabledSave: ThemedStyle<ViewStyle> = () => ({
  opacity: 0.5,
});

[fpena]

Hello @LeoRedin ,

Thanks for reporting this.

One quick suggestion I can make without testing this code is to change the preset to auto.

You can also check LoginScreen.tsx which looks similar in layout to what you're trying to accomplish.

If you want me to dig further, please provide a working example.

[LeoRedin]

Hey! Thanks for reaching out, I'll be taking a better look into the Login screen then and make sure I'll use auto as well. Tomorrow with more testing I can give you an example so we can better investigate it.