Unrecognized font family with expo

[LevMartens]

My font works all over my app except for propsForLabels: { fontFamily: 'Urbanist-SemiBold' }, I get this error:

<LineChart
            data={{
              labels: [`Distance: ${distance}m`],
              legend: ["Elevation"],
              datasets: [
                {
                  data: elevationPoints,
                },
              ],
            }}
            width={SCREEN_WIDTH}
            height={180}
            yAxisSuffix="m"
            yAxisInterval={1}
            chartConfig={{
      backgroundColor: "#e26a00",
      backgroundGradientFrom: "#fb8c00",
      backgroundGradientTo: "#ffa726",
      decimalPlaces: 2,
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      propsForLabels: { fontFamily: 'Urbanist-SemiBold' }, <------------------------------------------------
      propsForDots: {
        r: "6",
        strokeWidth: "2",
        stroke: "#ffa726",
      },
    }}
            bezier
            style={themedStyles.chartLayout}
          />

[nick-0101]

I'm getting the same error

[nick-0101]

I just solved this by adding a style to <LineChart />

<LineChart
       style={{
          fontFamily: 'OpenSans-SemiBold',
        }}
    />

[LevMartens]

I just solved this by adding a style to <LineChart />

<LineChart
       style={{
          fontFamily: 'OpenSans-SemiBold',
        }}
    />

mm that didn't work for me...

[CristianMor]

Is there any solution for this ?

[mattrabe]

I was able to get this to work using processFontFamily

import React from 'react'
import {
  processFontFamily,
  useFonts,
} from 'expo-font'
import { Text } from 'react-native'
import { LineChart } from 'react-native-chart-kit'

function MyComponent() {
  const [ areFontsLoaded ] = useFonts({ 'Roboto-Italic': require('../../assets/fonts/Roboto-Italic.ttf') })

  if (!areFontsLoaded) {
    return null // Prevent app from rendering until fonts are loaded. Nothing special here
  }

  return (
    // standard use on Text - this works fine, does not require `processFontFamily`:
    <Text style={{ fontFamily: 'Roboto-Italic' }}>Regular Text</Text>

    // this will fail ❌:
    <LineChart chartConfig={{ propsForLabels: { fontFamily: 'Roboto-Italic' } }} />

    // this will work ✅:
    <LineChart chartConfig={{ propsForLabels: { fontFamily: processFontFamily('Roboto-Italic') } }} />
  )
}

Source: https://github.com/expo/expo/issues/1959#issuecomment-780198250