On iOS native-base input scrolls away(hiding) when keyboard is shown

Question

I use the input component from native-base (v2). When a user focuses the input, the value scrolls away. The text cursor also disappears.

InputField.js

const InputField = ({
  style,
  iconStyle,
  labelStyle,
  type,
  value,
  disabled,
  label,
  placeholder,
  onChangeText,
}) => {
  return (
    <Item style={[style]}>
      <Icon style={[iconStyle]} active name={type.icon} type={type.iconType} />
      <Label style={[labelStyle]}>{label}</Label>
      <Content
        contentContainerStyle={{
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <Input
          value={value}
          disabled={disabled}
          autoCompleteType={type.autoCompleteType}
          autoCorrect={type.autoCorrect}
          autoCapitalize={type.autoCapitalize}
          keyboardType={type.keyboardType}
          onChangeText={onChangeText}
          secureTextEntry={type.secureTextEntry}
          maxLength={type.maxLength}
          placeholder={placeholder}
        />
      </Content>
    </Item>
  );
};

Profile.jsx

<InputField
                style={{ flex: 1, flexDirection: "row" }}
                labelStyle={{ flex: 1 }}
                type={InputFieldTypes.City}
                value={city}
                label={I18n.t("profile.city") + ":"}
                onChangeText={(text) => {
                  setCity(text);
                  setEdit(true);
                }}
              />

The behaviour I'm experiencing. iOs

I have tried giving it more space to see what is going on, but it still scrolls out of view. Android seems fine. Remove padding and margin from input had no effect. Neither did forcing it to only have one line.

Answer 1

I found out that the issue was caused by the Content component. Just removing it fixed the issue.

const InputField = ({
  style,
  iconStyle,
  labelStyle,
  type,
  value,
  disabled,
  label,
  placeholder,
  onChangeText,
}) => {
  return (
    <Item style={[style]}>
      <Icon style={[iconStyle]} active name={type.icon} type={type.iconType} />
      <Label style={[labelStyle]}>{label}</Label>
      
        <Input
          value={value}
          disabled={disabled}
          autoCompleteType={type.autoCompleteType}
          autoCorrect={type.autoCorrect}
          autoCapitalize={type.autoCapitalize}
          keyboardType={type.keyboardType}
          onChangeText={onChangeText}
          secureTextEntry={type.secureTextEntry}
          maxLength={type.maxLength}
          placeholder={placeholder}
        />

    </Item>
  );
};