How to apply click event on TextInput in react native

[ajaysaini-sgvu]

Hi I am using TextInput in my react native application. I want to open Date Dialog on clicking on TextInput. I am using TouchableOpacity to do some tricky stuff. I observed that it automatically calls onPress on loading my component every time but it doesn't when I explicitly press on it.

<TouchableOpacity onPress={console.log("Pressed")}>
  <TextInput
    style={{
      height: 40,
      borderColor: "gray",
      borderWidth: 1,
      marginTop: 8
    }}
    underlineColorAndroid="transparent"
    placeholder={strings.schedule_date}
  />
</TouchableOpacity>

Does anyone know any work around for this issue ?

[Amwam]

@ajaysaini-sgvu This is a question better suited for stack overflow

However, to answer your question, onPress accepts a function

<TouchableOpacity onPress={() => console.log("Pressed")}>
...

The function is called when the component is pressed.
In your example you are assigning the output of console.log("Pressed") to the onPress handler, so it is evaluated when the components are rendered.

[ajaysaini-sgvu]

@Amwam Thanks for your reply. I already tried suggested solution. It didn't work for me. Looks like something is broken with react native itself.

<TouchableOpacity onPress={() => console.log("Pressed")}>
  <TextInput
    style={{
      height: 40,
      borderColor: "gray",
      borderWidth: 1,
      marginTop: 8
    }}
    underlineColorAndroid="transparent"
    placeholder={strings.schedule_date}
  />
</TouchableOpacity>    

[Amwam]

@ajaysaini-sgvu I've just noticed you are using a TextInput, you should be using just Text for this, as the TextInput will likely have its own handling for press events (i.e. on the native side showing the keyboard).

If your are still having problems, a post on stack overflow will allow for better feedback.

[Mehran-khan-memon]

Add pointerEvents="none" on TextInput

Example

<TouchableOpacity onPress={() => console.log("Pressed")}>
  <TextInput
   pointerEvents="none"
  />
</TouchableOpacity>

[bezsinnyidmytro]

Need to do something like this:

<TouchableOpacity onPress={() => { this.refs['input'].focus() }}>
  <TextInput
   pointerEvents="none"
   onEndEditing={() => { change state value }}
  />
  <Image /> // for any icon-picture
</TouchableOpacity>

thus Opacity work on any touch, but pointerEvents='none' doesn't work in this case, when tap on TextInput opacity efect doesn't appear.
Any suggestions, how to fix or workaround?

[azwar]

You can trigger event using onTouchStart. So TouchableOpacity is not needed. Here it is:

 <TextInput
    onTouchStart={()=>  alert("Hello...")}
    editable={false}
    placeholder="Please enter your text" />

[Laslo89]

Thx @azwar ! that really saved me. I somehow missed this method. Answering old posts does matter! ;)

[azwar]

You are welcome @Laslo89 . Be careful when you use it on Android. onTouchStart seems not working on Android.

[prdpklyn]

Thanks @azwar any work around for android??

[azwar]

@prdpsdfc The best method is using TouchableOpacity

[prdpklyn]

Thanks @azwar i started with TouchableOpacity however the place holder text is showing only few characters

[azwar]

@prdpsdfc you can set editable InputText as false and set the text programatically rather than using placeholder, if it is not a must.

[snehaChaudhari]

thanx @azwar It's working.!!!

[wesleyfc]

thank you @azwar TouchableOpacity worked on Android and onTouchStart worked on IOS, so i used both in my code and got the results. :)

<TouchableOpacity onPress={() => this.setState({ isTimeStartVisible: true })}>
<Input editable={false} onTouchStart={() => this.setState({ isTimeStartVisible: true })} value={this.state.timeStart} />

[pppluto]

@Mehran-khan-memon 🍺