I have encountered this, too.

I have the same issue:(

Same issue here

Same here.
Can't use the StatusBar component from expo-status-bar to handle it because it happens before the JS code takes over.

I am also experiencing this issue and is very prominent on a "real world" app, I also assumed this has to do with the status bar but yet to have the time to investigate and test properly but good to know from@pleopardiI may be wasting my time on that!

An expo sdk fix would be preferred

From what I read in other issues, it's probably some configuration to add in styles.xml, but I couldn't figure it out yet.

The "jump" happens the moment the status bar is displayed while the splash screen is still visible.

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#060047",
"translucent": true
},
}
}

Same here, hope this gets fixed soon!!

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#060047",
"translucent": true
},
}
}

This is a good solution but makes the statusbar semi-transparent.

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#060047",
"translucent": true
},
}
}

This is a good solution but makes the statusbar semi-transparent.

the same issue happens here and I can't make the status bar to transparent even set the background color to #00000000..

Are there any solutions to this other than uninstalling the expo-status-bar package?

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#060047",
"translucent": true
},
}
}

@TheEnduranceWe followed this solution above and it seems to have worked. The status bar on Android appears a bit different, but the splash screen logo no longer jumps and we didn't uninstall anything.

Is anyone else having trouble uninstallingexpo-status-bar?🙃

Our expo app is inside an Nx monorepo and I've:

1. Uninstalledexpo-status-bar
2. Removed all references toexpo-status-barincluding"expo-status-bar": "*"
3. Cleared bundler caches by followingthese instructions

And I'm still seeing this when I try to build android:

@techgermMaybe something else is installing it as a dependency. Can you show us the output of the following command:

npm ls expo-status-bar

hmm yeah that was my first intuition so I checked ouryarn.lockto see if it was included in any other dependencies and nothing found 😕

here's the output ofnpm ls expo-status-bar:

This is my thoughts about this issue.
If you callStatusBar.setTranslucent(true)while SplashScreen visible, SplashScreen leaps. If you call it when app screen is visible — app screen will leap.
To address this issue, I tied the event of adjusting StatusBar to the moment one frame before SplashScreen is replaced by app screen. I've sat SplashScreen"resizeMode": "cover",so SplashScreen image gets a bit enlarged before it disappears. Something like one frame animation. And it looks better than layout leap when StatusBar become translucent on SplashScreen or app screen.

App.js

constonLayoutRootView=useCallback(async()=>{
if(fontsLoaded){
awaitdelay(
()=>
StatusBar.pushStackEntry({
barStyle:'dark-content',
translucent:true,
animated:true,
backgroundColor:'transparent',
}),
2000// 2 sec delay for loading and render data
);
delay(SplashScreen.hideAsync,33);// hide SplashScreen one frame after StatusBar gets translucent
}
},[fontsLoaded]);

if(!fontsLoaded){
returnnull;
}

I make use of delay function for delayed execution of callback passed to it.

delay.js

exportconstdelay=(fun,timeout)=>
newPromise((resolve)=>setTimeout(resolve,timeout))
.then(fun)
.catch((e)=>console.log(e.message));

related:#28528

Because expo-router is used,i can't remove expo-status-bar; Are there any other good solutions?

The causes of startup graph jitter are:
SplashScreen.preventAutoHideAsync();
setTimeout(SplashScreen.hideAsync, 2000);

The easiest way is not to call SplashScreen.preventAutoHideAsync, is there any other component or method to delay the start screen?

expo start --no-dev --minify
use above command for start Expo

I have the same issue. It's especially annoying when app starts in dark mode, as the bar is still in light mode when it's visible. Then it disappears and splash screen shifts a bit. It's very noticeable.

I have the same issue. It's especially annoying when app starts in dark mode, as the bar is still in light mode when it's visible. Then it disappears and splash screen shifts a bit. It's very noticeable.

you can test it into other device

The problem is that even if your commandexpo start --no-dev --minifyworks, it would only affect development and we are seeing this on a standalone production build.
Also, telling somebody to try another device is not really helpful, it's unlikely it is only this one device with the problem when there are dozens of folks on here saying the same thing.

Any news on this? What is the current solution or fix?

Any news on this? What is the current solution or fix?

in my side,it's automatic working I don't how please check your network connection

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#060047",
"translucent": true
},
}
}

will it work for light and dark splash screens?

this is a tricky problem to solve for in a generic way with the current way that layout is handled on android. we're working with@zoontekon moving towards recommending and defaulting toedge to edge layoutwhich will simplify this greatly. until then, thank you to folks in this thread for helping each other out!

This solution worked for me: I removed the expo-status-bar from my project and I added the following properties to app.json

{
expo: {
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#060047",
"translucent": true
},
}
}

will it work for light and dark splash screens?

I tried this and it solved the issue for me for both light mode and dark mode. Not sure why it works also on dark mode to be honest, but I tested it for both Android and iOS and seems to work fine, so I won't dig more into it. Maybe it works only if the status bar has the same color as the app's background but that's fine for me. Thanks!

So I had same problem today, and I found out on reddit, thatReanimatedhook cause it.
if You use somewhere in app hookuseAnimatedKeyboardinit it with this argisStatusBarTranslucentAndroid,

example:
useAnimatedKeyboard({ isStatusBarTranslucentAndroid: true, })

I don't use that hook so that isn't the cause. Could you at least provide a link so that people who are willing to try it out can take a look for themselves.

I don't use that hook so that isn't the cause. Could you at least provide a link so that people who are willing to try it out can take a look for themselves.

Yes of course here is thelink to the reddit

Still on some Samsung mobiles, this clunky shaking happened even withe the previous fixes.

It is something expo has to fix it.. We can not give the client a clunky app.. His brand stand on the splash screen.... But a jumping splash... No way

I am having the same issue:/ I tried deleting expo status bar but it didn't work

This is what I used to fix this issue

I added aandroidStatusBarobject to the app.json and a transparent background colour

"androidStatusBar": {
"backgroundColor": "#00000000"
}

I created this plugin in it's own file calledwithAndroidSplashScreen.tsand added it as my plugin on the app.json file

const { AndroidConfig, withStringsXml } = require('@expo/config-plugins');

const withAndroidSplashScreen = (expoConfig) =>
withStringsXml(expoConfig, (modConfig) => {
modConfig.modResults = AndroidConfig.Strings.setStringItem(
[
{
_: 'true',
$: {
name: 'expo_splash_screen_status_bar_translucent',
translatable: 'false'
}
}
],
modConfig.modResults
);
return modConfig;
});


module.exports = withAndroidSplashScreen;

After making these changes, my splash screen stopped jumping when starting the app..

It needs a new build since the changes are on the app.json file

I found the solution here and it explains why the issue is happening -https:// aronberezkin /posts/a-step-by-step-guide-to-writing-your-first-expo-config-plugin

Goodluck I hope it helps

You can addreact-native-edge-to-edgeto your project for enabling edge-to-edge display on Android.

Paired withreact-native-bootsplash,it fixes this anoying jump issue. It will also work well with expo-splash-screen in Expo 52.