Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade React Native Paper and Fix Warnings #518

Merged
merged 1 commit into from
Jan 17, 2024
Merged

Upgrade React Native Paper and Fix Warnings #518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Circles/ProfileImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down
4 changes: 0 additions & 4 deletions src/components/Messaging/SearchRecipientsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ export const SearchRecipientsModal = ({
mode="contained"
style={styles.doneButton}
labelStyle={styles.doneButtonLabel}
compact={true}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the upgrade this was causing the button text to be truncated

onPress={() => hideSelf()}
>
{t('next-button', 'Done')}
Expand All @@ -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%',
Comment on lines -128 to -129
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spacing is now handled by the modal. Spacing on the modal was necessary to achieve the same style while also setting a background to avoid the RTCView warning.

},
scrollView: { minHeight: '80%' },
listItem: {
Expand All @@ -152,7 +149,6 @@ const defaultStyles = createStyles('SearchRecipientsModal', (theme) => {
marginVertical: 16,
marginRight: 16,
height: 35,
width: 55,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the upgrade this was causing the text to be truncated.

alignSelf: 'center',
},
doneButtonLabel: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/MyData/LineChart/TraceLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should only show the trend if it has 2+ points. A single point produces a flat trend which isn't meaningful and 0 points causes a NaN error because of division by zero.

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));
Expand Down
1 change: 1 addition & 0 deletions src/components/ScreenSurface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export function ScreenSurface({
const defaultStyles = createStyles('ScreenSurface', (theme) => ({
surfaceView: {
flex: 1,
height: '100%',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the upgrade a react native paper surface must have a height set to flex properly.

backgroundColor: theme.colors.elevation.level1,
},
scrollView: {},
Expand Down
1 change: 0 additions & 1 deletion src/components/TrackTile/PillarsTile/PillarsTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 8 additions & 1 deletion src/components/TrackTile/TrackerRow/RadialProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
]}
>
Expand Down Expand Up @@ -175,6 +178,10 @@ export const RadialProgress: FC<Props> = (props) => {
};

const defaultStyles = createStyles('TrackerRadialProgress', (theme) => ({
container: {
position: 'relative',
backgroundColor: 'white',
},
disabledBorder: {
opacity: 0.3,
},
Expand Down
2 changes: 1 addition & 1 deletion src/navigators/BottomNavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const BottomNavigationBar = ({
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.title;
: route.name;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the upgrade the title property was removed. We now default to name, however, in practice this should never happen.


return label;
}}
Expand Down
3 changes: 2 additions & 1 deletion src/navigators/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 11 additions & 1 deletion src/screens/ComposeMessageScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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' {
Expand Down
3 changes: 1 addition & 2 deletions src/screens/MessageScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,7 @@ export function MessageScreen<ParamList extends ParamListBase>({
<View
style={{
flexDirection: 'row',
flex: 1,
maxWidth: 60,
width: 60,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the upgrade the message avatars did not display correctly. Setting a static width solved this problem.

}}
>
{
Expand Down
5 changes: 4 additions & 1 deletion src/screens/TrackTileAdvancedDetailsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ export const AdvancedTrackerDetailsScreen = ({
onEditValue={(trackerValue) =>
navigation.push('Home/AdvancedTrackerEditor', {
tracker,
trackerValue,
trackerValue: {
...trackerValue,
createdDate: trackerValue.createdDate.toISOString(),
},
valuesContext,
})
}
Expand Down
16 changes: 9 additions & 7 deletions src/screens/TrackTileAdvancedEditorScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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 () => {
Expand All @@ -41,6 +44,5 @@ export const SaveEditorButton = () => {
}}
/>
);
};

export default AdvancedTrackerEditorScreen;
25 changes: 10 additions & 15 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading