Hoshi label color to change on Focus?

[gaurav-psych]

I want to change the label color when the input field is focused or user taps and tries to enter text. Is it possible?

[halilb]

Hi @gaurav-psych,

You'd need to pass labelStyle prop to change the label color. And you may listen onFocus onBlur methods to have a focused state.

So something like this should work. I haven't tried it but you'd probably achieve what you want with a few changes:

import React, { useState } from 'react'
import { Hoshi } from 'react-native-textinput-effects';

const [isFocused, setIsFocused] = useState(false)
const labelColor = isFocused ? 'red' : 'yellow'

const hoshiInput = (
  <Hoshi
    labelStyle={{
      color: labelColor,
    }}
    label={'Town'}
    // this is used as active border color
    borderColor={labelColor}
   onBlur={() => setIsFocused(false)}
   onFocus={() => setIsFocused(true)}
  />
);