Open danielbrodin opened 8 years ago
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?
@danielbrodin
don't use spinner
and progress
in one state
@jacklam718 I updated my previous post, but the spinner
wasn't the issue. Just something I tested and accidentally pasted here.
@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
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.
Can you show me the whole file of code ? I can easier to know the reason. If so you can email me: jacklam718@gmail.com OR post it in here. Thanks.
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.
Hi, I'm having some issue with the
CircleButton
. The following code is tested and works withRectangleButton
First state is
notDownloaded
which looks like it should. On click it gets thedownloading
state which displays the correct background colors, but nothing else. Once it's done it gets thedownloaded
state which also works. No text, no progress text or border during downloading.If I set
progress
,progressFill
andprogressText
onnotDownloaded
, 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?