bartgryszko
Support timer progress
The fill animation counter gets a number between 0-100.
Example: {fill => <Text>{fill}</Text>}
It's impossible to make the right timer. The current time can be calculated using the formula: fill * totalTimeInSeconds / 100
However, the timer will not show all seconds if the total time exceeds 100 seconds. For example, display 10 minutes (600 seconds). fill 1: 6 seconds fill 2: 12 seconds ... fill 100: 600
The timer should work with 1-second step. Making fill bounded to any N makes it possible to use react-native-circular-progress as the timer.
Might be too late. But you can definitely convert 100 to 600 by yourself; Before your return ()
const fill = ( current_sec/ MAX ) * 100; //in your case MAX = 600;
Then for display{ () => <Text> current_sec </Text>}
As the animation is not linear, the fill value is not the real time elapsed.. It may be good to access to the real counter.
As the animation is not linear, the fill value is not the real time elapsed.. It may be good to access to the real counter.
All of there really depend on your own implementation. You can always access Date() or from something else to setup the start and update your timer accordingly. Remember the component itself is just a way to display the values you create.
I use this in combination with https://github.com/devboldly/react-use-precision-timer for timers. I calculate fill at progress/total*100, and set duration to 1000 and easing to linear for a fluent non-stop motion (optionally). My timer callback fires once per second and progress is rounded, because there's inherent processing lag in timer callbacks in general (that's why you should never count time using setTimeout().
