How to change border color when focus on a nativebase TextArea Component on focus?-CodePudding

im using Native base for a react app and the problem Im having is that the _focus={{}} on the TextArea component is no working. I let the code down here, it would be really appreciated if anyone knows how to make it work. Thanks!

import React from 'react';

import { TextArea } from 'native-base';

function TextAreaComponent({
  height = '20',
  placeholder,
  width = '75%',
  maxWidth = '300',
  isInvalid = false,
  isDisabled = false,
  backgroundColor = '#F4F4F6',
  borderColor = '#E1E0E6',
  borderWidth = '1px',
  color = '#73737D',
  fontSize = '14px',
  numberOfLines = '4',
}) {
  return (
    <TextArea
      height={height}
      placeholder={placeholder}
      width={width}
      maxWidth={maxWidth}
      isInvalid={isInvalid}
      isDisabled={isDisabled}
      backgroundColor={backgroundColor}
      borderColor={borderColor}
      color={color}
      borderWidth={borderWidth}
      fontSize={fontSize}
      numberOfLines={numberOfLines}
      _focus={{ borderColor: 'white' }}
      // _focus={{ borderColor: '#fff' }} //? focus here left to implement.

    />
  );
}

export default TextAreaComponent;

CodePudding user response：

I'm not too familiar with codebase but I assume that the _focus prop is the same as onFocus for the Input component in react-native.

Here is an example how to the onFocus:

<Input
   ...
   onFocus={() => {
     updateBorderColor({ borderColor: 'white' });
   }}
/>

Maybe try to follow the same logic for the _focus?