I’m trying to use create-react-native-app
with expo in a monorepo setup. When I start the app from a subfolder and import @expo/vector-icons
I get an error that the font family is missing.
"fontFamily" 'material' is not a system font and has not been loaded through Expo.Font.loadAsync.
If I start the app in the main src/
folder the icons load fine. I’ve configured my rn-cli.config.js
My project is setup like a monorepo so that I can have multiple native apps in the repo.
src/
MainApp.js
package.json
app/App.js
app/app.json
app/package.json
app/rn-cli.config.js
...
I’ve tried all various combos of install @expo/vector-icons
in the subfolder package.json, but that didn’t help. I’ve tried setting "assetExts": ["ttf"]
in the app.json
file.
app/App.js
export { default } from "../MainApp";
app/app.json
{
"expo": {
"sdkVersion": "22.0.0",
"react": "16.0.0-beta.5"
}
}
app/package.json
{
"private": true,
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"native": "react-native-scripts start"
},
"dependencies": {
"@expo/vector-icons": "^6.2.1",
"expo": "^22.0.0",
"react-native": "^0.49.0",
"react-native-scripts": "1.7.0"
}
}
app/rn-cli.config.js
const blacklist = require("metro-bundler/src/blacklist");
const path = require("path");
const roots = [process.cwd(), path.resolve(__dirname, "..")];
const config = {
getProjectRoots: () => roots,
/**
* Specify where to look for assets that are referenced using
* `image!<image_name>`. Asset directories for images referenced using
* `./<image.extension>` don't require any entry in here.
*/
getAssetRoots: () => roots,
/**
* Returns a regular expression for modules that should be ignored by the
* packager on a given platform.
*/
getBlacklistRE: () =>
blacklist([
// Ignore the local react-native so that we avoid duplicate modules
/\/app\/node_modules\/react-native\/.*/
])
};
module.exports = config;
package.json
{
"name": "react-native-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.7.0"
},
"scripts": {
"native": "cd app && yarn native"
},
"dependencies": {
"@expo/vector-icons": "^6.2.1",
"expo": "^22.0.0",
"react": "16.0.0-beta.5",
"react-native": "^0.49.0"
}
}
MainApp.js
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<MaterialIcons name="search" color="black" size={32} />
<MaterialIcons name="location-searching" color="black" size={32} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});