title: Lottie Animation not appearing in CardView?
body: <p>I am having a hard time displaying a Lottie animation where I want it. So far, I am able to display it outside like this:</p>
  <pre><code>&lt;View style = { styles.MainContainer }&gt;
     &lt;Animation
           progress={this.state.progress}
           source={require('../Animations/favourite_app_icon.json')}
  
           /&gt;
       &lt;ScrollView&gt;
  
          &lt;FlatList
  
            data={ this.state.dataSource}
  
            ItemSeparatorComponent = {this.FlatListItemSeparator}
  
  
            renderItem={({item}) =&gt; &lt;View&gt;
  
  
            &lt;View style={styles.coverContainer}&gt;
        &lt;ImageBackground
          source={{uri:`http://www.example.com/img/123.jpg`}}
          style={styles.coverImage}
        &gt;
        &lt;/ImageBackground&gt;
      &lt;/View&gt;
      &lt;View style={styles.ImageContainer}&gt;
  
      &lt;/View&gt;
  
  
            &lt;/View&gt;
  
  
          }
  
          keyExtractor={(item, index) =&gt; index.toString()}
          removeClippedSubviews
  
       /&gt;
  
       &lt;FlatList
  
         data={ this.state.image}
  
         ItemSeparatorComponent = {this.FlatListItemSeparator}
  
  
         renderItem={({item}) =&gt; &lt;View&gt;
  
  
         &lt;RkCard style={{width:'75%', marginLeft: 50, marginBottom: 50, backgroundColor:'#f5f5f5'}}&gt;
  
           &lt;View rkCardContent&gt;
  
           &lt;/View&gt;
           &lt;View rkCardFooter&gt;
           
             &lt;Text&gt; Notes&lt;/Text&gt;
           &lt;/View&gt;
  
         &lt;/RkCard&gt;
  
  
         &lt;/View&gt;
  
  
       }
  
       keyExtractor={(item, index) =&gt; index.toString()}
       removeClippedSubviews
  
    /&gt;
  
  
       &lt;/ScrollView&gt;
       &lt;/View&gt;
  </code></pre>
  <p>This setup just allows the animation to play in the background while the content is on top of it. I want the animation to play inside the content like this:</p>
  <pre><code>&lt;View style = { styles.MainContainer }&gt;
     
       &lt;ScrollView&gt;
  
          &lt;FlatList
  
            data={ this.state.dataSource}
  
            ItemSeparatorComponent = {this.FlatListItemSeparator}
  
  
            renderItem={({item}) =&gt; &lt;View&gt;
  
  
            &lt;View style={styles.coverContainer}&gt;
        &lt;ImageBackground
          source={{uri:`http://www.example.com/img/123.jpg`}}
          style={styles.coverImage}
        &gt;
        &lt;/ImageBackground&gt;
      &lt;/View&gt;
      &lt;View style={styles.ImageContainer}&gt;
  
      &lt;/View&gt;
  
  
            &lt;/View&gt;
  
  
          }
  
          keyExtractor={(item, index) =&gt; index.toString()}
          removeClippedSubviews
  
       /&gt;
  
       &lt;FlatList
  
         data={ this.state.image}
  
         ItemSeparatorComponent = {this.FlatListItemSeparator}
  
  
         renderItem={({item}) =&gt; &lt;View&gt;
  
  
         &lt;RkCard style={{width:'75%', marginLeft: 50, marginBottom: 50, backgroundColor:'#f5f5f5'}}&gt;
  
           &lt;View rkCardContent&gt;
  
           &lt;/View&gt;
           &lt;View rkCardFooter&gt;
             &lt;Animation
           progress={this.state.progress}
           source={require('../Animations/favourite_app_icon.json')}
  
           /&gt; // Animation here
             &lt;Text&gt; Notes&lt;/Text&gt;
           &lt;/View&gt;
  
         &lt;/RkCard&gt;
  
  
         &lt;/View&gt;
  
  
       }
  
       keyExtractor={(item, index) =&gt; index.toString()}
       removeClippedSubviews
  
    /&gt;
  
  
       &lt;/ScrollView&gt;
       &lt;/View&gt;
  </code></pre>
  <p>I tried putting the animation in other places and I still get the same result. My conclusion is that it has something to do with ScrollView.</p>
  <p>The problem isn't with ScrollView, it's with cardview, and it's causing the animation to go off screen.</p>