Tried and react-native component but it fails because consume a lot of resources.

SkeletonLocationLoader.js

import React from 'react';
import { View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

class SkeletonLocationLoader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: '#F1F1F1',
      highlightColor: '#FFF',
      locationA: 0,
      counterFigA: 0,
    };
    this.counter = null;
  }

  componentDidMount() {
    const upperLimit = 0.99;
    this.counter = setInterval(() => {
      this.setState(current => ({
        counterFigA:
          current.counterFigA >= upperLimit ? 0 : current.counterFigA + 0.1,
      }));
    }, 40);
  }

  componentWillUnmount() {
    clearInterval(this.counter);
  }

  render() {
    const { backgroundColor, highlightColor, counterFigA } = this.state;

    return (
      <View>
        {[1, 2, 3].map(() => (
          <View style={{ flex: 1, flexDirection: 'row', marginVertical: 8 }}>
            <View
              style={{
                flex: 2,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <LinearGradient
                locations={[0, counterFigA, 1]}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                colors={[backgroundColor, highlightColor, backgroundColor]}
                style={styles.circle}
              />
            </View>

            <View style={{ flex: 9, justifyContent: 'center' }}>
              <LinearGradient
                locations={[0, counterFigA, 1]}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                colors={[backgroundColor, highlightColor, backgroundColor]}
                style={[styles.rectangle, { width: '70%' }]}
              />
              <LinearGradient
                locations={[0, counterFigA, 1]}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                colors={[backgroundColor, highlightColor, backgroundColor]}
                style={[styles.rectangle, { marginTop: 10 }]}
              />
            </View>

            <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                minHeight: 50,
              }}
            >
              <LinearGradient
                locations={[0, counterFigA, 1]}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                colors={[backgroundColor, highlightColor, backgroundColor]}
                style={[styles.icon]}
              />
            </View>
          </View>
        ))}
      </View>
    );
  }
}

SkeletonLocationLoader.propTypes = {};

const styles = {
  circle: {
    width: 40,
    height: 40,
    borderRadius: 40 / 2,
    backgroundColor: 'red',
  },
  rectangle: {
    width: '90%',
    height: 14,
    borderRadius: 14 / 2,
  },
  icon: {
    borderRadius: 14 / 2,
    width: 14,
    height: 14,
  },
};

export default SkeletonLocationLoader;