Using Animated with border[Top/RIght/Bottom/Left] property is not playing well

[questionablequestion]

Description

Adding animation to View that has borders declared by top/right/bottom/left isn't animating well. I have confirmed this issue on Android 8.x. Haven't tested earlier versions, but iOS 13 and Android 10 works fine.

React Native version:

react-native: ^0.63.3 => 0.63.3

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Add View with style where you add only borderTopColor
2. Add Animation to that view

Expected Results

For circle to rotate normally without glitching.

Snack, code example, screenshot, or link to a repository:

import React from 'react';
import { Animated, Easing, StyleSheet } from 'react-native';

const Spinner = React.memo() => {
  const spinValue = new Animated.Value(0);

  Animated.loop(
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: true,
    }),
  ).start();

  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  return (
    <Animated.View style={[style.root, {transform: [{rotate: spin}]}]}></Animated.View>
  );
});

export default Spinner;

const style = StyleSheet.create({
    root: {
        width: 20,
        height: 20,
        borderRadius: 10,
        borderWidth: 2,
        borderColor: 'black',
        borderLeftColor: 'transparent',
        borderBottomColor: 'transparent',
    }
})

[github-actions]

This issue is stale because it has been open 365 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.