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:
ScreenNavigation.js
import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Component{
constructor(props){
super(props)
}
goToScreen = (screenName) =>{
Navigation.push(this.props.componentId , {
component : {
name : screenName
}
});
}
}
const NextPage = new ScreenNavigation();
export default NextPage;
and here is my Login page (where I want to call the function):
Login.js
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 (
<View>
<Text>Anna</Text>
<Button title={"Enter"} onPress=
{()=>NextPage.goToScreen('myRegister')}> </Button>
</View>
);
}
}
Please help me to solve my problem.
this is my index.js file:
import {Navigation} from 'react-native-navigation';
import Login from './my_screens/login®ister/Login';
Navigation.registerComponent('myLogin',()=>Login);
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root : {
stack : {
id:'AppStack',
children : [
{
component : {
name : 'myLogin' ,
options : {
topBar : {
title : {
text : 'Login'
}
}
}
},
}
]
}
}
}
)
});