how to setup Onpress On Textinput in react-native

Question

I am developing an app on react native. I want to call a date picker when i press on a Text-Input and after selecting a date it should show on the Text-Input

Answer 1

Wrap TextInput into a view and set pointerEvents as none. Now you can use Pressable component from react-native to listen to the onpress event.

<Pressable onPress={() => alert('Hi!')}>
 <View pointerEvents="none">
  <TextInput />
 </View>
</Pressable>

Answer 2

You cannot explicitly call onPress for TextInput. You could only use. onFocus which will be called when you press the input box to get cursor over there. No need to focus on onBlur as your use case doesn't required.. Handle close within onFocus if possible.

onFocus = () => {
  // do something
}

render() {
  <TextInput onFocus={onFocus} />
}

Answer 3

You can make text input field read only by providing

 editable={false}
 pointerEvents="none"

prop to TextInput.