title: React native pulse image as instagram
body: <p>This is what I would like to create, the actual pulse with the image animation.</p>
  
  <p><img src="https://user-images.githubusercontent.com/20476002/50531650-03a36b80-0b0e-11e9-942b-37c29680e191.gif" alt="20181229_010048"></p>
  
  <p>This is what I managed to create.</p>
  
  <p>Only it does not convince me the result that I managed to have.</p>
  
  <p>I would like to have an animation on the image.</p>
  
  <p>I do not understand what does not convince me in the result of the image.</p>
  
  <p><a href="https://i.stack.imgur.com/gV7Hu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gV7Hu.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <pre><code>import * as React from 'react';
  import { Text, View, StyleSheet, Image } from 'react-native';
  import { Constants } from 'expo';
  import { LinearGradient } from 'expo';
  import PulseAnim from 'react-native-pulse-anim';
  
  var size = 60;
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Image
            style={{
              width: 70,
              height: 70,
              borderRadius: 35,
              marginBottom: 20,
            }}
            source={{
              uri:
                'https://vignette.wikia.nocookie.net/spooks/images/8/83/Lara_Pulve.jpg/revision/latest?cb=20111224003538',
            }}
          /&gt;
  
          &lt;LinearGradient
            height={size}
            width={size}
            colors={['#8a49a1', '#8a49a1']}
            rotation={0}
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 40,
            }}&gt;
            &lt;LinearGradient
              height={size - 4}
              width={size - 4}
              colors={['#fff', '#fff']}
              rotation={0}
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 45,
              }}&gt;
              &lt;LinearGradient
                height={size - 8}
                width={size - 8}
                colors={['#000', '#000']}
                rotation={0}
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 45,
                }}&gt;
                &lt;PulseAnim
                  size={size - 20}
                  pulseMaxSize={size}
                  avatar={
                    'https://vignette.wikia.nocookie.net/spooks/images/8/83/Lara_Pulve.jpg/revision/latest?cb=20111224003538'
                  }
                /&gt;
              &lt;/LinearGradient&gt;
            &lt;/LinearGradient&gt;
          &lt;/LinearGradient&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      paddingTop: Constants.statusBarHeight,
      backgroundColor: '#000',
      padding: 8,
      alignItems: 'center',
    },
  });
  </code></pre>
  
  <p>Link: <a href="https://snack.expo.io/HydRKr4WN" rel="nofollow noreferrer">Here</a></p>
  
  <p>Does anyone know how to improve my pulse as instagram does?</p>