chore(suite-native): add SafeAreaProvider to BasicProvider for component tests

Author: jbazant

suite-native/test-utils/package.json

@@ -16,6 +16,7 @@
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
         "react": "18.2.0",
+        "react-native-safe-area-context": "^4.14.0",
         "react-redux": "8.0.7"
     }
 }

suite-native/test-utils/src/BasicProvider.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { NavigationContainer } from '@react-navigation/native';
 
@@ -14,9 +15,11 @@ const renderer = createRenderer();
 const theme = prepareNativeTheme({ colorVariant: 'standard' });
 
 export const BasicProvider = ({ children }: ProviderProps) => (
-    <IntlProvider>
-        <StylesProvider theme={theme} renderer={renderer}>
-            <NavigationContainer>{children}</NavigationContainer>
-        </StylesProvider>
-    </IntlProvider>
+    <SafeAreaProvider>
+        <IntlProvider>
+            <StylesProvider theme={theme} renderer={renderer}>
+                <NavigationContainer>{children}</NavigationContainer>
+            </StylesProvider>
+        </IntlProvider>
+    </SafeAreaProvider>
 );

suite-native/test-utils/src/expoMock.js

@@ -1,3 +1,5 @@
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
+
 jest.mock('expo-localization', () => {
     const Localization = {
         getLocales: () => [
@@ -403,3 +405,5 @@ jest.mock('expo-constants', () => {
 });
 
 jest.mock('redux-devtools-expo-dev-plugin', () => () => next => next);
+
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

yarn.lock

@@ -11168,6 +11168,7 @@ __metadata:
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
     react: "npm:18.2.0"
+    react-native-safe-area-context: "npm:^4.14.0"
     react-redux: "npm:8.0.7"
   languageName: unknown
   linkType: soft