'React-Native Warning: Overwriting font Family style attribute preprocessor
I'm getting the following warning:
"Overwriting font Family style attribute preprocessor" coming out from StyleSheet.js
when running the app on iOS simulator. I haven't tested on Android yet though.
App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
package.json
{
"main": "index.js",
"scripts": {
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"start": "react-native start"
},
"dependencies": {
"expo": "~43.0.0",
"expo-splash-screen": "~0.13.3",
"expo-status-bar": "~1.1.0",
"expo-updates": "~0.10.5",
"react": "17.0.2",
"react-dom": "17.0.1",
"react-native": "0.66.1",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@types/react": "^17.0.32",
"@types/react-native": "^0.66.1",
"typescript": "^4.4.4"
},
"private": true
}
Is it a package problem?
Solution 1:[1]
This is coming straight from expo if you have expo-font
installed.
This is the line of code in node_modules/expo/build/Expo.fx.js
that leads to that warning:
// If expo-font is installed and the style preprocessor is available, use it to parse fonts.
if (StyleSheet.setStyleAttributePreprocessor) {
StyleSheet.setStyleAttributePreprocessor('fontFamily', Font.processFontFamily);
The line from node_modules/react-native/Libraries/StyleSheet/StyleSheet.js
that raises the warning:
if (__DEV__ && typeof value.process === 'function') {
console.warn(`Overwriting ${property} style attribute preprocessor`);
}
It seems like the best thing to do would be to hide the warning for now by adding the following lines to the top of your App.js
or index.js
:
import { LogBox } from 'react-native';
LogBox.ignoreLogs([
"Overwriting fontFamily style attribute preprocessor"
]);
Solution 2:[2]
I was facing the same issue as I tried to upgrade my react native dependency , change "react-native": "0.66.1" to "react-native": "0.64.2", and then run
yarn install
or
npm install
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | abdemirza |