React native TextInput isFocused method - react-native

Question

I want to change background image dynamically.I tried to know TextInput is focused or not with this way.Also I tried this.text.current.isFocused().But It didn't help me.Anyone knows?
text={};
renderDrawerContent(){
let image = this.text.isFocused() ? require('../assets/images/gyzyl.png') : require('../assets/images/BlackBack.jpg');
return(
<Container style={styles.containerDrawer}>
<ImageBackground
source={image}
style={{flex:1}}
resizeMode={'cover'}
>
<Content style={{ paddingTop: 0, }}>
<View style={{paddingTop: 20}}>
<View style={{flexDirection:'column' , marginVertical:5 ,padding:15}}>
<Text style={styles.search}>Search</Text>
<TextInput ref={ref => this.text=ref} autotFocus={this.state.Focused} underlineColorAndroid={'white'} placeholder='Cinema, Theatre, Concert ...' placeholderTextColor = '#fff' style={{color: '#fff', fontSize: 16 ,flex:1 , borderBottomColor: '#fff'}} />
</View>
</View>
</Content>
</ImageBackground>
</Container>
);
}

Answer 1

You can use the onFocus event from textinput to do this along with onBlur.
Using this method you should add to your state object a value that tracks if the input is focused.
<TextInput onFocus={()=> this.setState({inputFocused: true})} onBlur={()=> this.setState({inputFocused: false})}/>
then just use your inputFocused to check if the input is focused or not

Answer 2

An alternative that I got success.
const [themeInput, setThemeInput] = useState(false)
<TextInput
mode='outlined'
theme={{colors: {primary: `${colors.salmon}`, }}}
onFocus={() =>setThemeInput(true)}
onBlur={() =>setThemeInput(false)}
label="Email"
left={ <TextInput.Icon
name={() => <Feather name='mail' size={26}
color={ themeInput ? colors.salmon : colors.gray3} />} />}
/>