diff --git a/Storybook/package-lock.json b/Storybook/package-lock.json index e45f40da..d3555b1c 100644 --- a/Storybook/package-lock.json +++ b/Storybook/package-lock.json @@ -19,6 +19,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", @@ -35380,6 +35381,14 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/react-native-device-info": { + "version": "10.12.0", + "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.12.0.tgz", + "integrity": "sha512-gnBkjyZNEqRd+5BNrdzuvmlraHTCH/to2x0Gp9rtDt0O9xWWW1MTYohUVWX9A0Ad2HVYcGanDCIvjWp4ngMZFg==", + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/react-native-drop-shadow": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/react-native-drop-shadow/-/react-native-drop-shadow-0.0.6.tgz", diff --git a/Storybook/package.json b/Storybook/package.json index 6a2e843d..6821f1e5 100644 --- a/Storybook/package.json +++ b/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", diff --git a/jest.config.ts b/jest.config.ts index 01f93184..db6c509a 100644 --- a/jest.config.ts +++ b/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', ], diff --git a/jest.setup.js b/jest.setup.js new file mode 100644 index 00000000..41f5d92d --- /dev/null +++ b/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); diff --git a/package-lock.json b/package-lock.json index 424b499a..b31d581e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "@gorhom/bottom-sheet": "*", "react": "*", "react-native": "*", + "react-native-device-info": "*", "react-native-drop-shadow": "*", "react-native-gesture-handler": "*", "react-native-icomoon": "*", @@ -13385,6 +13386,15 @@ "react": "18.2.0" } }, + "node_modules/react-native-device-info": { + "version": "10.12.0", + "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.12.0.tgz", + "integrity": "sha512-gnBkjyZNEqRd+5BNrdzuvmlraHTCH/to2x0Gp9rtDt0O9xWWW1MTYohUVWX9A0Ad2HVYcGanDCIvjWp4ngMZFg==", + "peer": true, + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/react-native-drop-shadow": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/react-native-drop-shadow/-/react-native-drop-shadow-0.0.8.tgz", @@ -25455,6 +25465,13 @@ } } }, + "react-native-device-info": { + "version": "10.12.0", + "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.12.0.tgz", + "integrity": "sha512-gnBkjyZNEqRd+5BNrdzuvmlraHTCH/to2x0Gp9rtDt0O9xWWW1MTYohUVWX9A0Ad2HVYcGanDCIvjWp4ngMZFg==", + "peer": true, + "requires": {} + }, "react-native-drop-shadow": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/react-native-drop-shadow/-/react-native-drop-shadow-0.0.8.tgz", diff --git a/package.json b/package.json index d6f4a368..96f1e342 100644 --- a/package.json +++ b/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": "*" + } } diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx index b7fc60f8..04ce5126 100644 --- a/src/components/Screen.tsx +++ b/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, }, });