import React, { useRef, useState } from 'react';
import { View, Button } from 'react-native';
import { InputOutline, InputStandard } from 'react-native-input-outline';

export default () => {
  const inputRef = useRef<InputOutline>(null); // fully TypeScript enabled
  const [error, setError] = useState<string | undefined>(undefined);

  const showError = () => {
    setError('This is your error message!');
  };

  const hideError = () => {
    setError(undefined);
  };

  return (
    <View>
      <InputOutline
        ref={inputRef}
        error={error} // wont take effect until a message is passed
      />

      <InputStandard /> 

      <Button onPress={showError} title="Set Input Error" />
    </View>
  );
};