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 software 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 either side that look fairly unhealthy. I’ve hooked up a picture.

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

iOS

That is for the password TextInput

Android

That is the TextInput code

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

And that is the kinds

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

That is password TextInput code:

<TextInput
  fashion={[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!