Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix theme prop usage in StyledNativeComponent (#2576)
  • Loading branch information
JelteF authored and quantizor committed May 31, 2019
1 parent a1571ea commit 7c877ef
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 8 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Expand Up @@ -6,6 +6,9 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this

## Unreleased

- Fix `theme` prop for styled native components, also fixes `theme` in
`defaultProps` for them.

- Remove validation in Babel macro, by [@mAAdhaTTah](http://github.com/mAAdhaTTah) (see [#2427](https://github.com/styled-components/styled-components/pull/2427))

## [v4.2.0] - 2019-03-23
Expand Down
2 changes: 1 addition & 1 deletion packages/styled-components/src/models/StyledComponent.js
Expand Up @@ -184,7 +184,7 @@ function useStyledComponentImpl<Config: {}, Instance>(
// NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
// but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
// should be an immutable value, but behave for now.
const theme = determineTheme((props: any), useContext(ThemeContext), defaultProps);
const theme = determineTheme((props: any), useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;

const utils = useDeprecationWarnings(displayName);
const [context, attrs] = useResolvedAttrs(theme, props, componentAttrs, utils);
Expand Down
11 changes: 4 additions & 7 deletions packages/styled-components/src/models/StyledNativeComponent.js
Expand Up @@ -76,13 +76,10 @@ class StyledNativeComponent extends Component<*, *> {

const { defaultProps, displayName, target } = forwardedComponent;

let generatedStyles;
if (theme !== undefined) {
const themeProp = determineTheme(this.props, theme, defaultProps);
generatedStyles = this.generateAndInjectStyles(themeProp, this.props);
} else {
generatedStyles = this.generateAndInjectStyles(theme || EMPTY_OBJECT, this.props);
}
const generatedStyles = this.generateAndInjectStyles(
determineTheme(this.props, theme, defaultProps) || EMPTY_OBJECT,
this.props,
);

const propsForElement = {
...this.attrs,
Expand Down
31 changes: 31 additions & 0 deletions packages/styled-components/src/native/test/native.test.js
Expand Up @@ -295,6 +295,37 @@ describe('native', () => {
style: [{}],
});
});

it('theme prop works', () => {
const Comp = styled.Text`
color: ${({theme}) => theme.myColor};
`;

const wrapper = TestRenderer.create(
<Comp theme={{myColor: 'red'}}>Something else</Comp>
);
const text = wrapper.root.findByType('Text');

expect(text.props.style).toMatchObject(
[{"color": "red"}],
);
});

it('theme in defaultProps works', () => {
const Comp = styled.Text`
color: ${({theme}) => theme.myColor};
`;
Comp.defaultProps = {theme: {myColor: 'red'}}

const wrapper = TestRenderer.create(
<Comp>Something else</Comp>
);
const text = wrapper.root.findByType('Text');

expect(text.props.style).toMatchObject(
[{"color": "red"}],
);
});
});

describe('expanded API', () => {
Expand Down

0 comments on commit 7c877ef

Please sign in to comment.