How to pass callback function to nested StackNavigator on React Native

Question

How to perform some actions on root class on specific event on nested element?

This is my code. Is it possible to call onLogout function from App class from Account class? If I don't use StactNavigator and just export Account class, it's possible to use onLogout function from index.js

index.js

    var Account = require('./account');

    export default class App extends Component {
      onLogout= () => {
      }
      render() {
        return (
            <TabBarIOS selectedTab={this.state.selectedTab}>
              <TabBarIOS.Item}}>
                  <Welcome />
              </TabBarIOS.Item>
              <TabBarIOS.Item}}>
                {this.state.isAuth ? <Account onLogout= {this.onLogout} /> : <AuthView/> }
              </TabBarIOS.Item>
            </TabBarIOS>
        );
      }
    }

account.js

import { StackNavigator } from 'react-navigation';

class Account extends Component {

  constructor(props) {
    super(props);
    this.state = {
      lastName: ''
    };
  }

  handleLogout = () => {
    console.log("Logout");
    // LOGGING IN

    // Next line throws an exception, 'onLogout is not a function'
    // this.props.onLogout(); 
  }

  render() {
    return (
          <Button
            title = "Logout"
            onPress = {this.handleLogout}
          />
    );
  }
}
const AccountView = StackNavigator({
  Home: { screen: Account }
  //Detail : {screnn: DetailView}
});

module.exports = AccountView;

score 0 · Answer 1 · answered Jun 17 '17 at 11:00

0

I'm not sure it will work. you can try change the function in your account.js

handleLogout = () => {} into handleLogout() {}

answered Jun 17 '17 at 11:00

XShadow

1

`handleLogout()` is successfully calling and printing in console. But this method can't call `onLogout()` from index.js – Jun 17 '17 at 11:06
`onLayout` in the index was be send to account.js by props. and now in the account.js `this.props.onLayout is undefined` ?? – XShadow Jun 17 '17 at 11:08
I guess the problem is in `Arrow Functions this` is point to context from nested, but not sure. and have you try it ? – XShadow Jun 17 '17 at 11:21

score 0 · Answer 2 · answered Jun 17 '17 at 11:07

0

You have to bind the function when you are passing it to your component in index.js

it will be something like this:

 <Account onLogout= {this.onLogout.bind(this)} />

Then in your Account component you just have to call it like this (like in your code):

this.props.onLogout();

edit: In this post you have a better explanation about function callbacks to components: React Native component callback functions

answered Jun 17 '17 at 11:07

Alejandro Santiago

1
3

if I don't use stackNavigator `` works, and I'm able to call onLogout from **Accout**. – Jun 17 '17 at 11:15
I am not familiar with the component stackNavigator and how it works, but probably it is creating a different scope between components, and when you create the "Account" in index.js, the function onLogout does not exist and that is why you have to bind it. Either way you might want to pass it in the props as explained in stackNavigator documentation here: https://reactnavigation.org/docs/navigators/stack#RouteConfigs – Alejandro Santiago Jun 17 '17 at 11:29

score 0 · Answer 3 · answered Jun 17 '17 at 19:58

0

You just need to replace one line in your code

change onPress = {this.handleLogout} to onPress = {this.handleLogout()}

answered Jun 17 '17 at 19:58

Raj Suvariya

1,592
3
14
36

score 0 · Answer 4 · answered Aug 08 '17 at 08:01

The solution requires a bit of extra code, but works. :) Wrap component that requires callback into function. Than you will be able to call this.props in the component.

const AccountView = StackNavigator({
  Home: { screen: (props) => <Account logout={() => this.handleLogout()} {...props}/> }

});

How to pass callback function to nested StackNavigator on React Native

4 Answers4