title: React native card (native base) onPress doesn't work
body: <p>I want to display cards with news from a JSON file.
  Getting the JSON works fine, but I want to add a onPress event, so I can click the card and navigate to the article.</p>
  
  <p>My card view:</p>
  
  <pre><code>&lt;Card&gt;
    &lt;CardItem button onPress={this._OnButtonPress(news.id)}&gt;
      &lt;Left&gt;
        &lt;Body&gt;
          &lt;Text style={styles.cardText}&gt;{news.title}&lt;/Text&gt;
        &lt;/Body&gt;
      &lt;/Left&gt;
    &lt;/CardItem&gt;
    &lt;CardItem&gt;
      &lt;Left&gt;
          &lt;Icon style={styles.icon} name="chatbubbles" /&gt;
          &lt;Text&gt;{news.comments} comments&lt;/Text&gt;
      &lt;/Left&gt;
      &lt;Right&gt;
        &lt;Text&gt;{news.published}&lt;/Text&gt;
      &lt;/Right&gt;
    &lt;/CardItem&gt;
  &lt;/Card&gt;
  </code></pre>
  
  <p>I am trying to pass a variable to the onButtonPress() function</p>
  
  <pre><code>_OnButtonPress(newsID) {
    Alert.alert(newsID.toString());
  }
  </code></pre>
  
  <p>To test the onPress event, all I did is alert the parameter.</p>
  
  <p><a href="https://i.stack.imgur.com/dp1of.png" rel="noreferrer">I don't see anything wrong, but still I got this error</a></p>
  
  <p>Does anyone know how I can fix this and what Im doing wrong here.
  Thanks in advance.</p>
  
  <p><strong>Update</strong></p>
  
  <p>My updated class:</p>
  
  <pre><code>import React, { Component } from "react";
  import {
    Image,
    ListView,
    StyleSheet,
    Text,
    View,
    Alert
  } from 'react-native';
  
  import {
    Container,
    Header,
    Left,
    Right,
    Button,
    Card,
    CardItem,
    Icon,
    Body,
    Content,
    Logo
  } from 'native-base';
  
  import styles from "./styles";
  
  const logo = require("../../../img/f1today.png");
  
  var REQUEST_URL = 'http://v2.first-place.nl/test/news.json';
  
  class News extends Component {
    constructor(props) {
      super(props);
  
      this._OnButtonPress = this._OnButtonPress.bind(this);
  
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) =&gt; row1 !== row2,
        }),
        loaded: false,
      };
    }
  
    _OnButtonPress(newsID) {
      Alert.alert(newsID.toString());
    }
  
    componentDidMount() {
      this.fetchData();
    }
  
    fetchData() {
      fetch(REQUEST_URL)
        .then((response) =&gt; response.json())
        .then((responseData) =&gt; {
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(responseData.articles),
            loaded: true,
          });
        })
        .done();
    }
  
    render() {
  
      if (!this.state.loaded) {
        return this.renderLoadingView();
      }
  
      return (
        &lt;Container style={styles.container}&gt;
          &lt;Header
            style={{ backgroundColor: "#fff" }}
            androidStatusBarColor="#f05423"
            iosBarStyle="light-content"&gt;
  
          &lt;Left&gt;
            &lt;Button
              transparent
              onPress={() =&gt; this.props.navigation.navigate("DrawerOpen")}
            &gt;
              &lt;Icon name="ios-menu" style={{color: 'black'}} /&gt;
            &lt;/Button&gt;
          &lt;/Left&gt;
          &lt;Body&gt; 
            &lt;Image source={logo} style={styles.headerLogo} /&gt;
          &lt;/Body&gt;
          &lt;Right /&gt;
  
        &lt;/Header&gt;
  
        &lt;Content padder&gt;
  
          &lt;ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderNews}
            style={styles.listView}
          /&gt;
  
        &lt;/Content&gt;
      &lt;/Container&gt;
      );
    }
  
    renderLoadingView() {
      return (
        &lt;View style={styles.loading}&gt;
          &lt;Text&gt;
            Loading news...
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  
    renderNews(news) {
      return (
        &lt;Card&gt;
          &lt;CardItem button onPress={()=&gt; this._OnButtonPress(news.id)}&gt;
            &lt;Left&gt;
              &lt;Body&gt;
                &lt;Text style={styles.cardText}&gt;{news.title}&lt;/Text&gt;
              &lt;/Body&gt;
            &lt;/Left&gt;
          &lt;/CardItem&gt;
          &lt;CardItem&gt;
            &lt;Left&gt;
                &lt;Icon style={styles.icon} name="chatbubbles" /&gt;
                &lt;Text&gt;{news.comments} comments&lt;/Text&gt;
            &lt;/Left&gt;
            &lt;Right&gt;
              &lt;Text&gt;{news.published}&lt;/Text&gt;
            &lt;/Right&gt;
          &lt;/CardItem&gt;
        &lt;/Card&gt;
      );
    }
  }
  
  export default News;
  </code></pre>