Background color is not applying using react native paper PaperProvider custom theme solution

Question

Recently I was trying to use react native paper library in my application. But when I try to add background color using their custom theme option in PaperProvider component, Then it is not working. Can someone please help me to fix this I have to apply custom background color on complete screen using custom theme in react native paper PaperProvider.Below is my source code.

import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import { SafeAreaView, StyleSheet, View } from 'react-native';
export default function Main() {
 const mainTheme = {
...DefaultTheme,
colors: {
  ...DefaultTheme.colors,
  primary: 'tomato',
  accent: 'yellow',
  background: 'red'
},
  };
return (
<PaperProvider theme={mainTheme}>

</PaperProvider>
  );

}

Answer 1

You can wrap your content using a View component with the theme background color as its backgroundColor value:

<PaperProvider theme={mainTheme}>
  <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
    ...
  </View>
</PaperProvider>