Expo SDK39 flashing jumping SaveArea

[lc3t35]

After migrating my sdk38 expo app to sdk39, I have this strange behavior (on Android and ios) - flash is slowed down 30x to be able to see it as stays during just one frame in the video.

As I have a LinearGradient background, to keep the white screen at bottom, I'm using SafeAreaView this way ;

import React, { Fragment } from 'react';
import {
  SafeAreaView,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

const WrapSafeAreaView = ({ children }) => {
  const insets = useSafeAreaInsets();
  return (
    <Fragment>
      <SafeAreaView
        style={{
          flex: 0,
          backgroundColor: '#6C5AEE',
          paddingBottom: -30,
        }}
      />
      <SafeAreaView
        style={{
          paddingTop: -insets.top,
          flex: 1,
          backgroundColor: '#ffffff',
        }}
      >
        {children}
      </SafeAreaView>
    </Fragment>
  );
};

export default WrapSafeAreaView;

Any idea ?

[AND-GORNIY]

After migrating my sdk38 expo app to sdk39, I have this strange behavior (on Android and ios) - flash is slowed down 30x to be able to see it as stays during just one frame in the video.

As I have a LinearGradient background, to keep the white screen at bottom, I'm using SafeAreaView this way ;

import React, { Fragment } from 'react';
import {
  SafeAreaView,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

const WrapSafeAreaView = ({ children }) => {
  const insets = useSafeAreaInsets();
  return (
    <Fragment>
      <SafeAreaView
        style={{
          flex: 0,
          backgroundColor: '#6C5AEE',
          paddingBottom: -30,
        }}
      />
      <SafeAreaView
        style={{
          paddingTop: -insets.top,
          flex: 1,
          backgroundColor: '#ffffff',
        }}
      >
        {children}
      </SafeAreaView>
    </Fragment>
  );
};

export default WrapSafeAreaView;

Any idea ?

Not a perfect solution, but for me helped use useSafeAreaInsets() with View and paddings instead SafeAreaView. But it did not resolve problem completely.

[lc3t35]

Thank you @AND-GORNIY but I need a perfect solution ;) Anyone else ? @janicduplessis any idea ?

[GrabbenD]

Same issue here. @AND-GORNIY's suggestion is the best workaround at the moment

[alexandreguedj]

I agree, @AND-GORNIY has a good workaround. Thank you.

[emin93]

Same here, using following versions:

"react-native": "0.66.0"
"react-native-safe-area-context": "^3.3.2"
"@react-navigation/native": "^6.0.4"
"@react-navigation/native-stack": "^6.2.5"

Workaround from @AND-GORNIY resolved the issue.

[jacobp100]

It's a documented - and currently un-resolvable - issue with the hooks. Use the components directly to avoid it