title: How to trigger a function from another component in react native?
body: <pre><code>import { copilot, walkthroughable, CopilotStep } from 'react-native-copilot';
   class DashboardContent extends Component {
    state ={
      secondStepActive: true
    };
  
    componentDidMount() {
      this.props.start()
      this.props.copilotEvents.on('stepChange', this.handleStepChange);
    
    }
    
    handleStepChange = step =&gt; {
      console.log(`Current step is: ${step.name}`);
    };
     
    render() {
      
      return (
        &lt;View&gt;  ......   &lt;View/&gt;
             
      );
    }
  }
  
  export default copilot({
    animated: true, 
    overlay: 'svg', 
  })(DashboardContent);
  </code></pre>
  <p>I am using the <a href="https://github.com/mohebifar/react-native-copilot" rel="nofollow noreferrer">react-native-copilot</a> library for a walkthrough. I wish to trigger the this.props.start() function which starts the walkthrough using a button from my NavBar component - The _infoPage function in the code below should trigger the function basicaly.</p>
  <p>The code for the Navbar is :</p>
  <pre><code>class NavBar extends Component {
  
      state ={
          isModalVisible: false,
          email:'',
          emailError: false,
          emailErrorMessage: '',
      };
  
      _profileEdit() {
          Actions.profileedit();
        }
        _notificationsPage(){
            Actions.notifications();
        }
        _infoPage = () =&gt;{
            this.props.toggleTour();
        }
        toggleModal = () =&gt; {
          this.setState({isModalVisible: !this.state.isModalVisible});
        };
  
           
       render() {
         const {index, routes} = this.props.tabs;
  
             
         
         console.log(index);
         return (
          &lt;SafeAreaView&gt;
          &lt;View style={styles.container}&gt;
              &lt;StatusBar /&gt;
              
              
                  
                      &lt;TouchableOpacity onPress={this._infoPage}&gt;
                          &lt;MaterialCommunityIcons name=&quot;information-outline&quot; size={24} color=&quot;#979797&quot; style={{padding:10}}/&gt;
                      &lt;/TouchableOpacity&gt;
  
   
          &lt;/View&gt;
          &lt;/SafeAreaView&gt;
         );
       }
     
     }
     
  function mapStateToProps(state){
      return {
        tabs : state.tabs
      }
    }
    
  function mapDispatchToProps(dispatch){
      return {
        changeCounter : (index) =&gt; dispatch({type:'PAGE_CHANGED',payload: index}),
        toggleTour: () =&gt; dispatch({
            type: 'TOUR_OPENED'
        })
      }
    
    }
  
    export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
  </code></pre>
  <p>I was thinking of putting this.props.start() inside a function and calling the function from another component.
  How do I go about this?</p>
  <p>Here is my App.js</p>
  <pre><code>export default class App extends Component { 
    render() { 
      return (
          &lt;Provider store = {store}&gt;
            &lt;Routes /&gt;
          &lt;/Provider&gt;
            
  
      ); 
    } 
  }
  </code></pre>
  <p>The call for the NavBar is in Routes:</p>
  <pre><code>export default class Routes extends Component {
    
    render() {
      return (
        
        &lt;Router navBar={TopNavbar}&gt; 
          &lt;Scene key=&quot;root&quot;&gt;
            ...
          &lt;/Scene&gt;
        &lt;/Router&gt;
      );
    }
  }
  </code></pre>