Uso el componente de entrada de la base nativa (v2). Cuando un usuario enfoca la entrada, el valor se aleja. El cursor de texto también desaparece.
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> ); };Perfil.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); }} />El comportamiento que estoy experimentando. iOS
He intentado darle más espacio para ver lo que está pasando, pero aún se desplaza fuera de la vista. Android parece estar bien. Eliminar el relleno y el margen de la entrada no tuvo ningún efecto. Tampoco forzarlo a tener una sola línea.
Descubrí que el problema fue causado por el componente Contenido. Simplemente quitándolo solucionó el problema.
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> ); };