Combining theming and styled-components

When use react-native-elements theme provider and apply additional styles through styled-components it results in loosing styles defined in the theme.

I’m at 1.0.0-beta7 version and trying to combine theming (as top-level styling) and styled-components (for further tuning).

Explain what you did I have a setup that looks like:

Application index.js:

import React from 'react';
import { View } from  'react-native';
import { ThemeProvider, Text } from 'react-native-elements';
import { StyledText } from 'styled/Text/styled';
import theme from 'constants/theme';
...

class App extends React.Component {
  render(){
    return (
        <ThemeProvider theme={theme}>
           <View>
             <Text>Foo</Text>
             <StyledText>Bar</StyledText>
           </View>
        </ThemeProvider>
    );
  }
}

theme.js

import { Text } from 'react-native-elements';

export default {
  Text: {
    style: {
      color: 'red',
    }
  }
};

styled.js, which intent is to provide further styling for the Text component:

import styled from 'styled-components/native';

import { Text } from 'react-native-elements';

export const StyledText = styled(Text)`
  font-size: 16px;
`;

Expected behaviour I expect both Text and StyledText elements rendered with the red text color.

Describe the bug Only the Text component gets a red colored text Foo, StyledText doesn’t get red color.

I’m not honestly sure if it is a bug, but I can’t find the way for styled component to respect the theme.

Your Environment (please complete the following information):

software	version
react-native-elements	1.0.0-beta7
styled-components	4.1.3
react-native	https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz
yarn	1.7.0

[arpitBhalla]

Yupp, Could you create a PR for this?

Make changes in website/docs/*

[iRoachie]

This is a little tricky to fix on our end. The probably here is that styled-components ends up passing a style prop that is an array of objects.

Example:

export const StyledText = styled(Text)`
  font-size: 16px;
`

The above results in:

<Text style={[{ fontSize: 16 ]} />

---

The value in your theme results in:

<Text style={{ color: 'red' }} />

The theme withTheme hoc on the Text component tries to merge the incoming props, but the problem is that one is an array and the other is an object. Since these two can’t merge the latter is taken and that’s why you only see the font size being taken effect.

An easy way to fix this in userland is to change the value in your theme to an array:

// theme.js

import { Text } from 'react-native-elements';

export default {
  Text: {
    style: [{
      color: 'red',
    }]
  }
};

This should solve the problem, except for a proptypes warning