Warning: Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.
See original GitHub issueI 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:
- Created 6 years ago
- Reactions:5
- Comments:12 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
Still getting the error using AnimatedSwitch, with the latest version here.