FormInput.tsx

import { View, Text, StyleSheet, TextInput } from "react-native";
import React from "react";

interface FormInputProps {
  placeholder?: string;
  title: string;
}

const FormInput = (props: FormInputProps) => {
  const [value, setValue] = React.useState<string>("");
  const inputHandler = (val: string) => {
    setValue(val);
  };
  return (
    <View style={style.formInputContainer}>
      <Text style={style.formInputLabel}>{props.title}</Text>
      <TextInput
        value={value}
        style={style.formInput}
        placeholder={props.placeholder}
        onChangeText={inputHandler}
      />
    </View>
  );
};

const style = StyleSheet.create({
  formInputContainer: {
    display: "flex",
    flexDirection: "column",
    marginTop: 10,
    marginBottom: 15,
  },
  formInputLabel: { marginBottom: 5 },
  formInput: {
    borderWidth: 1,
    borderColor: "#E5E5E5",
    padding: 5,
    fontSize: 17,
    borderRadius: 10,
  },
});

export default FormInput;