What's my mistake when using ternany operator with isTextInputFocused property in react-native? - react-native

Question

I have a textInput. When i click on the textInput, i want "Search Icon" to be passive, but when i dont click on the textInput, i want "Search Icon" to be active,
Its strangely not doing what I want. As I look at my code, it looks correct, but i must have something wrong because it doesnt work as i wanted.(not giving an error tho)
App.js
import React from 'react';
import { StyleSheet, Text, View, TextInput, isTextInputFocused } from 'react-native';
import Search from "./src/icons/search.svg";
import {Loupe} from "./src/icons/loupe.png";
const App = () => {
return (
<View style={styles.container}>
<View style={styles.firstPart}>
<Text style={styles.date}>Saturday, Feb 21</Text>
<View style={styles.package}>
<Text style={styles.packageText}>Your Package</Text>
<View style={styles.plusIcon}>
<Text style={styles.textPlus}>+</Text>
</View>
</View>
{isTextInputFocused ? (<Search height={25} width={20} fill={"#00FF00"} style={{ position: "absolute", top: 90, left: 30, zIndex: 0 }} />):
(<Search height={25} width={20} fill={"#A9A9A9"} style={{ position: "absolute", top: 90, left: 25, zIndex: 20 }}/>)}
<TextInput style={styles.input} placeholder="Search" placeholderTextColor="gray"></TextInput>
</View>
{/* { !isTextInputFocused && (<View>
<Search height={30} width={30} fill={"#00FF00"} />
</View>)} */}
</View>
);
};
const styles = StyleSheet.create({
container:{
margin:10,
},
firstPart:{
backgroundColor: "mediumblue",
borderTopRightRadius:40,
borderTopLeftRadius:40,
padding:20,
},
date:{
fontSize:15,
color:"white",
},
package:{
flexDirection: "row",
justifyContent: "space-between",
},
packageText: {
fontSize:25,
color:"white",
flexDirection: "column",
},
plusIcon: {
height:25,
width:25,
borderRadius:25,
backgroundColor:"blue",
marginTop:5,
},
textPlus: {
fontSize:25,
fontWeight:"bold",
color:"white",
marginLeft:5,
},
input: {
height:40,
borderWidth:.5,
borderRadius:10,
marginVertical:10,
backgroundColor:"darkslateblue",
padding:5,
}
});
export default App;

Answer 1

You can use the TextInput component's onFocus, onBlur props to focus information on an input. Sample code is available below.
const [text, setText] = useState("")
const [inputFocus, setFocus] = useState(false)
return (
<View style={styles.container}>
<Text>
{inputFocus ? "Focused" : "Not Focused"}
</Text>
<TextInput
value={text}
onChangeText={setText}
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
style={{
width: "100%",
height: 44,
backgroundColor: "gray"
}}
/>
</View>
)