React Native Screens swipe flickering or white edge in dark mode fix

react-native-screens with enableScreens() can reduce app memory usage and prevent your heavy stacked app slowing down since it bring native navigation component to React Native app.

One of the issue when using react-native-screens and enableScreens() setup is it intrucded a flickering bug when swipe or switch screen. It may not be noticeable without dark mode enabled. If you have dark mode, swipe slowly and will see a white edge at some point. Some version of react-native-screens do not have this issue, but the bug seems come and go in multiple versions.

Remove enableScreens() will resolve the issue, but you will lose the benefit of enableScreens() that help in app memory usage. Before react-native-screens officially fixed the issue completely, we can resolve the flicker/white edge issue with enableScreens() . Add below code to your screenOptions in Stack and you will you are all set.

<Stack.Navigator
  screenOptions={({ navigation }) => {
    return {
      detachPreviousScreen: !navigation.isFocused(),
    }
  }}
>