KeyboardAvoidingView портит флексбокс ⇐ CSS

[Anonymous]

У меня есть следующий код:

Код: Выделить всё

  return (








{Strings.Welcome}





 submitLogin()}
>
{Strings.LoginBtn}

Со следующим стилем:

Код: Выделить всё

const style = StyleSheet.create({
flex1: {
flex: 1,
},
imageContainer: {
flex: 1,
},
image: {
width: "100%",
height: "100%",
},
blackOpacity: {
...StyleSheet.absoluteFillObject,
backgroundColor: "black",
opacity: 0.6,
},
contentContainer: {
flex: 2,
backgroundColor: Colors.opacityBlack,
alignItems: "center",
},
welcomeHeader: {
fontFamily: getFontFamily("Heebo", "600"),
textAlign: "right",
fontSize: scaleFontSize(40),
marginTop: verticalScale(10),
color: Colors.white,
},
fieldsContainer: {
flex: 5,
alignItems: "center",
flexDirection: "column",
justifyContent: "space-between",
},
loginBtn: {
justifyContent: "center",
backgroundColor: Colors.submitPurple,
marginBottom: verticalScale(120),
},
disabled: {
opacity: 0.5,
},
loginBtnText: {
fontFamily: getFontFamily("Heebo", "500"),
fontSize: scaleFontSize(20),
textAlign: "center",
color: Colors.black,
},
itemContainer: {
width: horizontalScale(250),
height: verticalScale(40),
borderRadius: horizontalScale(20),
},
});

Когда клавиатура закрыта, все выглядит нормально:


Но когда я открываю клавиатуру, все вводимые данные сближаются и не сохраняются пробелы между каждым элементом:


Как сохранить пространство между элементы, даже когда клавиатура открыта?
Я пытался изменить поведение на положение или поместить KeyboardAvoidingView внутри основного представления, но это не сработало.
Также пытался поместить все в ScrollView, но это разрушило весь экран.

Подробнее здесь: https://stackoverflow.com/questions/782 ... he-flexbox