last day (14 days later) » 

8:40 AM
0
A: Navigation to other page works in render() call but not in separate function

Paras WattsPlease share the updated code and code where this error is coming

 
This should be a comment, mate. The error comes from the <TouchableHighlight>. I just added your line at the first line of the the function onPressEditProfile
 
sorry i mistakenly added in the answer
 
Any lights on the error?
 
Please share updated onEditProfile function code .
 
code updated, see the question above.
 
8:40 AM
onEditProfile(event) { const { navigate } = this.props.navigation; navigate('Detail'); }
Have you added it like this
onEditProfile(event) { const { navigate } = this.props.navigation; navigate('Detail'); }
onEditProfile(event) {
const { navigate } = this.props.navigation;
navigate('Detail');
}
You can also navigate directly using this.props.navigation.navigate(Detail);
 
Wait. I'm trying your codes. onEditProfile(event) { const { navigate } = this.props.navigation; navigate('Detail'); } gives same error
` this.props.navigation.navigate('Detail');` has same error too
 
try to access it directly
without using const
this.props.navigation.navigate(Detail);
Let me also try your problem on my end
 
Tried , same error
 
I am doing it at my end
 
Thanks mate
 
8:49 AM
))
 
9:09 AM
Sorry it is taking little time. npm dependencies are getting updated
 
it's okay.
 
9:34 AM
Hi
it is working fine
I have made some changes at my end
import { StackNavigator } from 'react-navigation';
import React,{Component} from 'react';

import {
Text,
View,
TouchableHighlight,
} from 'react-native';
// ==============
// Profile Screen
// ==============
class ProfileScreen extends Component {
static navigationOptions = {
title: 'Profile',
}

render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Profile Page</Text>
<TouchableHighlight onPress={() => this.onEditProfile()}><Text>Next</Text></TouchableHighlight>
</View>
I imported this file in index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';



import App from './App';


export default class demo extends Component {


render() {
return (
<App/>
);
}
}



AppRegistry.registerComponent('demo', () => demo);
 
Thanks, reading your codes.
 
App is the file name in which i have put the main code
 
9:52 AM
It works! The key changes are the () => in the onPress function, and remove the event argument in the function.
though I don't know the reason behind, still...
Can you please put the code in your answer, so that I can accept it ? Thanks.
 
Yes sure
 
You saved my day, bro
 
No Problem ))
The other thing you were discussing
Declare different screens
that is also possible
 

last day (14 days later) »