CODEWITHSUNDEEP
androidreact-native
N Sharma
N Sharma

Reputation: 34497

How to apply click event on TextInput in react native

Hi I am using TextInput in my react native application. I want to open Date Dialog on clicking on TextInput. I didn't find any work around to apply click event on TextInput. Does anyone know how to do this in react native ?

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

Upvotes: 11

Views: 20159

Answers (4)

Bisma Azher
Bisma Azher

Reputation: 749

use onTouchStart property to call any function on click event

 <TextInput
      style={{
        height: 40,
        borderColor: "gray",
        borderWidth: 1,
        marginTop: 8
      }}
      underlineColorAndroid="transparent"
      placeholder={strings.schedule_date}
      onKeyPress={keyPress => console.log(keyPress)}
    onTouchStart={() => "Call your function here"}
    />

Upvotes: 0

Hardy Android
Hardy Android

Reputation: 865

One more way to perform TextInput click

TextInput onTouchStart

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

Upvotes: 11

user8861187
user8861187

Reputation:

Add pointerEvents="none" on TextInput

Example

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

Upvotes: 26

xavimb
xavimb

Reputation: 195

You can use the onFocus prop to know when the user has selected that TextInput.

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

Unless you have autofocus={true}, this will work. You can find more documentation about onFocus here:

https://facebook.github.io/react-native/docs/textinput.html#onfocus

Upvotes: 9

Related Questions