how to set badge count on react native expo

Question

I am trying to set badge from icon manually using react-native-elements. But is it possible to changing to number count from manual? I'm set this +3 from badge value

Here is my view

 <View style={styles.container} >
          <TouchableOpacity style={styles.btn2} onPress={this.Process}>
          <FontAwesome name="bell" size={24} color="white"  /> 
          <Badge
    value= "3+" //manual value
    status="error"
    container={{ position: 'absolute', top: -4, right: -4 }}
  />

    </TouchableOpacity>
  <Text style={styles.headerTxt}>Welcome, { this.props.navigation.state.params.UserEmail }  </Text>
  <View style={styles.subView}>
  <TouchableOpacity style={styles.btn} onPress={() => this.props.navigation.navigate('ApplyLoan', {UserEmail: this.props.navigation.state.params.UserEmail})}>
    <Text style={styles.btnTxt}>Apply Loan</Text>
    </TouchableOpacity>
  <TouchableOpacity style={styles.btn} onPress={() => this.props.navigation.navigate('LoanHistory',{UserEmail: this.props.navigation.state.params.UserEmail} )}>
    <Text style={styles.btnTxt}>View Loan History</Text>
  </TouchableOpacity>
 
  </View>
    </View>

Any suggestion from there? i want to make number count so when click bell the number reset to 0. thank you

Answer 1

Try this way

state = { count : 3 };

Process = () => {

  this.setState({count : 0});

}

<TouchableOpacity style={styles.btn2} onPress={this.Process}>
    <FontAwesome name="bell" size={24} color="white" />
    <Badge
      value={`${this.state.count}+`} //manual value
      status="error"
      container={{ position: "absolute", top: -4, right: -4 }}
    />
</TouchableOpacity>