💄 Screen - apply different padding if it's tablet or not

Storybook/package.json

@@ -27,6 +27,7 @@
     "react-dom": "^18.2.0",
     "react-native": "0.72.4",
     "react-native-code-push": "^8.1.0",
+    "react-native-device-info": "^10.12.0",
     "react-native-drop-shadow": "^0.0.6",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-icomoon": "^0.1.1",

jest.config.ts

@@ -20,6 +20,7 @@ const jestConfig: JestConfigWithTsJest = {
     ],
     moduleDirectories: ['node_modules', 'src'],
     setupFiles: [
+        './jest.setup.js',
         './node_modules/react-native-gesture-handler/jestSetup.js',
         './node_modules/react-native/jest/setup.js',
     ],

jest.setup.js

@@ -0,0 +1,3 @@
+// This 2 following lines are mandatory since we add and use react-native-device-info
+import mockRNDeviceInfo from 'react-native-device-info/jest/react-native-device-info-mock';
+jest.mock('react-native-device-info', () => mockRNDeviceInfo);

package.json

@@ -73,15 +73,15 @@
     "@gorhom/bottom-sheet": "*",
     "react": "*",
     "react-native": "*",
+    "react-native-device-info": "*",
+    "react-native-drop-shadow": "*",
     "react-native-gesture-handler": "*",
     "react-native-icomoon": "*",
+    "react-native-linear-gradient": "*",
     "react-native-paper": "*",
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-vector-icons": "*",
-    "react-native-drop-shadow": "*",
-    "react-native-linear-gradient": "*"
-  },
-  "dependencies": {}
+    "react-native-vector-icons": "*"
+  }
 }

src/components/Screen.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { SafeAreaView, ViewStyle, StatusBar, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../styles/themes';
+import DeviceInfo from 'react-native-device-info';
 import type { WithTestID } from 'src/shared/type';
 
 type Props = WithTestID<{
@@ -13,14 +14,15 @@ type Props = WithTestID<{
 export const Screen = ({ children, style, testID, statusBarColor }: Props) => {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
+    const isTablet = DeviceInfo.isTablet();
 
     const styles = StyleSheet.create({
         screen: {
             flex: 1,
             backgroundColor: theme.sw.colors.neutral[50],
             marginTop: insets.top,
-            paddingLeft: theme.sw.spacing.m,
-            paddingRight: theme.sw.spacing.m,
+            paddingLeft: isTablet ? theme.sw.spacing.m : 0,
+            paddingRight: isTablet ? theme.sw.spacing.m : 0,
             ...style,
         },
     });