fix: Upgrade React Native Paper and Fix Warnings

package.json

@@ -156,7 +156,7 @@
     "events": "^3.3.0",
     "intl-pluralrules": "^1.3.1",
     "lodash": "^4.17.21",
-    "react-native-paper": "^5.3.1",
+    "react-native-paper": "^5.12.1",
     "react-native-vector-icons": "^9.2.0",
     "react-navigation-header-buttons": "^9.0.1",
     "react-use": "^17.4.0",

src/components/Circles/ProfileImage.tsx

@@ -3,15 +3,15 @@ import { ViewStyle } from 'react-native';
 import { Avatar } from 'react-native-paper';
 import { initials } from './initials';
 import type { Post } from '../../hooks/Circles/types';
-import { IconSource } from 'react-native-paper/lib/typescript/src/components/Icon';
+import { AvatarIconProps } from 'react-native-paper';
 import { createStyles } from '../BrandConfigProvider';
 import { useStyles } from '../BrandConfigProvider/styles/StylesProvider';
 import { tID } from '../TrackTile/common/testID';
 
 type Props = {
   post: Post;
   size: number;
-  fallbackIcon: IconSource;
+  fallbackIcon: AvatarIconProps['icon'];
   style?: ViewStyle;
 };
 

src/components/Messaging/SearchRecipientsModal.tsx

@@ -111,7 +111,6 @@ export const SearchRecipientsModal = ({
         mode="contained"
         style={styles.doneButton}
         labelStyle={styles.doneButtonLabel}
-        compact={true}
         onPress={() => hideSelf()}
       >
         {t('next-button', 'Done')}
@@ -125,8 +124,6 @@ const defaultStyles = createStyles('SearchRecipientsModal', (theme) => {
     rootView: {
       backgroundColor: theme.colors.elevation.level1,
       height: Platform.select({ android: '90%', default: '100%' }),
-      width: '90%',
-      marginHorizontal: '5%',
     },
     scrollView: { minHeight: '80%' },
     listItem: {
@@ -152,7 +149,6 @@ const defaultStyles = createStyles('SearchRecipientsModal', (theme) => {
       marginVertical: 16,
       marginRight: 16,
       height: 35,
-      width: 55,
       alignSelf: 'center',
     },
     doneButtonLabel: {

src/components/MyData/LineChart/TraceLine.tsx

@@ -32,7 +32,7 @@ export const TraceLine = (props: Props) => {
   const yDomain = [domainMin, domainMax] as [number, number];
 
   const trend = useMemo(() => {
-    if (showTrend) {
+    if (showTrend && data.length > 1) {
       const xAvg = sumBy(data, 'x') / data.length;
       const yAvg = sumBy(data, 'y') / data.length;
       const sumOfProducts = sumBy(data, (d) => (d.x - xAvg) * (d.y - yAvg));

src/components/ScreenSurface.tsx

@@ -35,6 +35,7 @@ export function ScreenSurface({
 const defaultStyles = createStyles('ScreenSurface', (theme) => ({
   surfaceView: {
     flex: 1,
+    height: '100%',
     backgroundColor: theme.colors.elevation.level1,
   },
   scrollView: {},

src/components/TrackTile/PillarsTile/PillarsTile.tsx

@@ -93,7 +93,6 @@ export const PillarsTile = ({
 
 const defaultStyles = createStyles('PillarsTile', (theme) => ({
   pillarsTileView: {
-    overflow: 'hidden',
     marginHorizontal: theme.spacing.medium,
     marginBottom: theme.spacing.medium,
     backgroundColor: theme.colors.surface,

src/components/TrackTile/TrackerRow/RadialProgress.tsx

@@ -119,7 +119,10 @@ export const RadialProgress: FC<Props> = (props) => {
   return (
     <View
       style={[
-        { position: 'relative' },
+        {
+          borderRadius: size,
+        },
+        styles.container,
         shadow(styles.circle?.shadow) as ViewStyle,
       ]}
     >
@@ -175,6 +178,10 @@ export const RadialProgress: FC<Props> = (props) => {
 };
 
 const defaultStyles = createStyles('TrackerRadialProgress', (theme) => ({
+  container: {
+    position: 'relative',
+    backgroundColor: 'white',
+  },
   disabledBorder: {
     opacity: 0.3,
   },

src/navigators/BottomNavigationBar.tsx

@@ -56,7 +56,7 @@ export const BottomNavigationBar = ({
             ? options.tabBarLabel
             : options.title !== undefined
             ? options.title
-            : route.title;
+            : route.name;
 
         return label;
       }}

src/navigators/types.tsx

@@ -65,7 +65,8 @@ export type HomeStackParamList = {
   };
   'Home/AdvancedTrackerEditor': {
     tracker: Tracker;
-    trackerValue: TrackerValue;
+    // Date is not serializable, force this to be a string and deserialize the value in the screen component
+    trackerValue: Omit<TrackerValue, 'createdDate'> & { createdDate: string };
     valuesContext: TrackerValuesContext;
   };
   'Home/MyData': undefined;

src/screens/ComposeMessageScreen.tsx

@@ -126,7 +126,11 @@ export function ComposeMessageScreen<ParamList extends ParamListBase>({
   return (
     <Provider>
       <Portal>
-        <Modal visible={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Modal
+          visible={isOpen}
+          contentContainerStyle={styles.searchRecipientsModalContainer}
+          onDismiss={() => setIsOpen(false)}
+        >
           <SearchRecipientsModal
             userIds={searchUserIds}
             onProfileSelected={addSelectedProfile}
@@ -313,6 +317,12 @@ const defaultStyles = createStyles('ComposeMessageScreen', (theme) => ({
   plusIcon: {
     color: theme.colors.secondary,
   },
+  searchRecipientsModalContainer: {
+    backgroundColor: theme.colors.elevation.level1,
+    height: Platform.select({ android: '90%', default: '100%' }),
+    width: '90%',
+    marginHorizontal: '5%',
+  },
 }));
 
 declare module '@styles' {

src/screens/MessageScreen.tsx

@@ -122,8 +122,7 @@ export function MessageScreen<ParamList extends ParamListBase>({
           <View
             style={{
               flexDirection: 'row',
-              flex: 1,
-              maxWidth: 60,
+              width: 60,
             }}
           >
             {

src/screens/TrackTileAdvancedDetailsScreen.tsx

@@ -20,7 +20,10 @@ export const AdvancedTrackerDetailsScreen = ({
       onEditValue={(trackerValue) =>
         navigation.push('Home/AdvancedTrackerEditor', {
           tracker,
-          trackerValue,
+          trackerValue: {
+            ...trackerValue,
+            createdDate: trackerValue.createdDate.toISOString(),
+          },
           valuesContext,
         })
       }

src/screens/TrackTileAdvancedEditorScreen.tsx

@@ -3,7 +3,6 @@ import { t } from '../../lib/i18n';
 import { AdvancedTrackerEditor } from '../components/TrackTile/TrackerDetails/AdvancedTrackerEditor/AdvancedTrackerEditor';
 import { HomeStackScreenProps } from '../navigators/types';
 import { HeaderButton } from '../components/HeaderButton';
-import { useNavigation } from '@react-navigation/native';
 import { notifySaveEditTrackerValue } from '../components/TrackTile/services/EmitterService';
 
 export const AdvancedTrackerEditorScreen = ({
@@ -17,22 +16,26 @@ export const AdvancedTrackerEditorScreen = ({
       title: t('Edit {{name}}', {
         name: tracker?.name,
       }),
-      headerRight: SaveEditorButton,
+      headerRight: SaveEditorButton(navigation),
     });
   });
 
   return (
     <AdvancedTrackerEditor
       tracker={tracker}
       valuesContext={valuesContext}
-      trackerValue={trackerValue}
+      trackerValue={{
+        ...trackerValue,
+        createdDate: new Date(trackerValue.createdDate),
+      }}
     />
   );
 };
 
-export const SaveEditorButton = () => {
-  const navigation = useNavigation();
-  return (
+type NavigationProp =
+  HomeStackScreenProps<'Home/AdvancedTrackerEditor'>['navigation'];
+export const SaveEditorButton = (navigation: NavigationProp) => () =>
+  (
     <HeaderButton
       title={t('track-tile.save', 'Save')}
       onPress={async () => {
@@ -41,6 +44,5 @@ export const SaveEditorButton = () => {
       }}
     />
   );
-};
 
 export default AdvancedTrackerEditorScreen;

yarn.lock

@@ -1477,10 +1477,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@callstack/react-theme-provider@^3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50"
-  integrity sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==
+"@callstack/react-theme-provider@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz#01035fa1231f1fffc1a806be1b55eb82716e80c1"
+  integrity sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==
   dependencies:
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
@@ -9713,14 +9713,14 @@ react-native-notifications@^4.3.3:
   resolved "https://registry.yarnpkg.com/react-native-notifications/-/react-native-notifications-4.3.3.tgz#5be05cb144127f4db518079dd202415af497dfcb"
   integrity sha512-t7uPgpC93A4L41Jea2zet3BUqgh45gpN/ATS9gxejNH3r6kWgMdGeeZJhuMpl1gSXw1gcvgzdjzIjN7YZSOP0A==
 
-react-native-paper@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.3.1.tgz#09a1164bcd8afa62063384646b9fb4bf563f407b"
-  integrity sha512-AWs71G2L+Z51NAlWBKmRDiCOL9kPIMCtQ96aYACQTOLUPATguQA4xJEG0ju033uon9zmNHEr0MkQLcVx6E+WdA==
+react-native-paper@^5.12.1:
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.12.1.tgz#0c3211f78b4d29a110aa168e6541cfb0a2c6a071"
+  integrity sha512-6ZBBJBsHxXUG5mD22Q0tArTlk5GpGlhZDkRU1RRqPtTpxWCMc7Dbc04pU3+qG0peJQCAO6GnXqUbkZ0YLnMPNg==
   dependencies:
-    "@callstack/react-theme-provider" "^3.0.8"
+    "@callstack/react-theme-provider" "^3.0.9"
     color "^3.1.2"
-    use-event-callback "^0.1.0"
+    use-latest-callback "^0.1.5"
 
 react-native-parsed-text@0.0.22:
   version "0.0.22"
@@ -11485,11 +11485,6 @@ url-join@^4.0.0:
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
   integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
 
-use-event-callback@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/use-event-callback/-/use-event-callback-0.1.0.tgz#29d7ce996802935c5387e7d3b606cf316da3457f"
-  integrity sha512-5fTzY5UEXHMK5UR0NRkUz6TPfWmmX9fO8Tx3SnHrfMPdrQ7Rna0gDBy0r56SP68TwsP9DgwSBzeysCu3A/Z2NA==
-
 use-latest-callback@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51"