React-native-calendars: Web (react-native-web) will not support ViewPropTypes API it is upcoming release

[vladp]

Description

React-native-calendars is a very portable package. Some folks, like us, have been using it on web browsers with React-native-web.

With React-native-web release 0.12 and above, RNW will remove ViewPropTypes export.

This API, unfortunately, is being used by this package, therefore, unless changes are made this will break the web-platform usage.

(tested with most recent release of react-native-calendars 1.221.0 and the upcoming release candidate for RNW -- 0.12.0-rc.1)

[jpaas]

Just hit this problem on my upgrade to react-native-web 0.12

[nathsimpson]

I have a PR for this, but it's still waiting for review :( https://github.com/wix/react-native-calendars/pull/1089

[vladp]

@Inbal-Tish is that possible to incorporate @nathsimpson PR in?
Or are there wider context issues that prevent the PR from going in?

thx

[vladp]

it seems that it was merged yesterday into the main branch, but error is showing in 1.280.0. Not clear if the fix made into npm release.

[vladp]

@nathsimpson
The fix is not working for us.
Still getting

Creating an optimized production build...
Failed to compile.

./node_modules/react-native-calendars/src/calendar/index.js
Attempted import error: 'ViewPropTypes' is not exported from 'react-native' (imported as 'ReactNative').

If I am understanding this correctly, your update checks if ViewPropTypes is defined, and if it is not defined, it aliases to something else.

However webpack or babel (we are using CRA toolchain with config overrides),
seems to 'detect' that ViewPropTypes are still being imported
may be by this line in calendars/index.js :

const {View, ViewPropTypes} = ReactNative;
Because, if I remove ViewPropTypes from the above line, in this file and in agenda/idnex.js -- the build goes through.

Are you somehow able to tell webpack to ignore the non-existing import?

thank you in advance for any hints

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nandorojo]

This is the solution:

// agenda/index.js
import {Text, View, Dimensions, Animated, Platform}  from 'react-native';

...

const viewPropTypes =
  typeof document !== 'undefined' || Platform.OS === 'web'
    ? PropTypes.shape({style: PropTypes.object})
    : require('react-native').ViewPropTypes || View.propTypes;

We'd do the same in calendar/index.js. This way, we inline require ViewPropTypes, only on platforms where it still exists.

@nathsimpson I believe #1089 breaks react-native-web tree shaking by importing the whole package.

I could submit a PR with a fix. In the meantime, I might rely on patch-package.

Update

Here's what I did:

1. Setup patch-package (see their docs)

yarn add -D patch-package postinstall-postinstall

1. Add to package.json

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

1. Add a /patches folder in your app root, and create a react-native-calendars+1.403.0.patch file.

Put this in that file:

diff --git a/node_modules/react-native-calendars/src/agenda/index.js b/node_modules/react-native-calendars/src/agenda/index.js
index 1f17071..7dd202f 100644
--- a/node_modules/react-native-calendars/src/agenda/index.js
+++ b/node_modules/react-native-calendars/src/agenda/index.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import * as ReactNative from 'react-native';
+import {Text, View, Dimensions, Animated, Platform} from 'react-native';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';

@@ -15,11 +15,10 @@ import {AGENDA_CALENDAR_KNOB} from '../testIDs';
 const HEADER_HEIGHT = 104;
 const KNOB_HEIGHT = 24;
 //Fallback for react-native-web or when RN version is < 0.44
-const {Text, View, Dimensions, Animated, ViewPropTypes} = ReactNative;
 const viewPropTypes =
-  typeof document !== 'undefined'
+  typeof document !== 'undefined' || Platform.OS === 'web'
     ? PropTypes.shape({style: PropTypes.object})
-    : ViewPropTypes || View.propTypes;
+    : require('react-native').ViewPropTypes || View.propTypes;

 /**
  * @description: Agenda component
diff --git a/node_modules/react-native-calendars/src/calendar/index.js b/node_modules/react-native-calendars/src/calendar/index.js
index 92d5bd5..815bc98 100644
--- a/node_modules/react-native-calendars/src/calendar/index.js
+++ b/node_modules/react-native-calendars/src/calendar/index.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import * as ReactNative from 'react-native';
+import {Platform, View} from 'react-native';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';

@@ -17,11 +17,10 @@ import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
 import {SELECT_DATE_SLOT} from '../testIDs';

 //Fallback for react-native-web or when RN version is < 0.44
-const {View, ViewPropTypes} = ReactNative;
 const viewPropTypes =
-  typeof document !== 'undefined'
+  typeof document !== 'undefined' || Platform.OS === 'web'
     ? PropTypes.shape({style: PropTypes.object})
-    : ViewPropTypes || View.propTypes;
+    : require('react-native').ViewPropTypes || View.propTypes;
 const EmptyArray = [];

 /**

1. Run a clean install yarn install.

You should see this:

[nathsimpson]

That feeling when you're looking up this issue, and people are discussing a PR you made 😅
I've run into this issue again after updating React Native Web to v0.13.7, while updating Expo and RN to 39 and 0.63.3. Even on latest version of React Native Calendars. Looks like PR #1313 will fix the issue 👍

[nathsimpson]

Apologies @vladp for not seeing your comments

[nandorojo]

I left some comments on #1313, which should help solve the outstanding issues there. It would be awesome to have it merged. In the meantime, I'll probably have to make the changes on my local branch.

Thanks to everyone helping on this!

[gstcyr]

Here's my patch-web.sh script that i keep in a scripts/ directory. In package.json, just add "postinstall": "scripts/patch-web.sh" to the scripts section.

# needed by some libraries for react-native-web 12+ which no longer exports ViewPropTypes

if test -f "node_modules/react-native-web/dist/patched"; then
  echo "react-native-web already patched!"
else
  echo "Patching react-native-web propTypes"
  echo '\n'"export const ViewPropTypes = { style: ()=>{} };" >> node_modules/react-native-web/dist/index.js

  mkdir -p node_modules/react-native-web/dist/exports/ViewPropTypes
  echo "" >> node_modules/react-native-web/dist/exports/ViewPropTypes/index.js

  # patch Text default propTypes export:
  echo '\n'"Text.propTypes = {
    style: ()=>{}
  }" >> node_modules/react-native-web/dist/exports/Text/index.js

  #patch Image default propTypes export:
  echo '\n'"Image.propTypes = {
    style: ()=>{}
  }" >> node_modules/react-native-web/dist/exports/Image/index.js

  echo "patched" >> node_modules/react-native-web/dist/patched
fi

[bananer]

Maybe we can just stop using ViewPropTypes? I've created a PR #1424

[mistkafka]

@bananer

I choose remove all props-type, and it's work for me.

https://github.com/mistkafka/react-native-calendars/commit/4a948d0877b2ffadb76a3117af2655b65a726b54