title: Calling onPress on custom component in React Native
body: <p>How to solve this? I have a custom Button component that gets included in my ModalScreen. It all seems to work but the onPress function is acting up. It seems to have lost the scope for some reason so I can't reference <code>this</code> or even add params to the function. What am I missing here?</p>
  
  <pre><code>import React from 'react';
  import {
    Text,
    View,
  } from 'react-native';
  
  import Styles from 'app/constants/Styles';
  import Button from 'app/components/Button';
  
  export default class ModalScreen extends React.Component {
  
      onBtnPress() {
          console.log('dfsdfsdf'); /// &lt;&lt; this gets consoled out just fine
          //this.props.navigation.navigate('Main'); &lt;&lt;&lt;&lt; this won't work
      }
  
      render() {
          return (
              &lt;View style={Styles.center}&gt;
  
                  &lt;Text&gt;MOdalScreen&lt;/Text&gt;
                  &lt;Button label='Gå vidare' onPress={ this.onBtnPress }/&gt;
  
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>Button.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, TouchableOpacity } from 'react-native';
  
  
  import Styles from 'app/constants/Styles'
  import Vars from 'app/constants/Vars'
  
  
  export default class Button extends Component {
  
      render() {
          return (
              &lt;TouchableOpacity style={[Styles.round, Styles.primaryBackground]} onPress={this.props.onPress}&gt;
                  &lt;Text style={[Styles.label, Styles.textCenter, { margin: Vars.spacing.narrow }]}&gt;
                      {this.props.label}
                  &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          )
      }
  }
  </code></pre>