expo: Unrecognized font family on SDK35

I am having the same issue after upgrading to SDK35.

In my case, it seems the error is arising from trying to use the custom font with victory-native for an SVG chart. When I stop trying to use the font for styling the chart, the error stops – and the font loads fine for the rest of the app. So it possibly has something to do with SVG and custom fonts?

@FH-Hersey Any chance you’re trying to use the custom font for styling SVGs, like with victory-native or react-native-svg?

I did the following and it worked. Seems it should be noted on Expo Upgrade Guide

$ expo install expo-font

So for me the same issue, if there is Text in the SVG Component. Expo SDK35

          <G fill="#FFF" fillRule="evenodd"  x={ x(index) + (bandwidth / 2) } y={ 255 }>
                <Text fontSize={14}  textAnchor={'middle'}>
                    <TSpan x={0.67} y={74}>
                        {Sugar.String.truncate(value.label,10,"right")}
                    </TSpan>
                </Text>
                <Text fontSize={48}  textAnchor={'middle'} **fontFamily='Inter-UI-Medium'>**
                    <TSpan x={-4} y={50}>
                        {index == 0 ? 2 : index == 1 ? 1 : index == 2 ? 3 : null}
                    </TSpan>
                </Text>
        </G>

So for me the same issue, if there is Text in the SVG Component. Expo SDK35

          <G fill="#FFF" fillRule="evenodd"  x={ x(index) + (bandwidth / 2) } y={ 255 }>
                <Text fontSize={14}  textAnchor={'middle'}>
                    <TSpan x={0.67} y={74}>
                        {Sugar.String.truncate(value.label,10,"right")}
                    </TSpan>
                </Text>
                <Text fontSize={48}  textAnchor={'middle'} **fontFamily='Inter-UI-Medium'>**
                    <TSpan x={-4} y={50}>
                        {index == 0 ? 2 : index == 1 ? 1 : index == 2 ? 3 : null}
                    </TSpan>
                </Text>
        </G>

I can confirm this.

Same experience here after upgrading to 35.

Also tried the below which doesn’t help.

rm -rf node_modules
rm package-lock.json 
npm i
npm run start -- -c

I did these commands twice and now it’s worked ! 1.- Delete the node_modules folder 2.- Delete the package-lock.json file 3.- Run npm/yarn install

Not sure if this workaround helps anyone, but I found that my issue is because of react-native-svg. I used a ForeignObject element with a react-native Text element and it was fine!

Originally I got unrecognized font family errors when using the react-native-svg Text element to render the fontFamily like this:

import Svg, { Text as SvgText } from 'react-native-svg';
...
<Svg width={100} height={100}>
    <SvgText
        x={0)
        y={0}
        fontFamily="space-mono"
        >
        test
    </SvgText>
</Svg>

But it works for me when I do this:

import { Text } from 'react-native';
import Svg, { ForeignObject} from 'react-native-svg';
...
<Svg width={100} height={100}>
    <ForeignObject
        key={somethingThatUpdatesOnEachRender} //for some reason I had to include this key prop otherwise the ForeignObject wouldn't rerender
        x={0}
        y={0}
        width={100}
        height={100}
        >
        <View>
            <Text style={{fontFamily:"space-mono"}}>test</Text>
        </View>
    </ForeignObject>
</Svg>

Does it have something to do with this line in withExpoRoot()?

if (StyleSheet.setStyleAttributePreprocessor) {
    StyleSheet.setStyleAttributePreprocessor('fontFamily', Font.processFontFamily);
}

The issue seems to disappear if I comment that line out. I’m not sure if there would be any cascading effects by deleting that step, though.

Any update on this? I’m also using victory-native. For me issue occurred after I upgraded react-native-svg to 9.9.5.

@jmzwar Thanks! Where did you find information on the breaking change to react-native-svg, though? Did you get the issue fixed, or did you also just ‘solve’ it by removing custom fonts for now?

@mortenc I had a similar issue with svg text (appears to be a breaking change in the upgrade to react-native-svg).

Once that was resolved the following was successful. watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm run start

Is not working on a real device or emulator, @yohamta I tried expo install expo-asset but it’s not working (removed yarn.lock and node_modules) in the process