CODEWITHSUNDEEP
javascriptreact-native
user14877357
user14877357

Reputation:

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

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>

Upvotes: 2

Views: 948

Answers (2)

Nimna Perera
Nimna Perera

Reputation: 1065

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>
    ...
);

Upvotes: 1

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17580

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();}}

Upvotes: 1

Related Questions