CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6
mtwallet
mtwallet

Reputation: 5096

React Native Router Flux dynamic route

In my React Native project I have an import:

import { Actions as NavigationActions } from 'react-native-router-flux'

I also have a prop type for a route of this.props.route which equates to 'someRoute'. I would like to use the two together effectively like this:

<TouchableOpacity onPress={NavigationActions.this.props.route}>

Obviously that doesn't work but how can use the two together?

I've tried

const { route } = this.props
<TouchableOpacity onPress={NavigationActions.route}>

and also

<TouchableOpacity onPress={{$NavigationActions}.${route}}>

but neither work. Can anyone show me what I'm doing wrong

Upvotes: 4

Views: 2577

Answers (3)

cihan baş
cihan baş

Reputation: 1

You can use this:

const route = this.props.route;
Actions[route]()

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

You can try like this NavigationActions[this.props.route] if your router have a scene with the value this.props.route

<TouchableOpacity onPress={NavigationActions[this.props.route]}>

If this doesn't work check the Router you defined whether it have a scene with key have the value of this.props.route.

Upvotes: 1

zurfyx
zurfyx

Reputation: 32807

See react-native-router-flux minitutorial.

You aren't meant to access their props.

<Router>
  <Scene key="root">
    <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
    <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
  </Scene>
</Router>

<Text onPress={Actions.pageTwo}>This is PageOne!</Text>

Edit:

Since you are looking forward dynamic redirection, the approach is the same as if you were dealing with objects.

a = { foo: 'bar' } -> a.foo or a['foo'] (second being the dynamic version)

That is Action[page] in your case.

Which becomes

const route = this.props.route;
<TouchableOpacity onPress={NavigationActions[route]}>

Make sure that route is actually the key that the Scene has.

Upvotes: 4

Related Questions