Helper to help deal with StyleSheet in React Native

App.js

/**
 * @flow
 */
import React, { Component } from 'react'
import { StyleSheet, Text } from 'react-native'
import { MyCustomText } from './MyCustomText'

export class App extends Component {
  render () {
    return (
      <MyCustomText secondary>
        My Super App !
      </MyCustomText>
    )
  }
}

create-style-selector.js

export const createStyleSelector = (style) => (name, props = {}) => {
  let styles = []
  Object.keys(style).forEach(key => {
    let ok = false
    if (key.startsWith(`${name}.`)) {
      ok = true
      key.split('.').forEach(subKey => {
        // we don't have key
        if (subKey !== name && props[subKey] !== true) {
          ok = false
        }
      })
    }

    if (ok) {
      styles.push(style[key])
    }
  })

  return [
    style[`${name}`] || {}
  ].concat(styles)
}

MyCustomText.js

/**
 * @flow
 */
import React, { Component } from 'react'
import { StyleSheet, Text } from 'react-native'
import { createStyleSelector } from './create-style-selector'

export class MyCustomText extends Component {
  render () {
    const {
      primary,
      disabled
    } = this.props
    const style = selectStyle('text', {primary, secondary})
    
    return (
      <Text style={style}>{this.props.children}</Text>
    )
  }
}

const styleSheet = StyleSheet.create({
  'text': {
    color: 'black'
  },
  'text.secondary': {
    color: 'green'
  },
  // this style will only be applied if we have both secondary & disabled props 
  // as true
  'icon.secondary.disabled': {
    color: 'green with transparency'
  },
  // icon.disabled use the base color and opacity
  'icon.disabled': {
    color: 'black with transparency'
  },
})

const selectStyle = createStyleSelector(styleSheet)