How to change background color (safeareaview) with React Native Elements theme property?

Question

I have started using React Native Elements (https://reactnativeelements.com) for a new project.

I am trying to update the light and dark theme colours (https://reactnativeelements.com/docs/customization/theming) to have specific background colours (see the theme object - https://reactnativeelements.com/docs/customization/color). However, this doesn't seem to work (the safeareaview and the rest of the screen still remains white when the mode is dark - everything should be #121212). The buttons do change color when I change "mode:dark" to be "mode:white" (second image) and vice versa.

Since I am new to this, I am sure I am missing something but can't figure out what. In a nutshell - I want the background color to come from the theme 'background' property.

Thanks for your time!

import { Button, ThemeProvider, createTheme, withTheme } from "@rneui/themed";
import { SafeAreaView } from "react-native-safe-area-context";

const theme = createTheme({
  lightColors: {
    primary: "#f2f2f2",
    background: "#f2f2f2",
  },
  darkColors: {
    primary: "#121212",
    background: "#121212",
  },
  mode: "dark",
  Button: {
    raised: true,
  },
});

export default function App() {
  return (
    <SafeAreaView>
      <ThemeProvider theme={theme}>
        <Button title="My Button" />
        <Button title="My 2nd Button" />
      </ThemeProvider>
    </SafeAreaView>
  );
}

Here is my package.json

  "name": "rn-elements-ui-lib",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@rneui/base": "^4.0.0-rc.1",
    "@rneui/themed": "^4.0.0-rc.1",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-safe-area-context": "^4.2.4",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Screenshot 1 Screenshot 2

Answer 1

I had the same problem. I solved it by creating a custom View that applies the theme background.

import * as React from 'react';
import { withTheme } from "@rneui/themed";
import { View as NativeView } from "react-native";

function View({ theme, children, style, ...props }: any) {
  return (
    <NativeView {...props} style={{ backgroundColor: theme.colors.background, ...(style ?? {}) }}>
      {children}
    </NativeView>
  );
}

export default withTheme(View);

Then I use it in my app similar to yours.

<SafeAreaProvider>
  <ThemeProvider theme={theme}>
    <View style={{ flex: 1, minHeight: '100%', width: '100%' }}>
      // The rest of my app
    </View>
  </ThemeProvider>
</SafeAreaProvider>

You may need to wrap it in a scroll view depending on your app.