How to set TextInput above of the keyboard in React Native

user_12834917 0
Viewed 263

I am working on an app where I am handling a form but I have some serious problem actually when I click on TextInput then textinput disappear . I want to set TextInput above of the keyboard . Thanks

enter image description here

Code

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;
`;
react-native reactjs ecmascript-6 javascript
1 Answers

You could try wrapping your parent container with all the textfields in a so called KeyboardAvoidingView.

Here is an example:

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'
    }
});
user_129003610
Related