title: React Native - OnPress button not working
body: <p>I have a button with a onPress event i am trying to simply console log that the button was successfully pressed.</p>
  
  <p>The button is within my template file i have extracted this portion of code to a separate file, ive done the same for my tyles.</p>
  
  <p>The add() function associated with the press does not fire when i press the add button, so the console.log does not show.</p>
  
  <p>But the console.log does does show on initial load of the screen ( i dont know why this is )</p>
  
  <p><strong>items.screen.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, Text, View, TextInput } from 'react-native';
  import style from './items.style'
  import template from './items.template';
  
  export default class ItemsScreen extends Component {
  
      static navigationOptions = {
          title: "Items"
      }
  
      constructor(props) {
          super(props);
          this.state = { text: '' };
      }
  
      add() {
          console.log("pressed add button");
      }
  
  
      render() {
          return template(this, style);
      }
  
  }
  </code></pre>
  
  <p><strong>items.template.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View, TextInput, Button } from 'react-native';
  import { style } from './items.style'
  
  export default (template, style) =&gt; {
      return (
          &lt;View style={style.container}&gt;
              &lt;TextInput
                  style={{ width: 300 }}
                  value={template.state.text}
                  onChangeText={(text) =&gt; template.setState({ text })}
              /&gt;
  
              &lt;Button
                  onPress={template.add()}
                  title="Add"
              /&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>