react-native-circular-progress-indicator/lib/typescript/types/index.d.ts

React Native customizable circular progress indicator

import type React from 'react';
import type { TextInputProps, TextStyle } from 'react-native';
import type { AnimateProps } from 'react-native-reanimated';
import type Animated from 'react-native-reanimated';
import type { CircleProps } from 'react-native-svg';
declare type StrokeLineCapType = 'butt' | 'round' | 'square';
declare type DashedStrokeConfigType = {
    /**
     * The total number of dashes to draw.
     */
    count: number;
    /**
     * The width of each dash.
     */
    width: number;
};
declare type CircleGradientProps = {
    /**
     * active progress circle color. Use this to change the
     * color of the progress ring.
     *
     * @default '#2ecc71'
     */
    activeStrokeColor?: string;
    /**
     * active progress secondary color. Use this to provide a
     * gradient effect. The circle will be drawn with gradient
     * activeStrokeColor and activeStrokeSecondaryColor.
     *
     * @default null
     */
    activeStrokeSecondaryColor?: string | null;
};
interface DashedCircleProps {
    circleCircumference: number;
    inActiveStrokeWidth: number;
    activeStrokeWidth: number;
    inactiveCircleRadius: number;
    activeCircleRadius: number;
    dashedStrokeConfig?: DashedStrokeConfigType;
}
declare type StrokeColorConfigType = {
    value: number;
    color: string;
};
interface BaseProgressCircleProps extends CircleGradientProps {
    /**
     * progress circle background color. Use this to
     * change the background color of the progress circle.
     *
     * @default 'transparent'
     */
    circleBackgroundColor?: string;
    /**
     * progress circle radius. This is useful if you want
     * to adjust the size of the progress circle.
     *
     * @default 60
     */
    radius?: number;
    /**
     * progress stroke line cap.
     */
    strokeLinecap?: StrokeLineCapType;
    /**
     * inactive progress circle color. Use this to change
     * the color of inactive circle.
     *
     * @default 'rgba(0,0,0,0.3)'
     */
    inActiveStrokeColor?: string;
    /**
     * inactive progress circle opacity value. This is useful if
     * you want to change the opacity of the inactive circle.
     *
     * @default 1
     */
    inActiveStrokeOpacity?: number;
    /**
     * active progress circle stroke width. Use this to change the
     * stroke width of the active progress circle.
     *
     * @default 10
     */
    activeStrokeWidth?: number;
    /**
     * inactive progress circle stroke width. Use this to change the
     * stroke width of the inactive progress circle.
     *
     * @default 10
     */
    inActiveStrokeWidth?: number;
    /**
     * This is useful if you want to display the progress circle as dashed lines.
     * The dashed stroke count and stroke width can be customized.
     * Based on these values and the radius of the circle,
     * the dash gap between each dashes will be calculated automatically.
     */
    dashedStrokeConfig?: DashedStrokeConfigType;
    /**
     * This is useful if you want to animate the progress circle stroke color
     * based on the animation value. The stroke color config accepts an array
     * of color & value object. You can define a specific color for a
     * specific value and the component will animate the color based on the
     * current animated value.
     * It is important to note that when this is used, the strokeColorConfig
     * will take precedence over the activeStrokeColor and the
     * activeStrokeSecondaryColor props.
     */
    strokeColorConfig?: StrokeColorConfigType[];
}
interface ProgressCircleProps extends BaseProgressCircleProps {
    animatedCircleProps: AnimateProps<CircleProps>;
}
interface BaseCircularProgressProps extends BaseProgressCircleProps {
    /**
     * progress percentage of the circle. Any change in
     * this value will trigger the animation.
     */
    value: number;
    /**
     * initial progress value. This is useful if you want to
     * use the progress circle as a countdown timer. This will
     * set the initial value of the animation value and will gradually
     * animate to the value of the value prop.
     *
     * @default 0
     */
    initialValue?: number;
    /**
     * progress animation duration. Use this to control the
     * duration of the progress animation.
     *
     * @default 500
     */
    duration?: number;
    /**
     * progress animation delay. Use this to provide a delay
     * to the progress animation. The animation will start after
     * the delay. Accepts a number in milliseconds.
     *
     * @default 0
     */
    delay?: number;
    /**
     * progress maximum value. The percentage calculation is
     * based on the maximum value provided.
     *
     * @default 100
     */
    maxValue?: number;
    /**
     * callback when animation is completed. This is useful if
     * you want to trigger an action after the animation is completed.
     */
    onAnimationComplete?: () => void;
    /**
     * change direction of progress ring. By default the progress
     * ring will be drawn clockwise. If you want to draw the progress
     * ring counter clockwise, set this to false.
     *
     * @default true
     */
    clockwise?: boolean;
    /**
     * Use this to render the progress circle initially without any animation.
     * This will by default pause the progress animation and the progress will
     * be kept at zero.
     * The component can be animated again by calling the `reAnimate` or `play`
     * function.
     *
     * @default false
     */
    startInPausedState?: boolean;
    /**
     * rotate the progress ring by this value. Accepts a number from -360 to 360.
     *
     * @default 0
     */
    rotation?: number;
}
interface CircularProgressBaseProps extends BaseCircularProgressProps {
    /**
     * custom child component for circular progress. This is
     * useful if you want to add a custom component to be
     * displayed inside the circular progress bar.
     */
    children?: React.ReactNode;
}
interface CircularProgressProps extends BaseCircularProgressProps {
    /**
     * title to display below the progress value. This
     * is useful if you want to display a title below the
     * progress value.
     *
     * @default ''
     */
    title?: string;
    /**
     * title text style. Use this props to customize the
     * title text style.
     *
     * @default {}
     */
    titleStyle?: TextStyle;
    /**
     * title text color. Use this to change the color of the
     * title text. If not provided, the active stroke color or
     * the color from title style will be used.
     *
     * @default null
     */
    titleColor?: string;
    /**
     * title text font size. Use this to change the font size
     * of the title text. If not provided, the font size from title
     * style  or a value calculated from the circle radius will be used.
     */
    titleFontSize?: number;
    /**
     * progress value text color. Use this to change the color of
     * the progress value text. If not provided, the active stroke color
     * or the color from progress value style style will be used.
     */
    progressValueColor?: string;
    /**
     * progress value text style. Use this props to customize the
     * progress value text style.
     *
     * @default {}
     */
    progressValueStyle?: TextStyle;
    /**
     * progress value text font size. Use this to change the font size
     * of the progress value text. If not provided, the font size from
     * progress value style or a value calculated from the circle radius
     * will be used.
     */
    progressValueFontSize?: number;
    /**
     * prefix value. This is useful if you want to display a prefix
     * value before the progress value.
     *
     * @default ''
     */
    valuePrefix?: string;
    /**
     * suffix value. Use this to display a suffix value after the
     * progress value.
     *
     * @default ''
     */
    valueSuffix?: string;
    /**
     * show or hide the progress text value. This is useful if you
     * want to hide the progress value text.
     *
     * @default true
     */
    showProgressValue?: boolean;
    /**
     * subtitle text value. Use this to display a subtitle below
     * the progress value.
     *
     * @default ''
     */
    subtitle?: string;
    /**
     * subtitle text style. Use this props to customize the
     * subtitle text style.
     *
     * @default {}
     */
    subtitleStyle?: TextStyle;
    /**
     * subtitle text color. Use this to change the color of the
     * subtitle text. If not provided, the active stroke color or
     * the color from subtitle style or the active stroke color
     * will be used.
     */
    subtitleColor?: string;
    /**
     * subtitle text font size. Use this to change the font size
     * of the subtitle text. If not provided, the font size from
     * subtitle style or a value calculated from the circle radius
     * will be used.
     */
    subtitleFontSize?: number;
    /**
     * function to format the progress value.
     * By default, the value is rounded to the nearest integer.
     * Make sure to define it as a worklet function.
     * https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
     */
    progressFormatter?: (v: number) => number | string;
    /**
     * specifies whether fonts should scale to respect Text Size
     * accessibility settings. Pass false to disable automatic text
     * scaling.
     */
    allowFontScaling?: boolean;
    /**
     * custom styling to value prefix.
     * Use this to customize the styling of the value prefix.
     * If not provided, the progress value style/colors will be used.
     *
     * * @default {}
     */
    valuePrefixStyle?: TextStyle;
    /**
     * custom styling to value suffix.
     * Use this to customize the styling of the value suffix.
     * If not provided, the progress value style/colors will be used.
     *
     * * @default {}
     */
    valueSuffixStyle?: TextStyle;
}
declare type ProgressValueProps = {
    initialValue: number;
    radius?: number;
    activeStrokeColor?: string;
    progressValueColor?: string;
    progressValueStyle?: TextStyle;
    progressValueFontSize?: number;
    progressValue: Animated.SharedValue<string>;
    animatedTextProps: AnimateProps<TextInputProps>;
    allowFontScaling?: boolean;
};
declare type ProgressRef = {
    /**
     * Use this to play the animation once  the animation is paused.
     */
    play: () => void;
    /**
     * Use this to pause the animation.
     */
    pause: () => void;
    /**
     * Use this to replay the animation.
     */
    reAnimate: () => void;
};
export type { CircleGradientProps, ProgressCircleProps, CircularProgressBaseProps, CircularProgressProps, DashedCircleProps, DashedStrokeConfigType, ProgressValueProps, StrokeColorConfigType, ProgressRef, };