React native “fontFamily is not a valid style attribute”

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 361.27 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.13.0 - /usr/local/bin/node
      Yarn: 1.12.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.0 => 16.6.0
      react-native: ^0.57.4 => 0.57.4
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

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!

[Jmask]

The problem was related to React native versioning. I changed my version in package.json from

    "react-native": "^0.57.4",

to

    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",

and the problem resolved itself!

[tatobari]

This is happening to me with Expo only. I simply switched to the official current React Native package but the import {Icon} from expo stopped working. I switched back to Expo’s React Native package and got an Unable to resolve (schedule/tracking) from file... error. So, I simply installed this missing module.

I had to play a bit with my project’s packages to make it work, but it does, so far.

My package.json relevant dependencies are:

"expo": "^31.0.5",
"react": "^16.6.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
"schedule": "^0.4.0",

Expo’s version of React Native is currently using schedule v0.4.0. The code reads require('schedule/tracking'), while the version installed by the version of React I’m using is scheduler v0.11.2 and the code to require the same module would be require('scheduler/tracing'). Notice that schedule and scheduler are not exactly the same. They are wo different NPM packages.