glamorous-native before and after

after.js

import glamorous from 'glamorous-native'

const style = StyleSheet.create({
  baseStyle: {
    color: '#333',
    // some other "base styles"
  }
})

const Text = glamorous.text(
  // normal stylesheet styles
  styles.baseStyle,
  
  // dynamic styles
  props => ({fontSize: props.big ? 32 : 24}),
  
  // ...more styles
)

export default Text

before.js

import {Text} from 'react-native'

function BaseText ({style, big, ...props}) {
  return (
    <Text
      // yawwwwn
      style={[styles.baseStyle, {fontSize: big ? 32 : 24}, style]}
      {...props}
    />
  )
}

const style = StyleSheet.create({
  baseStyle: {
    color: '#333',
    // some other "base styles"
  }
})

export default BaseText

usage.js

import Text from 'before or after'

function SomeUserInterface() {
  return (
    <Text 
      style={styles.anExternallyProvidedStyle}
      big
    >
      Large Text
    </Text>
  )
}

const styles = StyleSheet.create({
  anExternallyProvidedStyle: {...}
})