Victory-native: Unrecognized Font Familiy Roboto

[waleedarshad]

[nickhough]

I'm having the same issue. Any luck fixing it?

[nickhough]

The offending code is theme={VictoryTheme.material}.

[mortenc]

I am experiencing a similar and possibly related issue.

I am running Expo, and after upgrading to SDK35 I can no longer pass in custom fonts to tickLabels. Doing so results in an "Unrecognized font family" error. The font loads fine for the rest of the app, I only get the error when trying to pass it into victory-native.

[FH-Hersey]

@mortenc Did you resolve the issue, same thing happening with Expo SDK35

[mortenc]

@FH-Hersey Unfortunately not yet – still not able to use my custom font. I'm unsure if the issue is with victory-native, or if it's actually to do with react-native-svg. But I haven't been able to resolve the problem yet.

[nhatnor123]

This error happen to me , too. Could someone solve this problem ?

[martinboksa]

Please, any idea how it could be solved?

[navaneeth-nenmini]

I ran into this issue while updating dependency versions of my app. I wound up going back to the earlier versions (rnsvg - 9.0.2 and victory-native - 31.0.0). The issue is with the react-native-svg package, so perhaps using older versions of both would be a temporary workaround.

[jakecronin]

I commented out all instances of VictoryTheme.material and my app runs fine.

[tylinux]

Have this problem too

[matapo]

Same

[vvarh]

I have expo sdk 35 and i have this problem.
I made a copy of the theme 'VictoryTheme.material'

origin file  - 'node_modules > victory-core > es > victory-theme > material.js'

and removed the font from there

35 fontFamily: sansSerif,

now works with default fonts

[sibelius]

the default theme has Roboto on it

like this

const sansSerif = '\'Roboto\', \'Helvetica Neue\', Helvetica, sans-serif';

it worked well on 0.30.*

but breaks on 0.33.*

[chiechelski]

Anyone with a solution to this, without having to duplicate themes?

[chrallard]

The offending code is theme={VictoryTheme.material}.

Removing this fixed it for me.

[kas]

It's not pretty, but I'm able to use the material theme in iOS by removing the Roboto font family:

const theme = Object.assign({}, VictoryTheme.material, {
    axis: {
      ...VictoryTheme.material.axis,
      style: {
        ...VictoryTheme.material.axis?.style,
        tickLabels: {
          ...VictoryTheme.material.axis?.style?.tickLabels,
          fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
        },
      },
    },
  });

I'd appreciate any feedback on how to make it smaller. TypeScript complains "The left-hand side of an assignment expression may not be an optional property access." when I try to set the font family directly on a local copy of the material theme.

[luizjr]

The offending code is theme={VictoryTheme.material}.

Thats worked for me, thanks

[denniske]

If you don't want to remove theme={VictoryTheme.material}, you can use the following:

function replaceRobotoWithSystemFont(obj: any) {
    const keys = Object.keys(obj);
    keys.forEach(function(key) {
        const value = obj[key];
        if (key === 'fontFamily') {
            obj[key] = obj[key].replace("'Roboto',", "'System',");
        }
        if (typeof value === 'object') {
            replaceRobotoWithSystemFont(obj[key]);
        }
    });
    return obj;
}

const themeWithSystemFont = replaceRobotoWithSystemFont({...VictoryTheme.material});

<VictoryChart theme={themeWithSystemFont}></VictoryChart>

[gretzky]

This issue is still happening.

Expo SDK 40.0.1
victory-native 35.3.1

Neither of the solutions suggested above work nor does creating my own theme with my custom font. I'm not sure why this issue was closed in the first place, since there was never a real fix implemented?