Merge pull request #199 from OpenDTU-App/198-fix-layout-issues-differences-between-android-and-ios

Author: CommanderRedYT

src/components/styled/StyledSurface.tsx

@@ -1,31 +1,32 @@
 import type { FC } from 'react';
-import type { SurfaceProps } from 'react-native-paper';
-import { Surface } from 'react-native-paper';
+import type { ViewProps } from 'react-native';
+import { useTheme } from 'react-native-paper';
 import type { ThemeProp } from 'react-native-paper/lib/typescript/types';
 
-import styled from 'styled-components';
+import { View } from 'react-native';
 
-const InternalStyledSurface = styled(Surface)<ExtraProps>`
-  border-radius: ${({ theme, roundness }) =>
-    theme.roundness! * (roundness ?? 4)}px;
-  flex: 1;
-  box-shadow: ${({ theme, disableShadow }) =>
-    disableShadow ? 'none' : theme.shadow};
-`;
-
-interface ExtraProps {
+export type StyledSurfaceProps = ViewProps & {
+  theme: ThemeProp;
   roundness?: number;
-  disableShadow?: boolean;
-}
+};
 
-export type StyledSurfaceProps = SurfaceProps & {
-  theme: ThemeProp;
-} & ExtraProps;
+const StyledSurface: FC<StyledSurfaceProps> = ({ children, ...props }) => {
+  const theme = useTheme();
 
-const StyledSurface: FC<StyledSurfaceProps> = ({ children, ...props }) => (
-  <InternalStyledSurface elevation={5} mode="flat" disableShadow {...props}>
-    {children}
-  </InternalStyledSurface>
-);
+  return (
+    <View
+      {...props}
+      style={{
+        //@ts-expect-error: 2698 because idk
+        ...(props?.style ?? {}),
+        borderRadius: theme.roundness! * (props.roundness ?? 4),
+        backgroundColor: theme.colors.elevation.level5,
+        flex: 1,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
 
 export default StyledSurface;

src/views/navigation/tabs/GraphTab.tsx

@@ -5,7 +5,7 @@ import DeviceOfflineWrapper from '@/components/DeviceOfflineWrapper';
 
 import { StyledScrollView, StyledView } from '@/style';
 
-const LivedataTab = () => {
+const GraphTab = () => {
   const theme = useTheme();
 
   return (
@@ -19,4 +19,4 @@ const LivedataTab = () => {
   );
 };
 
-export default LivedataTab;
+export default GraphTab;