CODEWITHSUNDEEP
iosreact-nativeexpo
herbie
herbie

Reputation: 367

How to change status bar colour on splash screen for IOS

Is it possible to change a splash screen status bar colour on IOS in a React Native Expo app?

On other screens I am using React Natives useFocus like this:

  const isFocused = useIsFocused();
{isFocused ? <StatusBar style="light" /> : <StatusBar style="dark" />}

How can this be achieved on the splash screen for IOS?

Upvotes: 0

Views: 799

Answers (1)

Kirill Novikov
Kirill Novikov

Reputation: 3067

The splash screen is not part of the JS thread, it is part of the native app and you can't control it by JS. This means that you need setup it up programmatically for both platforms or use a special library and CLI like https://github.com/zoontek/react-native-bootsplash#setup

For expo you can try this configuration https://docs.expo.dev/tutorial/configuration/#step-3-configure-the-splash-screen-background-color

For android, this guide can help to create a splash screen https://www.geeksforgeeks.org/how-to-change-the-color-of-status-bar-in-an-android-app/ with a custom theme.

For IOS this guide is about status bar color https://sarunw.com/posts/change-status-bar-text-color-in-uikit/

Upvotes: 1

Related Questions