react native animation don't work properly on Android 8 and below

i have loader component `

import React, {useEffect, useState} from 'react';
import {Animated, Easing} from 'react-native';
import styled from "styled-components";
import Colors from '../../assets/styles/colors';
import Fonts from '../../assets/styles/fonts';

const Loader = props => {
    const [degree] = useState(new Animated.Value(0));
    const spin = degree.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
    });


    useEffect(() => {

        const spinner = () => {
            degree.setValue(0);
            Animated.timing(
                degree,
                {
                    toValue: 1,
                    duration: 750,
                    easing: Easing.linear,
                    useNativeDriver: true,
                }
            ).start(spinner);
        };

        spinner();
    }, []);

    return (
        <Container>
            <Animated.View style={{
                width: 120,
                height: 120,
                borderRadius: 100,
                borderWidth: 10,
                borderColor: '#f3f3f3',
                borderTopWidth: 10,
                borderTopColor: Colors.BLUE_SEVEN,
                backgroundColor: Colors.BLACK_SEVEN,
                transform: [{ rotateZ: spin}]
            }}/>
            <Text>Loading, Please wait...</Text>
        </Container>
    )
};

const Container = styled.View`
    flex: 1;
    background: ${Colors.WHITE_ONE};
    alignItems: center;
    justifyContent: center;
`;


const Text = styled.Text`
    font-family: ${Fonts.POPPINS_MEDIUM};
    font-size: 16px;
    color: ${Colors.BLUE_SEVEN};
    textTransform: uppercase;
    padding: 20px;
`;

export default Loader;
`

it works fine on Android 9 and 10 (rotating around center screen), but on 8 and below its very weird, and dont stay in center. Who know where is problem?введите сюда код