React Native TextInput showing undefined on android - react-native

Question

I am using passing function as prop to a component and updating the state of textinput on change.
It is working fine on the web browser and alert the same input written but when I run it on my android device using expo client.
It alerts undefined instead of the actual input.
My piece of code is:
//Main Component
const [search, setsearch] = useState('');
const searchinput = (inp) => {
setsearch(inp.target.value);
alert(search);
};
<Nav Search={searchinput} inpValue={search} Click={() => searchapi()} />
//Nav Component
<TextInput
value={props.inpValue}
onChange={props.Search}
style={{height: 25, width: 100, borderColor: 'white', borderWidth: 0}}
/>

Answer 1

You can do something like this:
const Nav = (props) => {
return (
<TextInput
value={props.inpValue}
onChange={props.Search}
style={{height: 125, width: 100, borderColor: 'black', borderWidth: 1}}
/>
);
};
export default function App() {
const [search, setsearch] = React.useState('');
React.useEffect(() => {
alert(search);
}, [search]);
const searchinput = (inp) => {
setsearch(inp.nativeEvent.text);
};
return <Nav Search={searchinput} inpValue={search} />;
}
Here the current TextInput text value is retrieved inside the onChange using inp.nativeEvent.text.
https://reactnative.dev/docs/textinput.html#onchange
I've also added a useEffect hook that correctly tracks the current value of the search state. With the way you were accessing the search state after updating it, you can't be sure that you're actually referring to current value of the TextInput