Timer circle color not change

[berkaygurbuz]

I created custom svg in for timer circle with issue #178 . Now, I want to change circle color when the isRest variable is true. It works in web but it can not change in mobile device.

Here is my forked react-countdown-circle-timer package : Forked Repo

Here is my code :

<CountdownCircleTimer
    isPlaying={this.state.isPlaying}
    duration={this.state.duration}
    trailColor={this.props.theme.colors.primary}
    height={CommonStyles.normalizeHeight(300)}
    width={CommonStyles.normalizeHeight(300)}
    colors={this.state.isRest ?
        [[this.props.theme.colors.restColor]] : [[this.props.theme.colors.timer]]}
    onComplete={this.timerOnComplete}
>
    {({ remainingTime }) => (
        <View>
            {this.state.isStart ?
                <TextBold style={styles.animatedTextCover}>
                    <Animated.Text style={this.state.isRest ? styles.restAnimatedText : styles.animatedText} onPress={() => this.setState({ isPlaying: !this.state.isPlaying })}>
                        {this.timeFormat(remainingTime)}
                    </Animated.Text>
                </TextBold>
                :
                <View style={styles.playButton}>
                    <Pressable onPress={() => this.setState({
                        isStart: !this.state.isStart,
                        isPlaying: !this.state.isPlaying,
                    })}>
                        <SvgWrapper name="play-button" fill={this.state.theme.colors.timer} />
                    </Pressable>
                </View>
            }
        </View>
    )}
</CountdownCircleTimer>

It seems like this in iOS mobile device

In web:

[vydimitrov]

Hey @berkaygurbuz, long time no talk to you. How are you doing? I am happy to see that you are moving forward on your custom circle. I checked your case in ExpoSnack and it seems to be working fine. You can test it here - https://snack.expo.dev/@dimitrov/countdown-timer-color-demo

May be try to do this instead:

colors={this.state.isRest ? this.props.theme.colors.restColor : this.props.theme.colors.timer}

[berkaygurbuz]

@vydimitrov thank you It is going good. What about you ? We didn't talk long time because I don't want to disturb every time 😅 By the way, it works now but what is difference using [[color]] and using hex color. When I check your documentation it says it is also the way to use props.

[vydimitrov]

All good around here! No worries, you can ping me when you have some questions.

I just checked both options below. You can test it yourself here.

colors={colorOn ? [['#004777']] : [['red']]}
colors={[[colorOn ? '#004777' : 'red']]}

It seems both are working but when doing the first one the change happens after a bit of time. I'd assume that because we are passing a new array every time which causes a lot of recalculations on each rerender. The second option here seems more performant and it works fine. The best option of course is to use just strings as I recommended.