vydimitrov / react-countdown-circle-timer

Lightweight React/React Native countdown timer component with color and progress animation based on SVG
MIT License
692 stars 87 forks source link

Render error and can't display #148

Closed joafran closed 3 years ago

joafran commented 3 years ago

I'm getting this error

And this is my code

import React from 'react';
import { CountdownCircleTimer } from 'react-countdown-circle-timer';
import { Text } from 'react-native';

const CircleTimer = ({time}) => {
    return ( 
        <CountdownCircleTimer
         isPlaying={true}
         duration={time}
         colors={[
         ['#004777', 0.33],
         ['#F7B801', 0.33],
         ['#A30000', 0.33],
         ]}
        >
            { ({remainingTime}) => (
                <Text>{remainingTime}</Text>
            )}
        </CountdownCircleTimer>
     );
}

export default CircleTimer;

And I'm trying to use it in another component like this

                           //Time is always a number that means the minutes
                <>
                    <View>
                        <Text style={{fontSize: 20}}>Your order will be ready in</Text>
                        <CircleTimer time={time * 60} />
                    </View>
               </>

Maybe I missed something, but I tried expo.snack and demos but it still doesn't work

joafran commented 3 years ago

I just realized that I installed react instead react-native dependency.