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%'
}
});