diff --git a/app/containers/SafeAreaView.tsx b/app/containers/SafeAreaView.tsx
index 3794fdb91..2ffae53ec 100644
--- a/app/containers/SafeAreaView.tsx
+++ b/app/containers/SafeAreaView.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewProps } from 'react-native';
 import { SafeAreaView as SafeAreaContext } from 'react-native-safe-area-context';
 
 import { themes } from '../constants/colors';
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	view: {
@@ -11,22 +11,24 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface ISafeAreaView {
-	testID?: string;
-	theme?: string;
+type SupportedChildren = React.ReactElement | React.ReactElement[] | null;
+type TSafeAreaViewChildren = SupportedChildren | SupportedChildren[];
+
+interface ISafeAreaView extends ViewProps {
 	vertical?: boolean;
-	style?: object;
-	children: React.ReactNode;
+	children: TSafeAreaViewChildren;
 }
 
-const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => (
-	<SafeAreaContext
-		style={[styles.view, { backgroundColor: themes[theme!].auxiliaryBackground }, style]}
-		edges={vertical ? ['right', 'left'] : undefined}
-		testID={testID}
-		{...props}>
-		{children}
-	</SafeAreaContext>
-));
+const SafeAreaView = React.memo(({ style, children, vertical = true, ...props }: ISafeAreaView) => {
+	const { theme } = useTheme();
+	return (
+		<SafeAreaContext
+			style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+			edges={vertical ? ['right', 'left'] : undefined}
+			{...props}>
+			{children}
+		</SafeAreaContext>
+	);
+});
 
-export default withTheme(SafeAreaView);
+export default SafeAreaView;