Keyboard issues in React Native

good afternoon.

I am having an issue with the keyboard in an app I am growing. Since all of the content material would not match on a single display screen, I would like to make use of KeyboardAvoidingView together with ScrollView in order that when a TextInput has focus, your complete utility scrolls up and the keyboard would not overlap the TextInput. Thus far, so good. The issue is that when the keyboard seems, it creates borders on each side that look fairly unhealthy. I’ve hooked up a picture.

This solely occurs on iOS; on Android the keyboard seems appropriately.

iOS

That is for the password TextInput

Android

That is the TextInput code

<TextInput
    model={kinds.enter}
    placeholder={t("auth.fields.electronic mail")}
    placeholderTextColor="#9aa5b1"
    worth={electronic mail}
    onChangeText={setEmail}
    keyboardType="email-address"
    autoCapitalize="none"
    autoCorrect={false}
    autoComplete="electronic mail"
  />

And that is the kinds

enter: {
    backgroundColor: "#0f1216",
    borderRadius: 14,
    paddingHorizontal: 14,
    paddingVertical: 14,
    coloration: "#e5e7eb",
    fontSize: 15,
    marginBottom: 14,
    borderWidth: 1,
    borderColor: "#1f2937",
  },

That is password TextInput code:

<TextInput
  model={[styles.input}
  placeholder={t("auth.fields.password")}
  placeholderTextColor="#9aa5b1"
  secureTextEntry={!showPassword}
  onBlur={() => setShowPassword(false)}
  value={password}
  onChangeText={setPassword}
/>

Does anyone know what might be happening and how I can fix it?

Thanks a lot!