Feature/update screen and top bar

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,4 @@
+// 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';
+// eslint-disable-next-line no-undef
+jest.mock('react-native-device-info', () => mockRNDeviceInfo);

package.json

@@ -62,8 +62,6 @@
     "jest-junit": "^15.0.0",
     "pod-install": "^0.1.0",
     "prettier": "3.0.3",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
@@ -75,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,
         },
     });

src/components/badge/Badge.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, ViewStyle } from 'react-native';
 
 import { Body } from '../typography/Body';
-import { ThemType, useTheme } from '../../styles/themes';
+import { Theme, useTheme } from '../../styles/themes';
 import type { WithTestID } from 'src/shared/type';
 
 type BadgeProps = WithTestID<{
@@ -11,7 +11,7 @@ type BadgeProps = WithTestID<{
     style?: ViewStyle;
 }>;
 
-const createStyle = (theme: ThemType, style?: ViewStyle) => {
+const createStyle = (theme: Theme, style?: ViewStyle) => {
     return StyleSheet.create({
         badge: {
             backgroundColor: theme.sw.colors.neutral[700],

src/components/topAppBar/TopAppBar.tsx

@@ -3,6 +3,7 @@ import { Appbar } from 'react-native-paper';
 import { useTheme } from '../../styles/themes';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { Headline } from '../typography/Headline';
+import DeviceInfo from "react-native-device-info";
 import type { IconSource } from 'react-native-paper/lib/typescript/components/Icon';
 import type { WithTestID } from 'src/shared/type';
 
@@ -33,11 +34,13 @@ export const TopAppBar = ({
     testID,
 }: Props) => {
     const theme = useTheme();
+    const isTablet = DeviceInfo.isTablet();
+
     const styles = StyleSheet.create({
         button: {
             backgroundColor: 'rgba(145, 158, 171, 0.24)',
             borderRadius: 18,
-            marginLeft: 12,
+            marginLeft: isTablet ? 12 : theme.sw.spacing.xs,
         },
         title: {
             paddingTop: size === 'medium' ? 9 : 0,

src/styles/themes.tsx

@@ -106,8 +106,8 @@ const theme = {
     },
 };
 
-export type ThemType = typeof theme;
-export const useTheme = () => usePaperTheme<ThemType>();
+export type Theme = typeof theme;
+export const useTheme = () => usePaperTheme<Theme>();
 
 type Props = {
     children?: ReactNode;