javascript - Expo SDK 52 Flickering of StatusBar when navigating to another screen on Android - Stack Overflow

admin管理员组

文章数量:1405534

I'm experiencing issues using Expo-managed code on Android (SDK 52). I have followed the documentation on the Expo site, however, when I navigate to another screen, I notice the Statusbar flickers (to the previous color) if the target screen has a different statusBarBackgroundColor.

// _layout.tsx

      <>
        <Stack>
          <Stack.Screen
            name="index"
            options={{
              headerShown: false,
              statusBarBackgroundColor: 'yellow',
              navigationBarColor: 'yellow'
            }}
          />

          <Stack.Screen
            name="testPage"
            options={{
              presentation: 'fullScreenModal',
              animation: 'slide_from_left',
              headerShown: false,
              statusBarBackgroundColor: 'red',
              navigationBarColor: 'red'
            }}
          />
        </Stack>
      </>


// target screen is testPage

  return (

    <SafeAreaView style={[styles.container, { flex: 1, backgroundColor : 'red' }]}>
      <StatusBar style="light" animated={true} backgroundColor='red' translucent={true}/>
      <TouchableOpacity onPress={()=> router.back()}>
          <Text>Test</Text>
      </TouchableOpacity>
    </SafeAreaView>
 
  )

Following the expo documentation, I needed to add the StatusBar component at a screen level otherwise, I had a 1-second delay with the statusbar color being updated. This fixed the delay issue, but the downside is, this is now causing flickering/flashing on the statusbar. I'm testing this on a Samsung Galaxy S22. Any help would be much appreciated.

本文标签： javascriptExpo SDK 52 Flickering of StatusBar when navigating to another screen on AndroidStack Overflow