title: React Native + Redux - onPress dispatch an action and another function
body: <p>I have a list of team members that onPress will navigate to the next screen using react-navigation/StackNavigator. Depending on which team member is clicked, the next screen will have dynamically loaded the relevant team member information.</p>
  
  <p>I have been able to achieve this by using Redux to change the state of who has been selected. However at the moment I am unable to figure how I can dispatch the action and trigger the function to navigate to the next screen.</p>
  
  <p>Below is my component that holds the events in which I want to dispatch the action and navigation function. You can see the first team member 'Tim' has the navigation function. All other team members will dispatch their individual action types. </p>
  
  <p>I'm fairly new to Redux I would appreciate if anyone could point me in the right direction of how to add these together.</p>
  
  <p>The Repository can be found here - <a href="https://github.com/GaryVoss/_test-native-app-elements.git" rel="nofollow noreferrer">Github</a> </p>
  
  <pre><code>    import React, {Component} from 'react';
      import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
  
      const styles = StyleSheet.create({
        pane: {
          width: 300,
          height: 50,
          padding: 10,
          backgroundColor: 'lightgray',
          alignItems: 'center',
          justifyContent: 'center',
          margin: 3
        }
      });
  
      function navTO(passBack, location) {
          const { navigate } = passBack.props.navigation;
          navigate(location)
  
      }
  
      export default class TeamList extends Component {
        constructor(props) {
          super(props);
        }
  
        render() {
          const { passBack, location, whoSelected, Tim, Kate, Ian, Smita, Lee, Ben } = this.props;
  
          return (
            &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
              &lt;Text&gt;{whoSelected}&lt;/Text&gt;
              &lt;TouchableOpacity onPress={() =&gt; navTO(passBack, location)} style={styles.pane}&gt;
                &lt;Text&gt;Tim&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={Kate} style={styles.pane}&gt;
                &lt;Text&gt;Kate&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={Ian} style={styles.pane}&gt;
                &lt;Text&gt;Ian&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={Smita} style={styles.pane}&gt;
                &lt;Text&gt;Smita&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={Lee} style={styles.pane}&gt;
                &lt;Text&gt;Lee&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={Ben} style={styles.pane}&gt;
                &lt;Text&gt;Ben&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          );
        }
      }
  </code></pre>