[RN] Allow custom fontFamily (#1820)

Author: iketw

packages/react-native/src/evm/components/ConnectWalletDetails/ConnectAppField.tsx

@@ -134,7 +134,7 @@ const ConnectAppField = () => {
               numberOfLines: 1,
               style: {
                 color: theme.colors.textPrimary,
-                // fontFamily: theme.textVariants.defaults.fontFamily,
+                fontFamily: theme.textVariants.defaults.fontFamily,
               },
             }}
             containerProps={{

packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletImportModal.tsx

@@ -211,7 +211,7 @@ export const LocalWalletImportModal = ({
               onChangeText: onPrivateKeyEntered,
               style: {
                 color: theme.colors.textPrimary,
-                // fontFamily: theme.textVariants.defaults.fontFamily,
+                fontFamily: theme.textVariants.defaults.fontFamily,
               },
             }}
             containerProps={{ pl: "xxs" }}

packages/react-native/src/evm/components/PasswordInput.tsx

@@ -31,7 +31,7 @@ export const PasswordInput = ({
         style={{
           ...styles.textInput,
           color: theme.colors.textPrimary,
-          // fontFamily: theme.textVariants.defaults.fontFamily,
+          fontFamily: theme.textVariants.defaults.fontFamily,
         }}
         secureTextEntry={!showPassword}
         textContentType="none"

packages/react-native/src/evm/components/SendFunds/SendButton.tsx

@@ -289,7 +289,7 @@ const SendFundsForm = ({
           onChangeText={setReceiverAddress}
           style={{
             color: theme.colors.textPrimary,
-            // fontFamily: theme.textVariants.defaults.fontFamily,
+            fontFamily: theme.textVariants.defaults.fontFamily,
             textAlign: "left",
             flex: 1,
             height: 40,
@@ -323,7 +323,7 @@ const SendFundsForm = ({
           clearTextOnFocus={false}
           style={{
             color: theme.colors.textPrimary,
-            // fontFamily: theme.textVariants.defaults.fontFamily,
+            fontFamily: theme.textVariants.defaults.fontFamily,
             textAlign: "left",
             flex: 1,
             height: 40,

packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx

@@ -141,7 +141,7 @@ export function TokenSelector(props: {
             onChangeText={setInput}
             style={{
               color: theme.colors.textPrimary,
-              // fontFamily: theme.textVariants.defaults.fontFamily,
+              fontFamily: theme.textVariants.defaults.fontFamily,
               textAlign: "left",
               flex: 1,
               height: 40,

packages/react-native/src/evm/styles/textVariants.ts

@@ -1,72 +1,84 @@
+// import { Platform } from "react-native";
+
 export const textVariants = {
-  // defaults: {
-  //   fontFamily: "ShopifySans", //Platform.OS === "ios" ? "San Francisco" : "Roboto",
-  //   fontSize: 24,
-  //   fontWeight: "700",
-  //   lineHeight: 32,
-  //   color: "textPrimary",
-  // },
+  defaults: {
+    fontFamily: undefined as string | undefined,
+    fontSize: 24,
+    fontWeight: "700",
+    lineHeight: 32,
+    color: "textPrimary",
+  },
   header: {
+    fontFamily: undefined as string | undefined,
     fontSize: 24,
     fontWeight: "600",
     lineHeight: 32,
     color: "textPrimary",
   },
   headerBold: {
+    fontFamily: undefined as string | undefined,
     fontSize: 24,
     fontWeight: "700",
     lineHeight: 32,
     color: "textPrimary",
   },
   subHeader: {
+    fontFamily: undefined as string | undefined,
     fontSize: 16,
     fontWeight: "500",
     lineHeight: 24,
     color: "textSecondary",
   },
   link: {
+    fontFamily: undefined as string | undefined,
     fontWeight: "500",
     fontSize: 14,
     lineHeight: 24,
     color: "linkPrimary",
     letterSpacing: -0.02,
   },
   bodyLarge: {
+    fontFamily: undefined as string | undefined,
     color: "textPrimary",
     textAlign: "center",
     fontWeight: "600",
     fontSize: 16,
     lineHeight: 24,
   },
   bodyLargeBold: {
+    fontFamily: undefined as string | undefined,
     color: "textPrimary",
     textAlign: "center",
     fontWeight: "700",
     fontSize: 16,
     lineHeight: 24,
   },
   bodySmall: {
+    fontFamily: undefined as string | undefined,
     color: "textPrimary",
     textAlign: "center",
     fontWeight: "600",
     fontSize: 14,
     lineHeight: 16,
   },
   bodySmallBold: {
+    fontFamily: undefined as string | undefined,
     color: "textPrimary",
     textAlign: "center",
     fontWeight: "700",
     fontSize: 14,
     lineHeight: 16,
   },
   bodySmallSecondary: {
+    fontFamily: undefined as string | undefined,
     color: "textSecondary",
     textAlign: "left",
     fontWeight: "600",
     fontSize: 14,
     lineHeight: 16,
   },
   error: {
+    fontFamily: undefined as string | undefined,
     color: "error",
     fontWeight: "500",
     fontSize: 12,

packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx

@@ -137,7 +137,7 @@ export const EmailSelectionUI: React.FC<
               style: {
                 fontSize: 14,
                 color: theme.colors.textPrimary,
-                // fontFamily: theme.textVariants.defaults.fontFamily,
+                fontFamily: theme.textVariants.defaults.fontFamily,
                 lineHeight: 16,
                 padding: 0,
                 flex: 1,

packages/react-native/src/evm/wallets/wallets/magic-link.tsx

@@ -77,7 +77,7 @@ const MagicSelectionUI: React.FC<SelectUIProps<MagicLink>> = (props) => {
           style: {
             fontSize: 14,
             color: theme.colors.textPrimary,
-            // fontFamily: theme.textVariants.defaults.fontFamily,
+            fontFamily: theme.textVariants.defaults.fontFamily,
             lineHeight: 16,
             padding: 0,
           },

packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx

@@ -198,7 +198,7 @@ export function WalletConnectUI({
                       style={{
                         ...styles.textInput,
                         color: theme.colors.textSecondary,
-                        // fontFamily: theme.textVariants.defaults.fontFamily,
+                        fontFamily: theme.textVariants.defaults.fontFamily,
                       }}
                     />
                   </Box>