0

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&register/Login';


Navigation.registerComponent('myLogin',()=>Login);


Navigation.events().registerAppLaunchedListener(()=>{

    Navigation.setRoot({
            root : {

                stack : {
                    id:'AppStack',
                    children : [
                        {
                            component : {
                                name : 'myLogin' ,
                                options : {
                                    topBar : {
                                        title : {
                                            text : 'Login'
                                        }
                                    }

                                }
                            },
                        }
                    ]
                }
            }
        }

       )
    });

2 Answers 2

1

Please follow the official documentation first. According to documentation you must register component screen first. Otherwise you cannot navigate to that screen. Secondly you are not passing any props. So its actually undefined.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for your response. I have showed my index.js file above. I have register my page. where I have to pass props?
0

If you want to execute a function of a component into another component there is two ways to todo that. By passing prop into your child component like

<RootcComponent <Login gotoScreen={this. goToScreen} /> />

and then you need to call that function in you login component

this.props.goToScreen()

But if this component is not your child component then you need to pass this is in your navigation params like this

this.props.navigation.navigate('RouteName', {goTo: this.goToScreen})

and then in your component where you want to execute this function

this.props.navigation.state.params.goToScreen()

4 Comments

Thank you so much. Sorry I am a beginner. Could you please tell me where I have to add these line exactly ? I have showed my index.js file above too. I would be appreciate if you explain more.
@anna please tell me first is your function that you want to execute is in the same component where you write your onPress logic or that function is in the separate file?
It is in the separate file.
For that we can do is we can bring this function into your component via prop or sending params in navigation of that component then you have access to this function in your component where you want to execute according to button press.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.