React-Native Warning: Overwriting font Family style attribute preprocessor

user_4866593 0
Viewed 2310

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
}

enter image description here

Is it a package problem?

react-native typescript
2 Answers

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"
]);
user_45645460

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
user_107980400
Related