React Native - Display days, hour, ...

[pnjots]

I want reproduce the example that is available in the sandbox to show the days, hour, minutes, etc. but for react-native. The code provided in the sandbox should work in react native but I can´t reproduce the same results. I have logged the results and they are equal but still not showing correctly. What is the difference?

[vydimitrov]

Hey, can you share your code or RN demo?

[pnjots]

Hey, can you share your code or RN demo?

Hey, thanks for the quick reply! I have used the exactly same code just changed the imports nothing more to test out. The code is working but only gives me negative numbers.

`import React from 'react'; import {CountdownCircleTimer} from 'react-native-countdown-circle-timer'; import { View, Text, } from 'react-native'; import moment from 'moment';

const minuteSeconds = 60; const hourSeconds = 3600; const daySeconds = 86400;

const timerProps = { isPlaying: true, size: 78, strokeWidth: 4, };

const renderTime = (dimension, time) => { return ( <View style={{justifyContent: 'center', alignItems: 'center'}}> <Text style={{fontSize: 20}}>{time} <Text style={{fontSize: 12}}>{dimension} ); };

const getTimeSeconds = (time) => (minuteSeconds - time) | 0; const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0; const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0; const getTimeDays = (time) => (time / daySeconds) | 0;

const Countdown = () =>{ const startTime = moment().unix() / 1000; // use UNIX timestamp in seconds const endTime = startTime + 243248; const remainingTime = endTime - startTime; const days = Math.ceil(remainingTime / daySeconds); const daysDuration = days * daySeconds;

return (
    <View style={{flexDirection: 'row'}}>
     <CountdownCircleTimer
    {...timerProps}
    colors={[["#7E2E84"]]}
    duration={daysDuration}
    initialRemainingTime={remainingTime}
  >
    {({ elapsedTime }) =>
      renderTime("days", getTimeDays(daysDuration - elapsedTime))
    }
  </CountdownCircleTimer>
  <CountdownCircleTimer
    {...timerProps}
    colors={[["#D14081"]]}
    duration={daySeconds}
    initialRemainingTime={remainingTime % daySeconds}
    onComplete={(totalElapsedTime) => [
      remainingTime - totalElapsedTime > hourSeconds
    ]}
  >
    {({ elapsedTime }) =>
      renderTime("hours", getTimeHours(daySeconds - elapsedTime))
    }
  </CountdownCircleTimer>
  <CountdownCircleTimer
    {...timerProps}
    colors={[["#EF798A"]]}
    duration={hourSeconds}
    initialRemainingTime={remainingTime % hourSeconds}
    onComplete={(totalElapsedTime) => [
      remainingTime - totalElapsedTime > minuteSeconds
    ]}
  >
    {({ elapsedTime }) =>
      renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
    }
  </CountdownCircleTimer>
  <CountdownCircleTimer
    {...timerProps}
    colors={[["#218380"]]}
    duration={minuteSeconds}
    initialRemainingTime={remainingTime % minuteSeconds}
    onComplete={(totalElapsedTime) => [
      remainingTime - totalElapsedTime > 0
    ]}
  >
    {({ elapsedTime }) =>
      renderTime("seconds", getTimeSeconds(elapsedTime))
    }
  </CountdownCircleTimer>
    </View>
  );

}

export default Countdown;`

[vydimitrov]

The problem is that the elapsedTime is returned in milliseconds. As a workaround you will need to do it like this: renderTime("...", getTimeSeconds(elapsedTime / 1000))

Check this one - https://snack.expo.io/@dimitrov/countdown-timer---hour-minutes-seconds

I will fix this bug. I hope in the next few days. Just FYI.

[pnjots]

The problem is that the elapsedTime is returned in milliseconds. As a workaround you will need to do it like this: renderTime("...", getTimeSeconds(elapsedTime / 1000))

Check this one - https://snack.expo.io/@dimitrov/countdown-timer---hour-minutes-seconds

I will fix this bug. I hope in the next few days. Just FYI.

Thanks for the help!!!

[vydimitrov]

Hey @rastilho8, the bug is fixed in v2.5.2