79520430

Date: 2025-03-19 14:08:41
Score: 1.5
Natty:
Report link

So I tried to reproduce your problem by making a Snack on expo, and I reached the same results, I'm not able to render the proper fontFamily inside the canvas, which I think is a thing of the webview inside the react-native-canvas package. You cannot render the font family because expo-font does not reach the webview context.

Also looking for the pull requests of the canvas repo, I saw a contributor trying to implement a Font API, but it didn't merge: https://github.com/iddan/react-native-canvas/pull/294.

Just to my conclusion, the plugin of expo-font doesn't have the flexibility to add fonts inside webview contexts, at least doing it this way.

This is the code that I made to reproduce this issue:

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { useEffect } from 'react';
import { useFonts } from 'expo-font';
import Canvas from 'react-native-canvas';

const WaitFont = (props) => {
  const [loaded, error] = useFonts({
    'eightBit': require('./assets/fonts/eightBit.ttf'),
  });

  useEffect(() => {
    if (loaded || error) {
      console.log('Working?')
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }

  return props.children
}

export default function App() {
  const handleCanvas = (canvas) => {
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    ctx.font = '500 26px "eightBit"';
    ctx.fillText("Hello from <Canvas />", 8, 28) ;
  };

  return (
    <SafeAreaView style={styles.container}>
      <WaitFont>
        <Text style={styles.paragraph}>
          {`Hello from <Text />`}
        </Text>
        <Canvas style={styles.canvas} ref={handleCanvas} />
      </WaitFont>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    fontSize: 50,
    fontWeight: '500',
    fontFamily: 'eightBit'
  },
  canvas: {
    borderWidth: 1,
    borderColor: 'red',
    width: '100%'
  }
});
Reasons:
  • RegEx Blacklisted phrase (2): Working?
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Simón Villafañe