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.

Warning: Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

See original GitHub issue

I started to see this after upgrading to v1. Is there a quick fix for this?

Warning: Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.
const slideLeft = {
    atEnter: {
      opacity: 0,
      offset: 100,
      pos: 0,
    },
    atLeave: {
      opacity: 0,
      offset: -100,
      pos: 2,
    },
    atActive: {
      opacity: 1,
      offset: 0,
      pos: 1,
    },
    mapStyles(styles) {
      return {
        position: (styles.pos <= 1) ? 'relative' : 'absolute',
        opacity: styles.opacity,
        transform: `translateX(${styles.offset}%)`,
      };
    },
  };
<RouteTransition
pathname={params.location.pathname}
className="transition-wrapper"
{...slideLeft}
 >
<Switch key={params.location.key} location={params.location}>
  <Route path={`${match.url}/info/`} component={PatientInfoPage} />
  <Route path={`${match.url}/confirmed/`} component={ShowConfirmationPage} />
  </Switch>
</RouteTransition>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
a-nozeretcommented, Sep 19, 2017

https://github.com/chenglou/react-motion/issues/268#issuecomment-292324479 TransitionMotion expects styles.key to be a string.

Solve it quickly by using the props from withRouter and adding to AnimatedSwitch the location object + a key of type String.

E.g. <AnimatedSwitch location={{ ...location, key: '' }} ...

@maisano in AnimatedSwitch.js:35 you could ensure the default key is a String.

1reaction
a-nozeretcommented, Sep 14, 2017

Still getting the error using AnimatedSwitch, with the latest version here.

react-router-transition@1.0.1
react-motion@0.5.1
react-router-dom@4.2.2
Read more comments on GitHub >

github_iconTop Results From Across the Web

Invalid prop `style` of type `array` supplied to `Row`, expected ...
i'm having this Error when i trying to run my project which is Warning: Failed prop type: Invalid prop style of type array...
Read more >
Failed prop type: invalid prop react native - 免费编程教程
"Warning Failed prop type invalid prop 'value' of type 'object' supplied to ... Failed propType: Invalid prop 'styles' supplied to 'TransitionMotion'.
Read more >
invalid prop `rows` of type `object` supplied to `forwardref ...
I am using react-native-snap-carousel, It worked fine, It fetches data fine but i am getting 2 warnings in that app. Warning: Failed prop...
Read more >
Warning: Failed prop type: Invalid prop `children` supplied to ...
Warning : Failed prop type: Invalid prop `children` supplied to `ForwardRef(…)`, expected a ReactNode. Material UI⁴.11, React¹⁷.0.2, Created at ...
Read more >
PropTypes - react - Web Coding Center
react - PropTypes. ... return new Error( 'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`....
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