0

I have added the font families on expo mobile app

import React from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import Constants from "expo-constants";
import { FontSource, useFonts } from "expo-font";
import { ClerkProvider } from "@clerk/clerk-expo";
import * as Sentry from "sentry-expo";

import { tokenCache } from "./config/tokenCache";
import { Navigation } from "./navigation";
import { TRPCProvider } from "./utils/api";

const fontSources: { [key: string]: FontSource } = {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  "HK Grotesk": require("./assets/fonts/hk-grotesk/HKGrotesk-Regular.otf"),
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  "HK Grotesk-Medium": require("./assets/fonts/hk-grotesk/HKGrotesk-Medium.otf"),
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  "HK Grotesk-SemiBold": require("./assets/fonts/hk-grotesk/HKGrotesk-SemiBold.otf"),
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  "HK Grotesk-Bold": require("./assets/fonts/hk-grotesk/HKGrotesk-Bold.otf"),
};

export const App = () => {
  const [loaded] = useFonts(fontSources);

  if (!loaded) {
    return null;
  }
  return (
    <ClerkProvider publishableKey={Constants.manifest?.extra?.clerkPublicKey as string} tokenCache={tokenCache}>
      <TRPCProvider>
        <SafeAreaProvider>
          <Navigation />
        </SafeAreaProvider>
      </TRPCProvider>
    </ClerkProvider>
  );
};

Sentry.init({
  dsn: Constants.manifest?.extra?.sentryDsn as string,
  enableInExpoDevelopment: false,
  debug: false,
  enabled: Constants.manifest?.extra?.environment === "production",
});

And also added config to tailwind.config.cjs

/** @type {import("tailwindcss").Config} */
module.exports = {
  presets: [require("@acme/tailwind-config")],
  theme: {
    extend: {
      fontFamily: {
        'grotesk-medium': ['"HK Grotesk-Medium"', "sans-serif"],
        'grotesk-semi-bold': ['"HK Grotesk-SemiBold"', "sans-serif"],
        'grotesk-bold': ['"HK Grotesk-Bold"', "sans-serif"],
      },
    }
  }
};

The problem is that now font-family work if I apply them explicitly on <Text /> components, But I want to set font-family globally and control font-weight by tailwind classes, with current scenario font-weights are not working of course.

I am new in react native, first tried to wrap with parent component, but if I am not mistaken, react-native component styling is not working like that.

Adriaan
  • 17,741
  • 7
  • 42
  • 75
ArthurDev
  • 1
  • 1
    Does this answer your question? [How to set default font family in React Native?](https://stackoverflow.com/questions/35255645/how-to-set-default-font-family-in-react-native) – Kipnoedels Apr 04 '23 at 12:49
  • @Kipnoedels I have thought for something like this, I would say this would be the last resolve. Of course if there is another existing solution. But thanks for the info.) – ArthurDev Apr 04 '23 at 12:56
  • I would wrap your text in a custom component like in the link I posted, and use rest props (`{...props}`) to pass your tailwind styles down to the custom text component. – Kipnoedels Apr 04 '23 at 13:35

0 Answers0