React Native -Why does the Touchable Highlight press automatically?

Question

When I run the application the TouchableHighlight onPress event is called automatically. Also the button does not change color on, onPress event. Here is the code,

    import React, { Component } from 'react';
    import formatTime from 'minutes-seconds-milliseconds';

    import {
    AppRegistry,
    StyleSheet,
    Text,
    TouchableHighlight,
    View
    } from 'react-native';

    class Stopwatch extends Component {

    constructor(props) {
    super(props);
    this.state = {
      timerRunning: true,
      timeDisplayed: null,
    }
    }

    _onPressStart() {
    console.log('start button')
    /*setInterval(function(){ alert("Hello Start"); }, 3000);*/
    }

    _onPressLap() {
    console.log('lap button')
    /*setInterval(function(){ alert("Hello Lap"); }, 3000);*/
    }

    render() {
     return (
      <View style={styles.overallContainer}>
        <View style={styles.upperContainer}>
          <View style={styles.timeCover}>
            <Text style={styles.timeWrapper}>
              {formatTime(this.state.timeDisplayed)}
            </Text>
          </View>
          <View style={styles.buttonCover}>
            <TouchableHighlight style={styles.button} onPress = {this._onPressStart()}>
              <Text>Start</Text>
            </TouchableHighlight>
            <TouchableHighlight style={styles.button} onPress = {this._onPressLap()}>
              <Text>Lap</Text>
            </TouchableHighlight>
          </View>
        </View>
        <View style={styles.lapCover}>
          <Text>
            List of laps
          </Text>
        </View>
    </View>
    );
    }
    }

    const styles = StyleSheet.create({

    overallContainer: {
    flex: 1,
    },

    upperContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    borderWidth: 4,
    borderColor: 'yellow',
    },
    timeWrapper: {
    fontSize: 50,
    },
    startWrapper: {
    fontSize: 20,
    },
    lapWrapper: {
    fontSize: 20,
    },
    timeCover: {
    flex:5,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'red',
    },
    buttonCover: {
    flex:3,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'green',
    },
    lapCover: {
    flex:1,
    borderWidth: 4,
    borderColor: 'blue',
    },
    button: {
    borderRadius: 50,
    borderWidth: 2,
    height:100,
    width:100,
    justifyContent: 'center',
    alignItems: 'center'
    }
    });

    AppRegistry.registerComponent('Stopwatch', () => Stopwatch);

When I execute the application in iphone simulator, it displays "import React, { Component } from 'react';
import formatTime from 'minutes-seconds-milliseconds';

import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

class Stopwatch extends Component {

  constructor(props) {
    super(props);
    this.state = {
      timerRunning: true,
      timeDisplayed: null,
    }
  }

  _onPressStart() {
    console.log('start button')
    /*setInterval(function(){ alert("Hello Start"); }, 3000);*/
  }

  _onPressLap() {
    console.log('lap button')
    /*setInterval(function(){ alert("Hello Lap"); }, 3000);*/
  }

  render() {
    return (
      <View style={styles.overallContainer}>
        <View style={styles.upperContainer}>
          <View style={styles.timeCover}>
            <Text style={styles.timeWrapper}>
              {formatTime(this.state.timeDisplayed)}
            </Text>
          </View>
          <View style={styles.buttonCover}>
            <TouchableHighlight style={styles.button} onPress = {this._onPressStart()}>
              <Text>Start</Text>
            </TouchableHighlight>
            <TouchableHighlight style={styles.button} onPress = {this._onPressLap()}>
              <Text>Lap</Text>
            </TouchableHighlight>
          </View>
        </View>
        <View style={styles.lapCover}>
          <Text>
            List of laps
          </Text>
        </View>
    </View>
    );
  }
}

const styles = StyleSheet.create({

  overallContainer: {
    flex: 1,
  },

  upperContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    borderWidth: 4,
    borderColor: 'yellow',
  },
  timeWrapper: {
    fontSize: 50,
  },
  startWrapper: {
    fontSize: 20,
  },
  lapWrapper: {
    fontSize: 20,
  },
  timeCover: {
    flex:5,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'red',
  },
  buttonCover: {
    flex:3,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'green',
  },
  lapCover: {
    flex:1,
    borderWidth: 4,
    borderColor: 'blue',
  },
  button: {
    borderRadius: 50,
    borderWidth: 2,
    height:100,
    width:100,
    justifyContent: 'center',
    alignItems: 'center'
  }

});

AppRegistry.registerComponent('Stopwatch', () => Stopwatch);

When I run the application in iphone simulator the debugger shows "start button" and "lap buttin" even before pressing the buttons.

Answer 1

This is because of the fact you have this._onPressStart() instead of this._onPressStart

this._onPressStart() calls the function when the coded reaches it, but you want to run it when the events happens therefore you need to use this._onPressStart

Answer 2

I got my mistake, I should have written,

onPress = {this._onPressStart}

instead of,

onPress = {this._onPressStart()}