aksonov / react-native-router-flux

The first declarative React Native router
MIT License
8.98k stars 2.11k forks source link

Lack of support for React-Native-Web v0.12+ (usage of deprecated/removed ViewPropTypes) #3707

Open RonAmihai opened 4 years ago

RonAmihai commented 4 years ago

Version

Expected behaviour

Application using react-native-router-flux should render on web correctly (using react-native-web v0.12+), without any errors.

Actual behaviour

react-native-web had removed support for ViewPropTypes since v0.12 (because Facebook has declared the PropTypes API as deprecated and suggests Flow/Typescript instead).

Because of that, any react-native library which use ViewPropTypes simply throws runtime error/s when running on web using react-native-web v0.12+.

In react-native-router-flux's case, the error is thrown in Router.js at the specified line: https://github.com/aksonov/react-native-router-flux/blob/b9377e3b39752cf19fa9f7d2c530543efd0be3db/src/Router.js#L135

Because ViewPropTypes doesn't exist on react-native-web v0.12+, the following error is thrown:

Router.js?d51e:124 Uncaught TypeError: Cannot read property 'style' of undefined
    at eval (Router.js?d51e:124)
    at Object../node_modules/react-native-router-flux/src/Router.js (renderer.js:7834)
    at __webpack_require__ (renderer.js:791)
    at fn (renderer.js:102)
    at eval (index.js?1486:2)
    at Object../node_modules/react-native-router-flux/src/index.js (renderer.js:7922)
    at __webpack_require__ (renderer.js:791)
    at fn (renderer.js:102)
    at eval (content.tsx?d0ff:4)
    at Object../src/screens/main/content.tsx (renderer.js:12130)

Steps to reproduce

  1. Create React-Native application using expo-cli
  2. Ensure react-native-web is updated to latest version (or at least v0.12)
  3. Add react-native-router-flux usage to the app
  4. Run the app in web, using yarn web / expo start --web

Possible solution / Quick fix

The above error can be solve by removing any ViewPropTypes usage from the library, or by mocking ViewPropTypes functionality whenever ViewPropTypes is undefined.

For example, the following fix has been solved the above error in Router.js (line 135) for my case: sceneStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object

This fix at Router.js seems to make react-native-router-flux function well with react-native-web v0.12+, but I don't sure if there are any more ViewPropTypes usage in the library.

However, mocking any ViewPropTypes usage with relevant PropTypes type will probably solve any issue like this

evtuhovdo commented 3 years ago

create web-postinstall-fix.sh

# https://github.com/necolas/react-native-web/issues/1537
# https://github.com/archriss/react-native-snap-carousel/issues/770

echo 'Fixing PropTypes issues'

if test -f node_modules/react-native-web/dist/exports/ViewPropTypes/index.js; then
   echo "ViewPropTypes problem fixed already!"
else
    mkdir node_modules/react-native-web/dist/exports/ViewPropTypes
    touch node_modules/react-native-web/dist/exports/ViewPropTypes/index.js
    echo 'var ViewPropTypes = { style: null }; export default ViewPropTypes;'>> node_modules/react-native-web/dist/exports/ViewPropTypes/index.js
    echo "export { default as ViewPropTypes } from './exports/ViewPropTypes';">> node_modules/react-native-web/dist/index.js
fi

if grep -qs "Text.propTypes" node_modules/react-native-web/dist/exports/Text/index.js
then
   echo "Text props types problem fixed already!"
else
    echo 'Text.propTypes = {}'>> node_modules/react-native-web/dist/exports/Text/index.js
fi

in package.json

 "scripts": {
    "postinstall": "sh ./web-postinstall-fix.sh",

then after yarn install problem will fixed