Skip to content

Instantly share code, notes, and snippets.

@sodik82
Created August 31, 2016 17:16
Show Gist options
  • Save sodik82/0a84e01d0e2a5adcfffd31e5406afdfe to your computer and use it in GitHub Desktop.
Save sodik82/0a84e01d0e2a5adcfffd31e5406afdfe to your computer and use it in GitHub Desktop.
Lightning talk proposal for the Reactive 2016 Conference

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.

Theming of React Native components

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

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>
    )
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment