From: Real native SVG stroke animation

stroke property

Stroke defines the stroke color

stroke="#0078ff"

strokeWidth defines the width of the stroke

strokeWidth="3"

Properties used to create dashes:

strokeDasharray creating dashed lines

// Suppose a space of 5 pixels, a space of 5 pixels

strokeDasharray="5"  
// What we can see is a 5-pixel solid line, 5-pixel blank, 5-pixel solid line

strokeDasharray="5,10"  
// What you see is a solid line with 5 pixels, 10 pixels blank... Loop

Displacement of dashed line in strokeDashoffset

strokeDasharray="5"
strokeDashoffset="1"
// The first one you see moves 1 pixel to the left

Stroke animation

There is enough blank, control the displacement, let the blank position move, the position of the solid line will slowly show.
Suppose the width of gray area is 300:

If the strokeDashoffset changes continuously from 300 to 0, it's a stroke

There's a little solid running

There is enough space and a small solid line. Change the strokeDashoffset to control the movement of the space

If the strokeDashoffset changes continuously from 20 to 320, you will see a small solid line sliding from right to left. Draw a curve to run it.

In react native, you can use animated to change the value of strokeDashoffset for animation.
In addition, software such as sketch can draw vector map and form svg format, which is basically convenient for modification.

rn

npm install --save react-native-svg

If ART in react native is used, strokeDasharray and strokeDashoffset are written in the strokeDash property.
A chestnut that is not an example:

import {
    Animated 
    ...
} from 'react-native';

import Svg, {
    G,
    Path
} from 'react-native-svg';

// Notice to use Animated.createAnimatedComponent to make components animatable
let AnimatePath = Animated.createAnimatedComponent(Path);

...
    constructor (props) {
        super(props);

        this.state = {
            strokeDashOffset: new Animated.Value(38)
        }
    }

    changeStroke = () => {
        // Use cool animated to make small segments run happily
        Animated.spring(
            this.state.strokeDashOffset,
            {
                toValue: 243
            }
        ).start();
    };

    render () {

        return (
            <View>
                ...
                <TouchableWithoutFeedback
                    onPress={this.changeStroke}
                >
                    <Svg
                        height="100"
                         width="100"
                    >
                        <G fill="none">
                            <AnimatePath
                                d={A bunch of paths}
                                stroke="#0078FF"
                                strokeWidth="3"
                                strokeDasharray="28,215"
                                strokeDashoffset={this.state.strokeDashOffset}
                               />
                           </G>
                      </Svg>
                </TouchableWithoutFeedback>
            </View>
        )
    }