Using SafeAreaView inside Animatable.View makes RAM increase at constant rate

[giregk]

First, thanks for this great library !

This is my code

import React from 'react';
import {SafeAreaView, Text} from 'react-native';
import * as Animatable from 'react-native-animatable';

export class AnimatedToaster extends React.Component {
  render() {
    return (
      <Animatable.View
        style={{
          backgroundColor: 'black',
          padding: 10,
          justifyContent: 'center',
          position: 'absolute',
          zIndex: 600,
          bottom: 0,
          left: 0,
          right: 0,
          width: '100%',
          opacity: 0,
        }}
      >
        <SafeAreaView>
          <Text style={{color: 'white'}}>Some Text</Text>
        </SafeAreaView>
      </Animatable.View>
    );
  }
}

// Then calling <AnimatedToaster /> in the app

95% of the time (although curiously not always), this code makes the RAM of my application increase continuously (without me doing anything). I haven't even started the animation yet. Everything is fine when removing the SafeAreaView.

[SaeedSyedAli96]

Try this maybe: `<>

<Animatable.View
    style={{
      backgroundColor: 'black',
      padding: 10,
      justifyContent: 'center',
      position: 'absolute',
      zIndex: 600,
      bottom: 0,
      left: 0,
      right: 0,
      width: '100%',
      opacity: 0,
    }}
  >
      <Text style={{color: 'white'}}>Some Text</Text>
  </Animatable.View>
  </>`

[MarioSilvaPrada]

Yup, happened to me as well! I removed the SafeAreaView and added some bottom padding.