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

Not sure to understand, if the user can't type text in the text input, why not use a button? — MaximumLasagna, Feb 15 '19 at 10:53
are you using any third party to open DatePicker? @StvNewsKaipamangalam — Patel Dhara, Feb 15 '19 at 11:27

score 56 · Answer 1 · answered Nov 19 '20 at 12:02

56

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>

answered Nov 19 '20 at 12:02

Kuldeep Saxena

1,803
1
14
17

1

this works for me because I also need it to be disable the TextInput, so only this answer works, thanks! – elblogdelbeto May 19 '21 at 07:13

score 19 · Accepted Answer · answered Feb 15 '19 at 11:17

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} />
}

score 3 · Answer 3 · answered Feb 15 '19 at 11:07

3

What you have to do is use onFocus and onBlur of TextInput.

<TextInput 
    onFocus={this.onFocus}
    onBlur={this.onBlur}
/>

onFocus = () => {
 // Open date picker
}

onBlur = () => {
 // Close date picker and add value to textinput
}

answered Feb 15 '19 at 11:07

Samitha Nanayakkara

2,529
2
10
23

Ram Rana · Answer 4 · 2021-10-20T12:00:07.583

3

You can make text input field read only by providing

 editable={false}
 pointerEvents="none"

prop to TextInput.

edited Oct 20 '21 at 12:00

answered Oct 20 '21 at 09:57

Ram Rana

194
6

score 0 · Answer 5 · answered Nov 04 '22 at 04:35

Wrap TextInput inside View and set pointerEvents="none", wrap that view with TouchableOpacity or any other Touchable Component. Please see below example!

<TouchableOpacity
  onPress={() => {
                    alert('hello');
                }}>
                <View pointerEvents="none">
                    <TextInput
                        onChange={() => {}}
                        value={''}
                        placeholder={waterMark}
                        editable={!isDisabled}
                        selectTextOnFocus={!isDisabled}
                    />
                </View>
</TouchableOpacity>

how to setup Onpress On Textinput in react-native

5 Answers5