title: How to call a react native function for navigation from another class
body: <p>I am new in react native. I have used Wix react-native-navigation library for navigate between pages. I want to write a separate class for navigation like bellow and call it in everywhere that I need it in my project. But I get error for "this.props.componentId". Here is my function for navigation:</p>
  
  <p>ScreenNavigation.js</p>
  
  <pre><code>import React,{Component} from 'react';
  import {Navigation} from "react-native-navigation";
  
  class ScreenNavigation extends Component{
  
  constructor(props){
      super(props)
  }
  
   goToScreen = (screenName) =&gt;{
  
      Navigation.push(this.props.componentId , {
          component : {
              name : screenName
          }
      });
  }
  
  }
  const NextPage = new ScreenNavigation();
  export default  NextPage;
  </code></pre>
  
  <p>and here is my Login page (where I want to call the function):</p>
  
  <p>Login.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import {View, Button, Text} from 'react-native';
  import NextPage from "../../my_classes/ScreenNavigation"
  
  export default class Login extends Component {
  
  
  render() {
      return (
          &lt;View&gt;
             &lt;Text&gt;Anna&lt;/Text&gt;
              &lt;Button title={"Enter"} onPress= 
  {()=&gt;NextPage.goToScreen('myRegister')}&gt; &lt;/Button&gt;
          &lt;/View&gt;
      );
   }
   }
  </code></pre>
  
  <p>Please help me to solve my problem.</p>
  
  <p>this is my index.js file:</p>
  
  <pre><code>import {Navigation} from 'react-native-navigation';
  import Login from './my_screens/login&amp;register/Login';
  
  
  Navigation.registerComponent('myLogin',()=&gt;Login);
  
  
  Navigation.events().registerAppLaunchedListener(()=&gt;{
  
      Navigation.setRoot({
              root : {
  
                  stack : {
                      id:'AppStack',
                      children : [
                          {
                              component : {
                                  name : 'myLogin' ,
                                  options : {
                                      topBar : {
                                          title : {
                                              text : 'Login'
                                          }
                                      }
  
                                  }
                              },
                          }
                      ]
                  }
              }
          }
  
         )
      });
  </code></pre>