Statusbar color changes to black

[HenrikZabel]

Issue Description

When navigating to a screen with the GiftedChat component following is happening:

untitled.webm

Steps to Reproduce / Code Snippets

https://github.com/FaridSafi/react-native-gifted-chat?tab=readme-ov-file#example

I've used the official example

Expected Results

Not changing the statusbar color to black

Additional Information

• Nodejs version: v21.5.0
• React version: 18.2.0
• React Native version: 0.74.3
• react-native-gifted-chat version: ^2.6.0
• Platform(s) (iOS, Android, or both?): Android (Couldn't test iOS)
• TypeScript version: ~5.3.3

I am using Expo with the expo router.

// app/(main)/_layout.tsx
import { color } from '@/constants/Colors';
import { Stack } from 'expo-router';
import React from 'react';
import { Text, View } from 'react-native';

export default function AppLayout() {
  return (
    <Stack
      screenOptions={{
        headerStyle: {
          backgroundColor: color.white,
        },
        headerShadowVisible: false,
      }}>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen
        name="chat"
        options={{
          title: '',
          headerBackTitleVisible: false,
          headerTitle: () => (
            <View
              style={{
                flexDirection: 'row',
                width: 220,
                alignItems: 'center',
                gap: 10,
                paddingBottom: 4,
              }}>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 20,
                  backgroundColor: color.gray,
                }}
              />
              <Text style={{ fontSize: 16, fontWeight: '500' }}>@henrik</Text>
            </View>
          ),
        }}
      />
    </Stack>
  );
}

// app/(main)/chat.tsx
import React, { useCallback, useEffect, useState } from 'react';
import { GiftedChat, IMessage } from 'react-native-gifted-chat';

export default function ChatScreen() {
  const [messages, setMessages] = useState<IMessage[]>([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ]);
  }, []);

  const onSend = useCallback((messages: IMessage[] = []) => {
    setMessages(previousMessages =>
      GiftedChat.append(previousMessages, messages),
    );
  }, []);

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  );
}

[iM-GeeKy]

@HenrikZabel I noticed the same behavior in a recent release and as a workaround had to add something like to explicitly set the background so it looked normal. Hopefully that may help unblock you.

import { StatusBar } from "expo-status-bar";
.
.
.
<StatusBar
  backgroundColor={
    theme.dark
      ? Theme.darkTheme.customColors.header
      : Theme.lightTheme.customColors.header
  }
/>