question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PropTypes Warnings on expo-web

See original GitHub issue

When you run this library in Expo Web, you get warnings for every time ViewPropTypes.style is used. For example:

Warning: Failed prop type: Toast: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `object`.
    in Toast (at App.tsx:40)
    in App (created by ExpoRootComponent)
    in ExpoRootComponent (created by RootComponent)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

Happens because of the PropTypes here https://github.com/calintamas/react-native-toast-message/blob/master/src/index.js#L383

This is probably because prop-types has been depricated on React-Native-Web, but not React-Native. https://github.com/necolas/react-native-web/issues/1537#issuecomment-601167089

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
seanadkinsoncommented, Jan 19, 2021

Yeah, looks like we’ll need the prop-types stuff dropped in order to support the latest react-native-web. In the meantime, following the example in the linked react-native-web issue, here is a script that will monkey-patch the library:

fix-rn-web-proptypes.sh:

#!/bin/bash
# Only need this until this issue is fixed: https://github.com/calintamas/react-native-toast-message/issues/117

echo 'Fixing PropTypes issues'

if grep -q "export const ViewPropTypes = { style: null };" ./node_modules/react-native-web/dist/index.js; then
    echo "ViewPropTypes fixed already!"
else
    printf "\nexport const ViewPropTypes = { style: () => {} };">> ./node_modules/react-native-web/dist/index.js
    printf "\nexport const ViewPropTypes = { style: () => {} };">> ./node_modules/react-native-web/src/index.js
    printf "\nText.propTypes = { style: () => {} };">> ./node_modules/react-native-web/dist/exports/Text/index.js
    printf "\nText.propTypes = { style: () => {} };">> ./node_modules/react-native-web/src/exports/Text/index.js
fi

Then add "postinstall": "./fix-rn-web-proptypes.sh" in the scripts section of your package.json.

After doing the above, I’m able to use this package with react-native-web 👍

0reactions
calintamascommented, Feb 14, 2021

published a fix in v1.4.5

Read more comments on GitHub >

github_iconTop Results From Across the Web

Don't Call PropTypes Warning
In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any...
Read more >
PropTypes Module is not giving warnings like it should
I imported Proptypes at the top of my component and tried to set some required proptypes for my component, but I am not...
Read more >
PropType validation does not show warning in console
NET and am trying to implement propType validation. But I don't receive any warnings even though the props I am passing to my...
Read more >
Disable PropType warnings in Jest and React - Code Is Bae
A quick look at how to disable proptype warnings in React and Jest. ... This post shows how to disable proptype warning messages...
Read more >
How to forget about type errors in your React props with ...
Using prop types in React gives you a bit of the TypeScript ... can pass in any type of data and it compiles...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found