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.

[React Native] attrs ignored unless defaultProps is set

See original GitHub issue

Environment

System:

OS: macOS 10.14
CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz
Memory: 41.16 MB / 16.00 GB
Shell: 5.3 - /bin/zsh

Binaries:

Node: 11.3.0 - ~/.nvm/versions/node/v11.3.0/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v11.3.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

styled-components: ^4.1.3 => 4.1.3

Reproduction

https://snack.expo.io/@maxschmeling/styled-components-defaultprops-issue-reproduction

Steps to reproduce

Create an ActivityIndicator styled component and attempt to set size with attrs.

Expected Behavior

Size should be set.

Actual Behavior

The properties in attrs are completely ignored.

Workaround

Set the returned styled-component’s defaultProps to {}.

Issue Analytics

State:
Created 5 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

oomathiascommented, Jan 30, 2019

@maxschmeling I totally agree with you, that’s why I started a PR to change how attrs are merged and how dynamic attrs are handled. Even if I don’t agree with the actual design, I respect the core team position on it. That’s why I created this graph to show how it actually works, I think it should be documented and tested. There is actually no way to handle dynamic attrs (unless we reopen my PR).

1reaction

oomathiascommented, Jan 30, 2019

@mxstbr @maxschmeling I still have to apply the fix to StyledNativeComponent, and defaultProps would be overridable. But as I described here https://github.com/styled-components/styled-components/pull/2258#issuecomment-444950078 since 4.1.2, ActivityIndicator which isn’t a styled component (div on my graph) will receive the defaultProps color and not attrs color.

This would work, but color would be overridable when you use component.

component.defaultProps = { ...ActivityIndicator.defaultProps, color: 'green' };

Top Results From Across the Web

React defaultProps not working - Stack Overflow

Initially, my field prop is an empty object. Default props are only used if no value is passed for the prop. It is...

Default Props in React/TypeScript - DEV Community ‍ ‍

If nothing was passed in (i.e., if the property is undefined ), I set the value to its default. This approach preserves my...

React: Everything about Default Props | by Chidume Nnamdi

In this post, we'll learn all about default props in React. ... if the parent component doesn't pass any attributes to the child...

Unknown Prop Warning - React

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as...

Advanced Usage - styled-components

a React component instance (if targeting a custom component e.g. extended from React.Component). const Input = styled.input` padding: 0.5em; margin: 0.5em; ...