This is a proposal for a ⚡lightning talk at the Reactive 2016 conference.
🌟Star this gist if you want to see it on the conference.
Have you started with your RN application and now it is the time to make it beautiful with nice colors? Although you defined your components and you can add colors there, you want different colors in different situations (those inverse headers are so nice 💕))
What if you could simply replace original RN components and styles would be added automatically.
react-native-themeable provides themeable replacement (i.e. implements same API) for RN components. Since all your components are made from those, it is pretty straight-forward to add theme styling to them 🎉. They work within contexts so same component can be styled differently based on the situation.
This library is not opinionated on how do you define your theme.
Do you like creating new semantic components (Button = themeable(TouchableHighlight)) or you rather preffer use attributes to apply common styles (<Text primary>).
Furthemore we believe that community will build more opinionated themes or frameworks based upon this work.
This idea is just at the start 🚧, so if you have any feedback, suggestions or improvements, let us know. Thanks.
This is how it looks like, no styling boilerplate, nice, isn't it?
@theme(redTheme)
class App extends Component {
render() {
return (
<TouchableHighlight onPress={this._onPress}>
<Text>Themeable hello world</Text>
</TouchableHighlight>
)
}
}