SafeAreaView Background Color Not Changing with Theme

[neverson-silva]

Problem

When applying the GlueStack styling to a SafeAreaView component in React Native, the background color is not changing correctly based on the theme. In these particular example, it should be green for the light theme and blue for the dark theme, but this behavior is not being observed.

Same behavior on android and ios.

Expected Behavior

• In the light theme, the SafeAreaView background color should be green.
• In the dark theme, the SafeAreaView background color should be blue.

Steps to Reproduce

1. Import SafeAreaView from 'react-native' and apply GlueStack styling as shown in the code snippet below.
2. Set the theme to light and render the SafeAreaView.
3. Observe the background color.

import { SafeAreaView as RNSafeAreaView } from 'react-native'
import { styled } from '@gluestack-style/react'

export const SafeAreaView = styled(RNSafeAreaView, {
  flex: 1,
  _light: {
    backgroundColor: 'green',
  },
  _dark: {
    backgroundColor: 'blue',
  },
})

[neverson-silva]

I managed to make it work, it turns out I didn't configure the colorMode