Support for style-related props (not set via 'style') in React Native

Presently in styled components, there is no way to affect other style-related props in React Native.

This style-related-prop-not-defined-via-style can be found in many third party libraries (such as React Native Navbar’s tintColor prop), in custom components one might write themselves, and in React Native’s core components, for example:

• TouchableHighlight underlayColor
• ActivityIndicator color and size
• Slider maximumTrackTintColor and minimumTrackTintColor
• StatusBar backgroundColor
• TextInput placeholderTextColor, underlineColorAndroid and keyboardAppearance
• Switch onTintColor, thumbTintColor and tintColor
• … and a lot more

It’s of course possible to simply set these props manually, but styled-component’s themes are unable to be leveraged to standardize them across the codebase.

[mxstbr]

This is now finally possible in version two with the .attrs constructor!

const Button = styled.TouchableHighlight.attrs({
  underlayColor: 'red',
})`
  color: blue;
`

[mxstbr]

That’s an unnecessary escape hatch @adamterlson, since you can already set any prop desired when rendering. I think with the list @irakli-janiashvili dug up we should be fine to publish a first version with support for these. It doesn’t matter if it’s not 100% complete, as we can always add more to the list.

Basically, what we should do is have a separate module called react-native-style-props which exports an object. This object should be keyed by primitive and each one should have an array of props like this maybe?

// react-native-style-props/index.js

module.exports = {
  ActivityIndicator: ['color', 'size'],
}

Then from styled-components we can check at creation time if the current property is supported as a prop, and pass it to the underlying primitive. What do you think, does somebody want to go ahead and create that repo?