CODEWITHSUNDEEP
react-nativetextinputonpress
Savad
Savad

Reputation: 1314

how to setup Onpress On Textinput in react-native

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

Upvotes: 30

Views: 30822

Answers (5)

Lovekush Vishwakarma
Lovekush Vishwakarma

Reputation: 3169

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>

Upvotes: 1

Ram Rana
Ram Rana

Reputation: 204

You can make text input field read only by providing

 editable={false}
 pointerEvents="none"

prop to TextInput.

Upvotes: 4

Kuldeep Saxena
Kuldeep Saxena

Reputation: 2003

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>

Upvotes: 71

Naveen Vignesh
Naveen Vignesh

Reputation: 1359

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

Upvotes: 19

Samitha Nanayakkara
Samitha Nanayakkara

Reputation: 2497

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
}

Upvotes: 3

Related Questions