How to disable a button in React Native???

Question

React Native

Good evening, afternoon, morning)))
I have this question: How to disable the buttons for the duration of the request to the API ???
Here is the code for the button itself:

<View style={navigationPostcards}>
          <TouchableOpacity onPress={this._backwardPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowBack.png')} style={arrow} />
          </TouchableOpacity>
          <TouchableOpacity onPress={this._nextPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowNext.png')} style={arrow} />
          </TouchableOpacity>
          <View style={pagesCountContainer}>
            <Image source={require('./src/components/uikit/images/pagesCountIcon.png')} style={pagesCountIcon} /><Text style={pageCountInfo}>{page + ' / ' + pageMax}</Text>
          </View>
        </View>

Here is the API request code:

_getPostcards () {
    try {
      const url = domain + '?app_id='+ app_id +'&category='+ category +'&page=' + this.state.page
      return fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
        this.setState({ data: responseJson.photos, pageMax: responseJson.pages })
      })
      .catch((error) =>{
        console.error(error);
      });
    } catch (e) {
      throw e
    }
  }

Answer 1

you need to make a flag at the beginning of the request, for example, isFetch and set it to true. If the question is over or some error occurred during the request, then set it to false. And if isFetch is true, then either hide the buttons or disable them or do nothing when they are pressed.

{this.state.isFetch&&<View style={navigationPostcards}>
          <TouchableOpacity onPress={this._backwardPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowBack.png')} style={arrow} />
          </TouchableOpacity>
          <TouchableOpacity onPress={this._nextPostcards} style={arrowContainer}>
            <Image source={require('./src/components/uikit/images/arrowNext.png')} style={arrow} />
          </TouchableOpacity>
          <View style={pagesCountContainer}>
            <Image source={require('./src/components/uikit/images/pagesCountIcon.png')} style={pagesCountIcon} /><Text style={pageCountInfo}>{page + ' / ' + pageMax}</Text>
          </View>
        </View>}

_getPostcards () {
    try {
this.setState({isFecth:true})
      const url = domain + '?app_id='+ app_id +'&category='+ category +'&page=' + this.state.page
      return fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
        this.setState({ data: responseJson.photos, pageMax: responseJson.pages })
this.setState({isFecth:false}) //<--------
      })
      .catch((error) =>{
        console.error(error);
       this.setState({isFecth:false}) //<--------
      });
    } catch (e) {
      throw e
      this.setState({isFecth:false}) //<--------
    }
  }