In my react-native mobile app I have written a ponent called Row in row.js that contains a TouchableOpacity with an onClick() event handler. However when the ponent is clicked the function doesn't run.

The Row ponent displays some text about a particular film and should run the handlePress() function when clicked:

const Row = props => (
  <TouchableOpacity onClick={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

In a separate app.js file, the handlepress function has been written and is passed to the Row ponent as a prop. The imdbID variable is also passed to the ponent from the film object:

handlePress = imdbID => {
  // do something with imdbID
}

<Row handlePress={this.handlePress} {...film} />

Please can someone tell me what I am doing wrong and why the function doesn't run.

In my react-native mobile app I have written a ponent called Row in row.js that contains a TouchableOpacity with an onClick() event handler. However when the ponent is clicked the function doesn't run.

The Row ponent displays some text about a particular film and should run the handlePress() function when clicked:

const Row = props => (
  <TouchableOpacity onClick={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

In a separate app.js file, the handlepress function has been written and is passed to the Row ponent as a prop. The imdbID variable is also passed to the ponent from the film object:

handlePress = imdbID => {
  // do something with imdbID
}

<Row handlePress={this.handlePress} {...film} />

Please can someone tell me what I am doing wrong and why the function doesn't run.

• javascript
• reactjs
• react-native

5 Answers 5

If you take a look at the docs, it doesnt have onClick.

You should use onPress.

const Row = props => (
  //          using onPress
  <TouchableOpacity onPress={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

React-Native doesnt provide onClick functionality , it gives onPress instead , so replace onClick with onPress

const Row = props => (
  <TouchableOpacity onPress={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

hope this helps ,feel free for doubts

Use onPress() instead of of onClick()

improved code

const Row = props => (
  <TouchableOpacity onPress={()=> props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

Use onPress instead of onClick and be sure you are importing touchable from react-native not gesture-handler

React native does not have onClick for TouchableOpacity. Use onPress instead.