How to use gradient colors in RN projects

I looked at the examples for the web version, but it didn’t solve my problem.

I run react-native init myapp to create a RN project, and run yarn add react-native-svg react-native-countdown-circle-timer@3.0.8 to add dependencies.

This is my App.js

import React from 'react';
import {Text, View} from 'react-native';
import Svg, {Defs, LinearGradient, Stop} from "react-native-svg";
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'

export default function App() {
  return (
    <View>
      <Svg width="0" height="0" >
        <Defs>
          <LinearGradient id="your-unique-id" x1="1" y1="0" x2="0" y2="0">
            <Stop offset="5%" stopColor="gold"/>
            <Stop offset="95%" stopColor="red"/>
          </LinearGradient>
        </Defs>
      </Svg>
      <CountdownCircleTimer
        colors="url(#your-unique-id)"
        size={200}
        strokeWidth={20}
        duration={60}
        initialRemainingTime={25}>
        {({remainingTime}) => <Text>{remainingTime}</Text>}
      </CountdownCircleTimer>
    </View>
  );
}

[vydimitrov]

Hey you can restart the timer the same way you do it with the component, by passing a key. So below is your CountdownCircleTimer:

// src/components/timer - this is your folder for shared components
export const CountdownCircleTimer = ({ duration, isPlaying, .... }) => {
  const {
    path,
    pathLength,
    stroke,
    strokeDashoffset,
    remainingTime,
    elapsedTime,
    size,
    strokeWidth,
  } = useCountdown({ isPlaying: true, duration, colors: 'url(#your-unique-id)' })

  return (
    <View style={styles.container}>
      <View style={{ width: size, height: size, position: 'relative' }}>
        <Svg width={size} height={size}>
          <Defs>
            <LinearGradient id="your-unique-id" x1="1" y1="0" x2="0" y2="0">
              <Stop offset="5%" stopColor="gold"/>
              <Stop offset="95%" stopColor="red"/>
            </LinearGradient>
          </Defs>
          <Path
            d={path}
            fill="none"
            stroke="#d9d9d9"
            strokeWidth={strokeWidth}
          />
          {elapsedTime !== duration && (
            <Path
              d={path}
              fill="none"
              stroke={stroke}
              strokeLinecap="butt"
              strokeWidth={strokeWidth}
              strokeDasharray={pathLength}
              strokeDashoffset={strokeDashoffset}
            />
          )}
        </Svg>
        <View style={styles.time}>
          <Text style={{ fontSize: 36 }}>{remainingTime}</Text>
        </View>
      </View>
    </View>
  );
}

Then in your App you just use it as it was before

import { CountdownCircleTimer } from 'src/components/timer '

<CountdownCircleTimer key="some-new-key-to-restart" duration={10} isPlaying />

Does it help?

[anastasiapyzhik]

Worked for me as well. Thanks!