react native how to call multiple functions when onPress is clicked

Question

I am trying to call multiple functions when I click onPress using TouchableOpacity

For example:

functionOne(){
// do something
         


        

Answer 1

You can also make this with a boolean value. Example ;

<TouchableHighlight onPress{() => { this.functionOne() || this.functionTwo()}}/>

Answer 2

If you want to call a function and then navigate to a screen, then do this way.

<TouchableOpacity onPress={() => { this.onSubmit(); this.props.navigation.navigate('NextScreen') }}>

Answer 3

Recommended Solution:

   <TouchableWithoutFeedback
    onPress={() => {
     function1();
     function2();
    }}>     

You can use these props:

onPress Called when the touch is released

onPressIn Called as soon as the touchable element is pressed and invoked before onPress.

<TouchableWithoutFeedback
    onPress={() => {
      function1();
    }}
    onPressIn={() => {
      function2();
    }}
 >
 

Answer 4

There are a few ways to achieve this. One option would be to define a function that calls functionOne and functionTwo, and pass that on your onPress handler like so:

functionOne(){
// do something
}

functionTwo(){
// do something
}

functionCombined() {
    this.functionOne();
    this.functionTwo();
}  

<TouchableHighlight onPress={() => this.functionCombined()}/>

Alternatively, and more concisely, you could express functionCombined inline in your JSX like so:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight
 onPress={
  () => { this.functionOne(); this.functionTwo(); }
 }
/> 

      

Answer 5

Seeking your comment, you want to not used arrow, so I'm suggest to use something like this:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

mixFunction=()=>{
functionOne();
functionTwo();
}

mixFuncWithoutArrow(){
functionOne();
functionTwo();
}

<TouchableHighlight onPress{this.mixFunction() || this.mixFuncWithoutArrow.bind(this)}/>