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: <> <SafeAreaView /> <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.