CircleButton progress not working correctly

[danielbrodin]

Hi, I'm having some issue with the CircleButton. The following code is tested and works with RectangleButton

return (
	<CircleButton
		buttonState={this.state.buttonState}
		states={{
			downloaded: {
				text: title,
				onPress: this.props.onClick,
				backgroundColors: ['#4DC7A4', '#66D37A'],
			},
			notDownloaded: {
				text: title,
				onPress: this.fakeDownload.bind(this),
				backgroundColors: ['#eb4c13', '#e41c2a'],
			},
			downloading: {
				text: title,
				onPress: this.props.onClick,
				backgroundColors: ['#6A6AD5', '#6F86D9'],
				progress: true,
				progressFill: this.state.downloadProgress,
				progressText: `${this.state.downloadProgress}%`,
				spinner: true,
				progressSize: 30,
				progressWidth: 2,
			},
		}}
	/>
);

First state is notDownloaded which looks like it should. On click it gets the downloading state which displays the correct background colors, but nothing else. Once it's done it gets the downloaded state which also works. No text, no progress text or border during downloading.

If I set progress, progressFill and progressText on notDownloaded, i.e. the first state, the progress shows, but it's gone when download starts.

As I said, everything works if I change to using RectangleButton.

Any idea what the issue could be?

[danielbrodin]

So I just tried changing the order of the states to notDownloaded, downloading, available, which kinda makes it work. Only thing now is that available keeps the progress bar even after adding progress: false to it. Does the order matter? Couldn't find anything about it.

Edit: I tried it in a different way with just two states, default and downloading, since the only diff between notDownloaded and available was the backgroundColor:, and this works.

Can there only be two states?

[jacklam718]

@danielbrodin

don't use spinner and progress in one state

[danielbrodin]

@jacklam718 I updated my previous post, but the spinner wasn't the issue. Just something I tested and accidentally pasted here.

[jacklam718]

@danielbrodin Sorry to reply you so late. Can there only be two states? no, you can define many different states. For example:

<ButtonComponent
  buttonState={this.state.buttonState} // this.state.buttonState = 'upload', 'uploading', 'completed'
  states={{
    upload: {
      text: 'Upload'.toUpperCase(),
      onPress: this.upload,
    },
    uploading: {
      progress: true,
      progressFill: this.state.progress,
      text: 'Uploading...'.toUpperCase(),
      onPress: this.cancelUpload,
    },
    completed: {
      text: 'Upload Completed, Ok Got It 👍'.toUpperCase(),
      onPress: this.uploadCompleted,
    },
  }}
/>

detailed example code: https://github.com/jacklam718/react-native-button-component/blob/master/example/ButtonComponentExample/js/containers/ProgressButtons.js

[danielbrodin]

Hmm, so any idea why my code didn't work correctly? As I said, the spinner option wasn't there when I tested it, just something I added to see if it worked.

Another issue I have now with just two states is that there seems like only certain props are checked too see if the component should update or not, because now I'm setting the backgroundColor through state, so it's backgroundColor: this.state.backgroundColor, but it doesn't update the button when the state is changing. I have logged so I know that the state is changing.

Any ideas?

Except for these things I really enjoy the component :) Looks really beautiful.

[jacklam718]

Can you show me the whole file of code ? I can easier to know the reason. If so you can email me: [email protected] OR post it in here. Thanks.

[danielbrodin]

Starting as notInstalled, then downloading and ending with installed

import React, { Component } from 'react';

import { CircleButton } from 'react-native-button-component';

export default class TestButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      downloadProgress: 0,
      buttonState: 'notInstalled',
    };
  }

  fakeDownload() {
    this.setState({ buttonState: 'downloading' });

    this.intervalID = setInterval(() => {
      if (this.state.downloadProgress < 100) {
        this.setState({ downloadProgress: this.state.downloadProgress + 1 });
      } else {
        this.setState({ buttonState: 'installed' });
      }
    }, 20);
  }

  render() {
    const title = 'Test button';

    return (
      <CircleButton
        buttonState={this.state.buttonState}
        states={{
          installed: {
            text: title,
            onPress: () => console.log('Do something'),
            backgroundColors: ['#4DC7A4', '#66D37A'],
          },
          notInstalled: {
            text: title,
            onPress: () => this.fakeDownload(),
            backgroundColors: ['#eb4c13', '#e41c2a'],
          },
          downloading: {
            text: title,
            backgroundColors: ['#6A6AD5', '#6F86D9'],
            progress: true,
            progressFill: this.state.downloadProgress,
            progressText: `${this.state.downloadProgress}%`,
          },
        }}
      />
    );
  }
}

If I change the order of the states to notInstalled > downloading > installed, the first and second state will work, but the last (installed) will keep the progress bar.