Fix native base warning and various other bugs (#100)

Co-authored-by: Josiah S <[email protected]>
Monash-FIT3170 · Oct 17, 2023 · c184ba7 · c184ba7
1 parent ac9f4ec
commit c184ba7
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 15 deletions.
diff --git a/src/frontend/Finding-Neno/App.js b/src/frontend/Finding-Neno/App.js
@@ -72,7 +72,7 @@ export default function App() {
 		<NativeBaseProvider>
 			<Provider store={store}>
 				<NavigationContainer theme={scheme === 'dark' ? FindingNenoDarkTheme : FindingNenoLightTheme}>
-					<StatusBar style='auto' backgroundColor='transparent' translucent />
+					<StatusBar style='auto'/>
 					<MainNavigator />
 				</NavigationContainer>
 			</Provider>

diff --git a/src/frontend/Finding-Neno/Pages/DashboardPage.jsx b/src/frontend/Finding-Neno/Pages/DashboardPage.jsx
@@ -154,7 +154,7 @@ const DashboardPage = () => {
 					initialLayout={{ width: WINDOW_WIDTH }}
 				/>
 				<Portal>
-					<FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE, bottom: -33 }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
+					<FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
 						actions={[
 							{ icon: 'file-document', label: 'New Missing Report', onPress: () => navigation.navigate('Dashboard', { screen: 'New Missing Report' }), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },
 							{ icon: 'magnify', label: 'New Sighting', onPress: () => navigation.navigate('Dashboard', { screen: 'New Sighting' }), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },

diff --git a/src/frontend/Finding-Neno/Pages/MapPage.jsx b/src/frontend/Finding-Neno/Pages/MapPage.jsx
@@ -381,12 +381,12 @@ export default function MapPage({ navigation: { navigate } }) {
 				</Button>
 				<View style={{ marginTop: 5 }}>
 					{
-						tabValue == "reports" ? <Text style={styles.boldText}> {reports.length} reports in area</Text> : <Text style={styles.boldText}> {sightings.length} sightings in area</Text>
+						tabValue == "reports" ? <Text style={styles.boldText}> {reports.length} report{reports.length == 1 ? '' : 's'} in area</Text> : <Text style={styles.boldText}> {sightings.length} sighting{sightings.length == 1 ? '' : 's'} in area</Text>
 					}
 				</View>		
 			</View>		
 			<Portal>
-				<FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE, bottom: -33 }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
+				<FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
 					actions={[
 						{ icon: 'file-document', label: 'New Missing Report', onPress: () => navigate('New Missing Report'), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },
 						{ icon: 'magnify', label: 'New Sighting', onPress: () => navigate('New Sighting'), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },

diff --git a/src/frontend/Finding-Neno/Pages/ReportsPage.jsx b/src/frontend/Finding-Neno/Pages/ReportsPage.jsx
@@ -58,7 +58,7 @@ export default function ReportsPage({ navigation: { navigate } }) {
 					<ReportsList reports={reports} onRefresh={onRefresh} userId={USER_ID}/>
 				</View>
 				<Portal>
-					<FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE, bottom: -33 }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
+					<FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
 						actions={[
 							{ icon: 'file-document', label: 'New Missing Report', onPress: () => navigate('New Missing Report'), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },
 							{ icon: 'magnify', label: 'New Sighting', onPress: () => navigate('New Sighting'), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },

diff --git a/src/frontend/Finding-Neno/Pages/SightingsPage.jsx b/src/frontend/Finding-Neno/Pages/SightingsPage.jsx
@@ -124,7 +124,7 @@ export default function SightingsPage({ navigation: { navigate } }) {
                     initialLayout={{ width: WINDOW_WIDTH }}
                 />
                 <Portal>
-                    <FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE, bottom: -33 }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
+                    <FAB.Group color='white' fabStyle={{ backgroundColor: Color.LIGHTER_NENO_BLUE }} icon={open ? "close" : "plus"} open={open} visible onStateChange={onStateChange}
                         actions={[
                             { icon: 'file-document', label: 'New Missing Report', onPress: () => navigate('New Missing Report'), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },
                             { icon: 'magnify', label: 'New Sighting', onPress: () => navigate('New Sighting'), color: Color.NENO_BLUE, style: { backgroundColor: Color.FAINT_NENO_BLUE } },

diff --git a/src/frontend/Finding-Neno/components/Reports/Report.js b/src/frontend/Finding-Neno/components/Reports/Report.js
@@ -53,7 +53,7 @@ const Report = ({ report, userId }) => {
     }, [petName]);
 
     const message = 
-    `Have you seen this missing pet? \n\nName: ${petName} \nSpecies: ${petSpecies} \nBreed: ${petBreed} \nLast seen ${lastSeen} around ${suburb} \nPet Image: ${petImage} ${reportDesc ? "Additional description: " + reportDesc : ""} \n\nIf you have seen this pet, please report your sighting on the Finding Neno app.`
+    `Have you seen this missing pet? \n\nName: ${petName} \nSpecies: ${petSpecies} \nBreed: ${petBreed} \nLast seen ${lastSeen} around ${suburb} \nPet Image: ${petImage} ${reportDesc ? "\nAdditional description: " + reportDesc : ""} \n\nIf you have seen this pet, please report your sighting on the Finding Neno app.`
 
     const closeImageModal = () => {
         setEnlargeImage(false);

diff --git a/src/frontend/Finding-Neno/components/Reports/ReportsList.jsx b/src/frontend/Finding-Neno/components/Reports/ReportsList.jsx
@@ -20,7 +20,7 @@ function ReportsList({reports, onRefresh, columns, userId}) {
             onRefresh={onListRefresh}
             refreshing={refreshing}
             ListEmptyComponent={<Text style={{ paddingTop: 30, fontSize: 15, fontWeight: '700', alignSelf: 'center'}}>There are no reports of missing pets.</Text>}
-            ListFooterComponent={<Text style={{ paddingTop: 30, fontSize: 15, fontWeight: '700', alignSelf: 'center'}}>Last updated {formatDateTimeDisplay(new Date())}</Text>}
+            ListFooterComponent={<Text style={{ paddingVertical: 30, fontSize: 15, fontWeight: '700', alignSelf: 'center'}}>Last updated {formatDateTimeDisplay(new Date())}</Text>}
         />
     )
 }

diff --git a/src/frontend/Finding-Neno/components/Shared/ImageHandler.jsx b/src/frontend/Finding-Neno/components/Shared/ImageHandler.jsx
@@ -141,7 +141,7 @@ const ImageHandler = ({ image, setImage, setIsButtonDisabled, isRequired, error
                     {
                         isUploading ? <ActivityIndicator /> :
                             image && 
-                            <View borderRadius={"10%"} alignItems={"center"}>
+                            <View borderRadius={0.1} alignItems={"center"}>
                                 <TouchableHighlight onPress={() => setEnlargeImage(true)} underlayColor="#DDDDDD" style={{ borderRadius: 20 }}>
                                     <Image source={{ uri: image }} style={{ width: "100%", aspectRatio: "1", borderRadius: 10 }} alt='pet sighting image' />
                                 </TouchableHighlight>

diff --git a/src/frontend/Finding-Neno/components/Sightings/SightingsList.jsx b/src/frontend/Finding-Neno/components/Sightings/SightingsList.jsx
@@ -19,7 +19,7 @@ function SightingsList({sightings, onRefresh, columns, emptyText}) {
             refreshing={refreshing}
 
             ListEmptyComponent={<Text style={{ paddingTop: 30, fontSize: 15, fontWeight: '700', alignSelf: 'center'}}>{emptyText}</Text>}
-            ListFooterComponent={<Text style={{ paddingTop: 30, fontSize: 15, fontWeight: '700' , alignSelf: 'center'}}>Last updated {formatDateTimeDisplay(new Date())}</Text>}
+            ListFooterComponent={<Text style={{ paddingVertical: 30, fontSize: 15, fontWeight: '700' , alignSelf: 'center'}}>Last updated {formatDateTimeDisplay(new Date())}</Text>}
         />
     )
 }

diff --git a/src/frontend/Finding-Neno/package-lock.json b/src/frontend/Finding-Neno/package-lock.json
diff --git a/src/frontend/Finding-Neno/package.json b/src/frontend/Finding-Neno/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.11",
-    "@react-native-community/datetimepicker": "6.7.3",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-picker/picker": "2.4.8",
     "@react-navigation/bottom-tabs": "^6.5.7",

diff --git a/src/frontend/Finding-Neno/patches/native-base+3.4.28.patch b/src/frontend/Finding-Neno/patches/native-base+3.4.28.patch
@@ -0,0 +1,21 @@
+diff --git a/node_modules/native-base/src/core/NativeBaseProvider.tsx b/node_modules/native-base/src/core/NativeBaseProvider.tsx
+index 43b4bd1..dd1329c 100644
+--- a/node_modules/native-base/src/core/NativeBaseProvider.tsx
++++ b/node_modules/native-base/src/core/NativeBaseProvider.tsx
+@@ -4,7 +4,6 @@ import {
+   Metrics,
+   initialWindowMetrics as defaultInitialWindowMetrics,
+ } from 'react-native-safe-area-context';
+-import { SSRProvider } from '@react-native-aria/utils';
+ import { theme as defaultTheme, ITheme } from './../theme';
+ import type { IColorModeProviderProps } from './color-mode';
+ import HybridProvider from './hybrid-overlay/HybridProvider';
+@@ -94,7 +93,7 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => {
+             <OverlayProvider isSSR>
+               <ToastProvider>
+                 <InitializeToastRef />
+-                <SSRProvider>{children}</SSRProvider>
++                {children}
+               </ToastProvider>
+             </OverlayProvider>
+           </HybridProvider>