How to use a variable in Actions.SCENE_KEY (react native router flux)

Question

Forgive me if this is something simple i'm overlooking. I'm fairly new to programming, much newer to React and React Native.

I'm building a simple navigation drawer.

The drawer displays a Menu component which has a renderMenuItem(item) function which returns the following.

<Button onPress={() => this._onItemSelect(item)} style={styles.navItem} >{item}</Button>

It's responsible for returning the correctly labeled button to the render function.

The problem I'm having is when it gets to the onItemSelect funtion,

_onItemSelect(item) {
    //  handle action to render the new page!

    Actions.item      // Won't work
    //Actions.Page2     // Hardcoding the scene here won't work either
    );

I can't get it to actually display the new scene when the button is pressed. If I were to hardcode the scene into the onPress() function in the button, I can get it to work. For example:

<Button onPress={Actions.Page2} style={styles.navItem} >{item}</Button>

Obviously, that won't work. What I need is to be able to use item in either of the functions, the renderMenuItem(item) funtion or the onItemSelect(item) function.

Thank you. I've been wrecking my brain since last night trying to figure this one out.

score 7 · Answer 1 · answered May 14 '17 at 09:16

7

A bit late for you but may be it help others.

use bracket notation to call functions dynamically

_onItemSelect(item) {
    Actions[item]();
);

variable item should be the key from your routes/scenes.

answered May 14 '17 at 09:16

Lal

1,599
15
18

2

This is very helpful. In the docs it says, Actions[key].call() It doesn't work if you do following. Actions[key].call({props:object}). Only works for Actions[key]({props:object}) – Malith Aug 15 '18 at 15:40

score 2 · Accepted Answer · answered Dec 07 '16 at 21:20

The problem is that Actions.SCENE_KEY is a function that you can call, and when doing so the navigator will perform the action. It works when you do <Button onPress={Actions.Page2} because the button takes a function reference as the onPress property and it calls it for you when appropriate. You just have to change your code to:

_onItemSelect(item) {
    //  handle action to render the new page!

    Actions.Page2();
);

Also, since you depend on the value of item, you can pass it as a prop, to the component, like this:

_onItemSelect(item) {
    //  handle action to render the new page!

    Actions.Page2({item: item});
);

Then, your next screen will receive the usual props plus a new one called item with the value that you passed.

While this did not resolve my concern completely, it did lead me down the right path. What I wanted was a way to use item(which holds a name of the button pressed) as the action. (ex: `Actions.item()`) That did not work. however, I simply used a switch statement in the _onItemSelect function. `onItemSelect(item) { switch(item){ case "page one": Actions.PageOne(); break; case "page two": Actions.PageTwo(); break; }` Thank you so much for your help. — StevenAntonio, Dec 08 '16 at 03:40

How to use a variable in Actions.SCENE_KEY (react native router flux)

2 Answers2