React-native-paper: Usage of deprecated __expo global

[RafikiTiki]

Current behaviour

After upgrading expo to v40 and running an app I get a __expo global deprecation warning

Expected behaviour

This lib should be compatible with new/updated Expo guidelines.

Solution

We need to follow steps described here in official expo docs: https://github.com/expo/fyi/blob/master/deprecated-globals.md

The code that is causing deprecation warning is located here: https://github.com/callstack/react-native-paper/blob/master/src/components/MaterialCommunityIcon.tsx#L19-L25

Your Environment

| software | version
| --------------------- | -------
| ios or android |ios 14.2
| react-native |https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz
| react-native-paper |4.4.1
| node |12.8.4
| npm or yarn |yarn 1.22.5
| expo sdk |40.0.0

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• expo
• npm
• yarn

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• expo
• npm

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• yarn (found: 1.22.5, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[JuanDavidLopez95]

Hi,

I can concur to this. I am getting a similar error; Not sure if this should be its own issue, but here is the message:

Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.

I do not have either of these modules included in my babel set-up, which is the following:

module.exports = function(api) {
  api.cache(true);

  return {
    presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"],
    plugins: [
      ["module:react-native-dotenv", {
        "moduleName": "@env",
        "path": ".env",
        "blacklist": null,
        "whitelist": null,
        "safe": true,
        "allowUndefined": true
      }]
    ],
    env: {
      production: {
        plugins: ["react-native-paper/babel", "module:react-native-dotenv"], 
      }  //end production object property
    } //end env object property
  }; //end return statement
};

Here is my setup:

ios or android | ios 13.7
-- | --
react-native | https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz
react-native-paper | 4.3.1
node | 12.19.0
npm or yarn | npm 6.14.8
expo sdk | 39.0.2

[Hirbod]

I can confirm this:

Your project is accessing the following APIs from a deprecated global rather than a module import: Constants (expo-constants).

https://github.com/callstack/react-native-paper/search?q=__expo

This APIs will be removed in SDK 41. Constants must be included from expo-constants
import Constants from expo-constants.

[wobsoriano]

constants.ts file using global constants too. Located in src/constants.ts

import { Platform } from 'react-native';

// @ts-ignore
const expo = global.__expo; // THIS TRIGGERS THE WARNING

const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo?.Constants
  ? expo.Constants.statusBarHeight
  : 0;

export const APPROX_STATUSBAR_HEIGHT = Platform.select({
  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,
});

Workaround for now to hide this warning is to use LogBox.

// App.js
import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  'deprecated global rather than a module import: Constants (expo-constants)',
]);

[brunohkbx]

We also need to update react-native-safe-area-view. RNP is using v0.14.9 and there's this piece of code using Expo globals.

node_modules/react-native-safe-area-view/index.js

const statusBarHeight = isLandscape => {
  if (_customStatusBarHeight !== null) {
    return _customStatusBarHeight;
  }

  /**
   * This is a temporary workaround because we don't have a way to detect
   * if the status bar is translucent or opaque. If opaque, we don't need to
   * factor in the height here; if translucent (content renders under it) then
   * we do.
   */
  if (Platform.OS === 'android') {
    if (global.Expo) {
      return global.Expo.Constants.statusBarHeight;
    } else {
      return 0;
    }
  }

cc @Trancever

[Tsourdox]

I have the same issue, any updates on this issue? =)

[Trancever]

It should be fixed in v4.5.0. Please reopen if you still encounter this issue on v4.5.0

[Hirbod]

I can confirm its fixed for me!