CODEWITHSUNDEEP
react-nativereactive-programmingreact-native-iosreact-native-router-fluxreact-android
TheNewbie
TheNewbie

Reputation: 353

React Native: How to add two Actions to a button ?

I have a small problem. I want to pass down two Actions to a Button, but I can't seem to figure it out. I am using the react-native-router-flux library. I tried something like this, but It doesn't really work.

If anyone could help that would be awesome. Thanks !

<Button 
  onPress={Actions.Main1 && Actions.Tab2} 
  style={{ width: 90, height: 90 }} >
      <Text>Show</Text>
</Button>

Upvotes: 0

Views: 2744

Answers (1)

aaronofleonard
aaronofleonard

Reputation: 2576

The onPress prop takes a function, and only a function. There is no syntax for automatically combining two funtions in Javascript. You need to create a new function which executes both actions.

<Button 
  onPress={(e) => {
      Actions.Main1(e);
      Actions.Tab2(e);
  }} 
  style={{ width: 90, height: 90 }} >
      <Text>Show</Text>
</Button>

Some notes:

  1. I passed the event parameter into both of the actions, since passing just one of the functions (i.e. onPress={Actions.Main1}) itself would pass this parameter as well. This may not be necessary in your case.
  2. The slight issue with this code is that creates a new function every time the render function of this component is called. It's not terrible, but also not ideal. Consider that in the future. I include that optimization in this post because a) we don't see the rest of the implementation of the component, b) I think this question was rudimentary enough for us to just worry about the main concept.

Upvotes: 3

Related Questions