Skip to content

feat: Implement expo-font for improved font rendering and maintainability #22217

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

Closed
georgewrmarshall wants to merge 8 commits into from
+6,283 −6,902
Closed

feat: Implement expo-font for improved font rendering and maintainability #22217

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
11bcf91
chore: initial commit to add expo-font
georgewrmarshall Oct 24, 2025
435c8d3
chore: removing font loader
georgewrmarshall Oct 24, 2025
8f07002
chore: updating ios plist and adding fonts to android as per docs for…
georgewrmarshall Nov 10, 2025
beda475
chore: updating hard coded font weight to use fontStyle for correct b…
georgewrmarshall Nov 11, 2025
42ce2ed
chore: renaming italic font files to follow the post script name and …
georgewrmarshall Nov 11, 2025
bf3cd8d
chore: dependency updates and alignments
georgewrmarshall Dec 2, 2025
add96b7
chore: ios file updates
georgewrmarshall Dec 2, 2025
1565d6e
chore: updating snapshots
georgewrmarshall Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Prev Previous commit
chore: updating snapshots
  • Loading branch information
@georgewrmarshall
georgewrmarshall committed Dec 2, 2025
commit 1565d6e41f55f5bab6e2b699ef4709890eb41dce
2 changes: 1 addition & 1 deletion app/component-library/base-components/TagBase/__snapshots__/TagBase.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ exports[`TagBase should render TagBase 1`] = `
style={
{
"color": "#121314",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down
4 changes: 2 additions & 2 deletions ...ent-library/components-temp/Buttons/ButtonToggle/__snapshots__/ButtonToggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`ButtonToggle renders correctly in active state 1`] = `
style={
{
"color": "#4459ff",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -66,7 +66,7 @@ exports[`ButtonToggle renders correctly in inactive state 1`] = `
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down
6 changes: 3 additions & 3 deletions ...library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
style={
{
"color": "#121314",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand All @@ -238,7 +238,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
style={
{
"color": "#686e7d",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -281,7 +281,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
style={
{
"color": "#686e7d",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 12,
"letterSpacing": 0.25,
"lineHeight": 20,
Expand Down
2 changes: 1 addition & 1 deletion ...ibrary/components-temp/CustomSpendCap/CustomInput/__snapshots__/CustomInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ exports[`CustomInput should render correctly 1`] = `
{
"color": "#121314",
"flexGrow": 1,
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"fontWeight": "400",
"letterSpacing": 0,
Expand Down
16 changes: 8 additions & 8 deletions ...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#121314",
"fontFamily": "Geist Bold",
"fontFamily": "Geist-Bold",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -98,7 +98,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
{
"backgroundColor": "transparent",
"color": "#121314",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand All @@ -111,7 +111,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#4459ff",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -163,7 +163,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
{
"color": "#121314",
"flexGrow": 1,
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"fontWeight": "400",
"letterSpacing": 0,
Expand All @@ -187,7 +187,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#686e7d",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 14,
"letterSpacing": 0,
"lineHeight": 22,
Expand All @@ -211,7 +211,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#686e7d",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand All @@ -230,7 +230,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
{
"backgroundColor": "transparent",
"color": "#121314",
"fontFamily": "Geist Regular",
"fontFamily": "Geist-Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand All @@ -243,7 +243,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#4459ff",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down
16 changes: 8 additions & 8 deletions app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -115,7 +115,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -190,7 +190,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -280,7 +280,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -376,7 +376,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -453,7 +453,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -549,7 +549,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render when there is
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down Expand Up @@ -592,7 +592,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render when there is
style={
{
"color": "#121314",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down
2 changes: 1 addition & 1 deletion ...ent-library/components-temp/MainActionButton/__snapshots__/MainActionButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ exports[`MainActionButton should render correctly 1`] = `
{
"color": "#121314",
"flexShrink": 0,
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 14,
"letterSpacing": 0,
"lineHeight": 22,
Expand Down
5 changes: 0 additions & 5 deletions ...chainAccounts/MultichainAccountSelectorList/AccountListFooter/AccountListFooter.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { StyleSheet } from 'react-native';
import { fontStyles } from '../../../../../styles/common';
import { Theme } from '../../../../../util/theme/models';

const createStyles = ({ theme }: { theme: Theme }) =>
Expand Down Expand Up @@ -29,10 +28,6 @@ const createStyles = ({ theme }: { theme: Theme }) =>
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
color: theme.colors.primary.default,
...fontStyles.medium,
},
});

export default createStyles;
3 changes: 2 additions & 1 deletion .../MultichainAccounts/MultichainAccountSelectorList/AccountListFooter/AccountListFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
IconColor,
Text,
TextVariant,
TextColor,
} from '@metamask/design-system-react-native';
import { useStyles } from '../../../../hooks';
import AnimatedSpinner, {
Expand Down Expand Up @@ -152,7 +153,7 @@ const AccountListFooter = memo(
</View>
<Text
variant={TextVariant.BodyMd}
style={styles.buttonText}
color={TextColor.PrimaryDefault}
testID={AccountListBottomSheetSelectorsIDs.CREATE_ACCOUNT}
>
{actionLabel}
Expand Down
4 changes: 2 additions & 2 deletions ...s-temp/MultichainAccounts/MultichainAccountSelectorList/MultichainAccountSelectorList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React, {
} from 'react';
import { View, ScrollViewProps } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { FlashList, ListRenderItem, FlashListRef } from '@shopify/flash-list';
import { FlashList, ListRenderItem } from '@shopify/flash-list';
import { useSelector } from 'react-redux';
import { AccountGroupObject } from '@metamask/account-tree-controller';

Expand Down Expand Up @@ -68,7 +68,7 @@ const MultichainAccountSelectorList = ({
string | null
>(null);
const internalListRef =
useRef<FlashListRef<FlattenedMultichainAccountListItem>>(null);
useRef<FlashList<FlattenedMultichainAccountListItem>>(null);
const listRefToUse = listRef || internalListRef;

const selectedIdSet = useMemo(
Expand Down
4 changes: 2 additions & 2 deletions ...p/MultichainAccounts/MultichainAccountSelectorList/MultichainAccountSelectorList.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
AccountWalletObject,
} from '@metamask/account-tree-controller';
import { RefObject } from 'react';
import { FlashListProps, FlashListRef } from '@shopify/flash-list';
import { FlashListProps, FlashList } from '@shopify/flash-list';
import { AccountWalletId } from '@metamask/account-api';

/**
Expand Down Expand Up @@ -44,7 +44,7 @@ export interface MultichainAccountSelectorListProps
/**
* Reference to the FlashList component
*/
listRef?: RefObject<FlashListRef<FlattenedMultichainAccountListItem>>;
listRef?: RefObject<FlashList<FlattenedMultichainAccountListItem>>;
/**
* Optional boolean to show checkbox
*/
Expand Down
27 changes: 5 additions & 22 deletions ...ccounts/MultichainAddWalletActions/__snapshots__/MultichainAddWalletActions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,40 +131,23 @@ exports[`MultichainAddWalletActions renders correctly 1`] = `
</View>
</View>
</View>
<RNSScreenContainer
<View
onLayout={[Function]}
style={
{
"flex": 1,
}
}
>
<RNSScreen
activityState={2}
collapsable={false}
gestureResponseDistance={
{
"bottom": -1,
"end": -1,
"start": -1,
"top": -1,
}
}
onGestureCancel={[Function]}
<View
pointerEvents="box-none"
sheetAllowedDetents="large"
sheetCornerRadius={-1}
sheetExpandsWhenScrolledToEdge={true}
sheetGrabberVisible={false}
sheetLargestUndimmedDetent="all"
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": undefined,
}
}
>
Expand Down Expand Up @@ -242,7 +225,7 @@ exports[`MultichainAddWalletActions renders correctly 1`] = `
<View
collapsable={false}
enabled={false}
handlerTag={-1}
handlerTag={1}
handlerType="PanGestureHandler"
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
Expand Down Expand Up @@ -722,8 +705,8 @@ exports[`MultichainAddWalletActions renders correctly 1`] = `
</View>
</View>
</View>
</RNSScreen>
</RNSScreenContainer>
</View>
</View>
</RNCSafeAreaProvider>
</View>
`;
4 changes: 2 additions & 2 deletions ...mponents-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
style={
{
"color": "#457a39",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand All @@ -29,7 +29,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
style={
{
"color": "#457a39",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down
4 changes: 2 additions & 2 deletions ...mp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentageCrossChains.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`AggregatedPercentageCrossChains should match snapshot 1`] = `
style={
{
"color": "#686e7d",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand All @@ -29,7 +29,7 @@ exports[`AggregatedPercentageCrossChains should match snapshot 1`] = `
style={
{
"color": "#686e7d",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
Expand Down
2 changes: 1 addition & 1 deletion ...brary/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`PercentageChange should render correctly 1`] = `
style={
{
"color": "#457a39",
"fontFamily": "Geist Medium",
"fontFamily": "Geist-Medium",
"fontSize": 14,
"letterSpacing": 0,
"lineHeight": 22,
Expand Down
Loading
Loading