Q:

FAB Group Button isnt Setting State - React Native

I am new to coding, react native and mobile app development.  
I am trying to build water reminder app. 
I have FAB group button which shows different type of drinks.  When users click second FAB button with (hamburger menu icon), it opens and I want to set state by water amount of selected.  Then this state is passed to progress circle to calculate the progres.  
However obviously I am not able to update the state properly because I receive an error that progress.circle received NaN value

const goal = 2000;

export default class HomeScreen extends React. Component {
  static navigationOptions = {
    header: null
  };

  state = {
    progress: 0,
    drunk: 0,
    open: false
  };

  drinkOther = drink => {
    let bottle = 500;
    let bigBottle = 1000;
    let coffee = 200;
    let tea = 200;
    let progress = this.state.progress;
    this.setState(prevState => ({
      drunk: prevState.drunk + drink,
      progress: (prevState.drunk + drink) / goal
    }));
  };

  render() {
    return (
      <Provider>
        <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <Portal>
              <FAB.Group
                open={this.state.open}
                icon={"menu"}
                actions={[
                  {
                    icon: require("../assets/images/juice.png"),
                    label: "Juice",
                    onPress: this.drinkOther("juice")
                  },
                  {
                    icon: require("../assets/images/coffee.png"),
                    label: "Coffee",
                    onPress: this.drinkOther("coffee")
                  },
                  {
                    icon: require("../assets/images/tea.png"),
                    label: "Tea",
                    onPress: this.drinkOther("tea")
                  },
                  {
                    icon: require("../assets/images/big_bottle.png"),
                    label: "Big Bottle",
                    onPress: this.drinkOther("bigBottle")
                  },
                  {
                    icon: require("../assets/images/bottle.png"),
                    label: "Small Bottle",
                    onPress: this.drinkOther("bottle")
                  }
                ]}
                onStateChange={({ open }) => this.setState({ open })}
                onPress={() => {
                  this.setState({ open: ! this.state.open });
                }}
                style={styles.fab}
                color={"white"}
                theme={{ colors: { accent: Colors.tintColor } }}
              />
            </Portal>
          </View>
        </View>
      </Provider>
    );
  }

A:

Have a look at this setState call in drinkOther:
this.setState(prevState => ({
  drunk: prevState.drunk + drink,
  progress: (prevState.drunk + drink) / goal
}));

If you look at where drink comes from, it's the argument that you're passing to drinkOther:
onPress: this.drinkOther("juice")

You're trying to add the string "juice", "coffee", or whatever to the drunk total and then divide it by a number, which of course returns NaN.

