search

joshua-augustinus / training-daily-completion

0 stars 0 forks source link

Rotate #11

Open joshua-augustinus opened 3 years ago

joshua-augustinus commented 3 years ago 
 return (
        < >
            <View  >
                <View style={{ width: '100%', height: '100%', transform: [{ rotate: '-90deg' }] }}>

                    <Svg height='100%' width='100%' viewBox="0 0 100 100">

                        <AnimatedCircle
                            ref={circleRef}
                            cx="50" cy="50" r={RADIUS_2} fill='transparent'
                            stroke="white"
                            strokeWidth={6}
                            strokeDasharray={circleCircumference}
                            strokeDashoffset={circleCircumference}
                            strokeLinecap='round' />
                    </Svg>

                </View>

            </View>
            <View style={StyleSheet.absoluteFill}>

                <Svg height="100%" width="100%" viewBox="0 0 100 100">
                    <Ellipse cx="50" cy="50" rx={RADIUS_3} ry={RADIUS_3} fill={DrivenColors.SECONDARY} />
                </Svg>

            </View>
            <View style={styles.textContainer}>
                <Tick renderTick={new Date()} />
                <View style={styles.textRow}>
                    <Text style={styles.daily}>Daily </Text>
                    <Text style={styles.bonus}>Bonus!</Text>
                </View>

            </View>
        </>

    );