CODEWITHSUNDEEP
react-nativeexpo
Jack Mask
Jack Mask

Reputation: 13

React native "fontFamily is not a valid style attribute"

error image

I've been getting this error today in my react native/expo project. I have tried clearing cache and re-installing packages, etc.

My package.json is the following: 

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@firebase/app": "^0.3.4",
    "babel": "^6.23.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-expo": "^5.0.0",
    "eslint": "^5.8.0",
    "expo": "^31.0.0",
    "expo-cli": "^2.2.5",
    "firebase": "^5.5.7",
    "for": "^0.1.0",
    "lodash": "^4.17.11",
    "me": "^0.3.0",
    "moment": "^2.22.2",
    "react": "^16.6.0",
    "react-native": "^0.57.4",
    "react-native-blur": "^3.2.2",
    "react-native-elements": "^0.19.1",
    "react-native-keyboard-aware-scrollview": "^2.0.0",
    "react-native-material-textfield": "^0.12.0",
    "react-native-platform-touchable": "^1.1.1",
    "react-native-scrollable-tab-view": "^0.9.0",
    "react-native-snap-carousel": "^3.7.5",
    "react-native-swiper": "^1.5.13",
    "react-native-tab-view": "^1.2.0",
    "react-native-vector-icons": "^6.0.2",
    "react-navigation": "^2.18.2",
    "react-redux": "^5.1.0",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "windows": "0.0.8",
    "worked": "^0.0.2",
    "ws": "^6.1.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-react": "^6.24.1",
    "redux": "^4.0.1",
    "remote-redux-devtools": "^0.5.13"
  },
  "resolutions": {
    "babel-core": "7.0.0-bridge.0"
  }
}

My use cases for font family are similar to the following:

export default StyleSheet.create({
    container: {
      borderRadius: 4,
      borderWidth: 0.5,
      borderColor: '#d6d7da',
    },
    title: {
      textAlign: 'center',
      fontSize: 30,
      marginBottom: 0,
      fontFamily: 'mainFontBold',
    },

where mainFontBold is a custom font loaded in my app.js. This has been working fine before today, and I'm not sure what could have happened to cause this change.

I can't figure out why it would be giving me this error? The expo docs clearly state that fontFamily is a valid style attribute for text, see:

https://facebook.github.io/react-native/docs/text-style-props#fontfamily

Does anyone have any idea how I might be able to fix this, or what might be causing this error? Thanks!

Upvotes: 1

Views: 1828

Answers (2)

Jian
Jian

Reputation: 3258

Use the lower version of react-native.

"react-native": "0.57.1"

This issue has been fixed already.(Not released yet)

Upvotes: 0

Neal
Neal

Reputation: 673

I ran into the same issue after modifying package.json. The modification I made was to change from:

dependencies: {
    ...,
   "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
}

To:

 dependencies: {
    ...,
   "react-native": "0.57.4",
}

I'm not entirely sure, but it seems as if expo is using a specific react-native version. More documentation on this subject can be found on: https://docs.expo.io/versions/v31.0.0/workflow/upgrading-expo-sdk-walkthrough

Upvotes: 3

Related Questions