import React, {useState} from 'react';
import {StyleSheet, Dimensions} from 'react-native';
import UITextInput from 'reactnative-custom-textinput-v1.2';

const App = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <UITextInput
      value={inputValue}
      onChangeText={setInputValue}
      placeholder="Enter something"
      isValid={inputValue.trim().length > 0}
      warning="* Field Mandatory"
      UIInputStyle={InputStyle.customInputText}
      UIWarningStyle={InputStyle.customWarningText}
      UIContainerStyle={InputStyle.customContainer}
      UIEmptyBorderStyle={InputStyle.emptyBorder}
      UINonEmptyBorderStyle={InputStyle.nonEmptyBorder}
    />
  );
};
const {width, height} = Dimensions.get('window');

const InputStyle = StyleSheet.create({
  customContainer: {
    flex: 1,
    // Add custom container styles here
  },
  customInputText: {
    fontSize: 20,
    borderRadius: 10,
    width: width * 0.8,
    height: height * 0.07,
    // Add custom container styles here
  },
  customWarningText: {
    fontSize: 14,
    color: '#f00',
    // Add custom warning text styles here
  },
  emptyBorder: {
    borderColor: 'red',
    //Add custom empty border styles here
  },
  nonEmptyBorder: {
    borderColor: 'green',
    // Add custom non-empty border styles here
  },
});
export default App;