Merge pull request #120 from OpenDTU-App/113-ensure-every-view-has-some-margin-below-it

Author: CommanderRedYT

src/components/devices/DeviceList.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { Box } from 'react-native-flex-layout';
 
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import DeviceListItem from '@/components/devices/DeviceListItem';
 
@@ -22,6 +22,7 @@ const DeviceList: FC = () => {
           />
         ))}
       </Box>
+      <View style={{ height: spacing * 2 }} />
     </ScrollView>
   );
 };

src/components/inverters/InverterList.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { Box } from 'react-native-flex-layout';
 
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import InverterListItem from '@/components/inverters/InverterListItem';
 
@@ -43,6 +43,7 @@ const InverterList: FC = () => {
           />
         ))}
       </Box>
+      <View style={{ height: spacing * 2 }} />
     </ScrollView>
   );
 };

src/components/styled/StyledListItem.tsx

@@ -6,7 +6,7 @@ const StyledListItem: FC<ListItemProps> = props => {
   return (
     <Surface
       mode="flat"
-      elevation={props.disabled ? 1 : 5}
+      elevation={props.disabled ? 1 : 3}
       style={{
         borderRadius: 16,
         ...(props.disabled && { opacity: 0.5 }),

src/style.tsx

@@ -10,6 +10,8 @@ import { ScrollView, View } from 'react-native';
 
 import styled from 'styled-components';
 
+import { spacing } from '@/constants';
+
 import { DarkTheme, DefaultTheme } from '@react-navigation/native';
 
 export const ReactNavigationDarkTheme = {
@@ -34,20 +36,15 @@ export const ReactNavigationLightTheme = {
   },*/
 };
 
-export const StyledView = styled(View)`
-  background-color: ${props => props.theme.colors.background};
-  color: ${props => props.theme.colors.onBackground};
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-`;
-
 export interface StyledScrollViewProps extends ScrollViewProps {
   theme: MD3Theme;
+  disableSafeBottomMargin?: boolean;
 }
 
-export const StyledScrollView: FC<StyledScrollViewProps> = props => {
+export const StyledScrollView: FC<StyledScrollViewProps> = ({
+  children,
+  ...props
+}) => {
   const rnpTheme = useTheme();
   const theme = props.theme ?? rnpTheme;
 
@@ -60,21 +57,32 @@ export const StyledScrollView: FC<StyledScrollViewProps> = props => {
         color: theme.colors.onBackground,
         width: '100%',
       }}
-    />
+    >
+      {children}
+      {props.disableSafeBottomMargin ? null : (
+        <View style={{ height: spacing * 2 }} />
+      )}
+    </ScrollView>
   );
 };
 
 export type StyledSafeAreaViewProps = {
   theme?: MD3Theme;
+  enableSafeBottomMargin?: boolean;
 } & SafeAreaViewProps;
 
-const InternalStyledSafeAreaView = styled(SafeAreaView)<{ theme: MD3Theme }>`
+const InternalStyledSafeAreaView = styled(SafeAreaView)<{
+  theme: MD3Theme;
+  enableSafeBottomMargin?: boolean;
+}>`
   height: 100%;
   flex: 1;
   align-items: center;
   background-color: ${props => props.theme.colors.background};
   display: flex;
   color: ${props => props.theme.colors.onBackground};
+  padding-bottom: ${props =>
+    props.enableSafeBottomMargin ? spacing * 2 : 0}px;
 `;
 
 export const StyledSafeAreaView: FC<StyledSafeAreaViewProps> = props => {

src/views/navigation/screens/AboutAppScreen.tsx

@@ -16,7 +16,7 @@ import {
   useTheme,
 } from 'react-native-paper';
 
-import { Linking, ScrollView, Text as RNText } from 'react-native';
+import { Linking, ScrollView, Text as RNText, View } from 'react-native';
 
 import moment from 'moment';
 
@@ -26,6 +26,7 @@ import GenericRefreshModal from '@/components/modals/GenericRefreshModal';
 
 import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
 
+import { spacing } from '@/constants';
 import { useFetchControl } from '@/github/FetchHandler';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { StyledSafeAreaView } from '@/style';
@@ -189,6 +190,7 @@ const AboutAppScreen: FC<PropsWithNavigation> = ({ navigation }) => {
                 />
               )}
             />
+            <View style={{ height: spacing * 2 }} />
           </ScrollView>
         </Box>
       </StyledSafeAreaView>

src/views/navigation/screens/DebugColorsScreen.tsx

@@ -7,6 +7,7 @@ import { ScrollView, View } from 'react-native';
 
 import styled from 'styled-components';
 
+import { spacing } from '@/constants';
 import { StyledSafeAreaView } from '@/style';
 import type { PropsWithNavigation } from '@/views/navigation/NavigationStack';
 
@@ -50,7 +51,10 @@ const DebugColorsScreen: FC<PropsWithNavigation> = ({ navigation }) => {
       </Appbar.Header>
       <StyledSafeAreaView theme={theme}>
         <Box style={{ flex: 1, width: '100%' }}>
-          <ScrollView>{flatColors}</ScrollView>
+          <ScrollView>
+            {flatColors}
+            <View style={{ height: spacing * 2 }} />
+          </ScrollView>
         </Box>
       </StyledSafeAreaView>
     </>

src/views/navigation/screens/DebugScreen.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Box } from 'react-native-flex-layout';
 import { Appbar, IconButton, List, useTheme } from 'react-native-paper';
 
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import moment from 'moment';
 
@@ -17,6 +17,7 @@ import { setDebugEnabled } from '@/slices/settings';
 
 import { useApi } from '@/api/ApiHandler';
 import type { DebugInfo } from '@/api/opendtuapi';
+import { spacing } from '@/constants';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { StyledSafeAreaView } from '@/style';
 import type { PropsWithNavigation } from '@/views/navigation/NavigationStack';
@@ -148,6 +149,7 @@ const DebugScreen: FC<PropsWithNavigation> = ({ navigation }) => {
                 onPress={() => navigation.navigate('DebugColorsScreen')}
               />
             </List.Section>
+            <View style={{ height: spacing * 2 }} />
           </ScrollView>
         </Box>
       </StyledSafeAreaView>