how to call multiple function one by one on single button in react native

Admin 1
Viewed 502

I am new to react native. I have a single button. and I have 3 functions. so I want that when user click on first time then first function should be call. when user click on 2nd time then 2nd function should be call. when user click on 3rd time then 3rd function should be call. and when user click on 4th time then again first function should be call and so on. please help me. thanks.

here is my code

<View>
<Icon onPress={this.function} name="md-camera" size={30}/>
</View>
react-native javascript
2 Answers

You need 4 functions for this and one counter. Forth function will choose your function .

   state = {
    count: 0
  };



_gateway=()=>{
   this.setState({
            count: this.state.count==3 ? 1 : this.state.count+1
        })
   if(this.state.count==1){
      _function1();
   }
   if(this.state.count==2){
      _function2();
   }
   if(this.state.count==3){
      _function3();
   }
}
_function1=()=>{

    }
_function2=()=>{

    }
_function3=()=>{

    }

and in button call the _gateway function on press

onPress{() => { this._gateway();}}
user_25762540

You have to maintain a count that how many times the functions has been triggered. And using that you can choose whether which function to execute when button presses.

Note: I hope that you are using class components because you mentioned onPress event with this keyword and also function name is equal to function.

Class components

constructor(props) {
    super(props);
    this.state = {
        triggerCount: 0
    };

    this.functionName = this.functionName.bind(this);
    this.function1 = this.function1.bind(this);
    this.function2 = this.function2.bind(this);
    this.function3 = this.function3.bind(this);
}

functionName() {
    switch (this.state.triggerCount) {
        case 0:
            this.function1();
            break;
        case 1:
            this.function2();
            break;
        case 2:
            this.function3();
            break;
    }

    this.setState({
        triggerCount: (this.state.triggerCount + 1) % 3
    });
}

function1() {
    // Your logic for function 1
}

function2() {
    // Your logic for function 2
}

function3() {
    // Your logic for function 3
}

render() {
    return (
        ...
        <View>
            <Icon onPress={this.functionName} name="md-camera" size={30}/>
        </View>
        ...
    )
}

or

Functional components

const [triggerCount, setTriggerCount] = useState(0);

const functionName = () => {
    switch (triggerCount) {
        case 0:
            function1();
            break;
        case 1:
            function2();
            break;
        case 2:
            function3();
            break;
    }

    setTriggerCount((triggerCount + 1) % 3);
}

const function1 = () => {
    // Your logic for function 1
}

const function2 = () => {
    // Your logic for function 2
}

const function3 = () => {
    // Your logic for function 3
}

return (
    ...
    <View>
        <Icon onPress={functionName} name="md-camera" size={30}/>
    </View>
    ...
);
user_104069950
Related