Как установить TextInput над клавиатурой в React Native

Question

Я работаю над приложением, в котором я работаю с формой, но у меня возникает серьезная проблема, когда я нажимаю TextInput, тогда текстовый ввод исчезает. Я хочу установить TextInput выше клавиатуры. Спасибо

Код

import React from "react";
import styled from "styled-components";
import { Platform } from "react-native";

const Fields = ({ placeholderData }) => {
  return (
    <FieldContainer>
      <TextField
        placeholder={placeholderData}
        placeholderTextColor="#0b4975"
        secureTextEntry={
          placeholderData === "Password" ||
          placeholderData === "Confirm Password"
            ? true
            : false
        }
      />
    </FieldContainer>
  );
};

export default Fields;

const FieldContainer = styled.View`
  width: 300px;
  margin-top: 20px;
`;

const TextField = styled.TextInput`
  border: 1px solid #0b4975;
  border-radius: 50px;
  padding: ${Platform.OS === "ios" ? "15px" : "8px"};
  margin-left: 20px;
  padding-left: 30px;
`;

Answer 1

Вы можете попробовать обернуть ваш родительский контейнер со всеми текстовыми полями в так называемый KeyboardAvoidingView.

Вот пример:

import {StyleSheet, KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView behavior='padding' keyboardVerticalOffset={50} style={styles.screen}>
     // Add all your FieldContainers here
</KeyboardAvoidingView>

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});