change button of react native header if data exist

I want to check if data exist, If data exist then to show red button and if there is no data then it will show blue button. I tried to do that but its not working . For example Instagram go to DM's button if there are any DM , button change to different color with number of DM's unread and if there is no Dm's then it is simple button.

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    const { notifications } = this.props.notification;

      return {
        headerRight: (
          <View>
            {
              (notifications.length > 0) ? (
                <TouchableOpacity onPress={() => params.handleSave()}>
                  <Badge>
                    <Text>{notifications.length}</Text>
                  </Badge>
                </TouchableOpacity>
              ) : (
                  <TouchableOpacity onPress={() => params.handleSave()}>
                    <Ionicons
                      name="ios-notifications-outline"
                      style={{ paddingRight: 15 }}
                      size={24}
                      color="white"
                    />
                  </TouchableOpacity>
                )
            }
          </View>
        )
      };
    }