The renderer is the most important utility providing methods to render your styles. It caches every single style that is rendered at any time. Therefore it always has an up-to-date snapshot of your current style environment.

You should only have a single renderer which handles all styles of your whole application. To create a new renderer instance, simply use the createRenderer method to actually get a renderer instance.


renderRule(rule, [props])

Renders a rule using the props to resolve it.


  1. rule (Function): A function which satisfies the rule behavior. It must return a valid style object.

    Note: In addition to valid style objects, you also mustonly use React Native supported properties.

  2. props (Object?): An object containing properties to resolve dynamic rule values. Defaults to an empty object.


(string): The style object provided by StyleSheet.create.


import { createRenderer } from 'fela'

const renderer = createRenderer(mountNode)

const rule = props => ({
  backgroundColor: 'red',
  fontSize: props.size,
  color: 'blue'

renderer.renderRule(rule, { size: 12 })
// => { backgroundColor: 'red', fontSize: 12, color: 'blue' }
// => { backgroundColor: 'red', color: 'blue' }

Tips & Tricks

To write more advanced and/or simpler rules there are some helpful tips & tricks you might want to know and use:

  • Optional props
    Many rules define declarations that semantically belong together e.g. alignItems and justifyContent. Still, you might not want to use both every time. Therefore, Fela supports optional props. If a value is not set and thus undefined or a string containing undefined it is simply removed by default.
const rule = props => ({
  justifyContent: props.justify,
  alignItems: props.align

renderer.renderRule(rule, { justifyContent: 'center' })
// => { justifyContent: 'center' }
  • Default declarations
    Sometimes you do not pass all props required to completely resolve all style declarations, but want to use a default value in order to not produce any invalid CSS markup. You can achieve this in two ways. Either with ECMA2015 default function parameters or with the logical OR (||) operator.
// default parameters
const rule = ({ color = 'red' } = {}) => ({
  color: color

// OR operator
const rule = props => ({
  color: props.color || 'red'

rule({ color: 'blue' }) // => { color: 'blue' }
rule({ }) // => { color: 'red' }
  • Conditional values
    Some values might only be applied, if a certain condition is fulfilled. Instead of complex and big if statements you can use the ternary operator.
const rule = ({ type }) => ({
  color: type === 'error' ? 'red' : 'green'

rule({ type: 'error' }) // => { color: 'red' }
rule({ }) // => { color: 'green' }


Adds a change listener to get notified when changes happen.


  1. listener (Function): A callback function that is called on every change. It passes a change object containing information on what actually got rendered or changed. Every change object at least has a unique type and optionally some meta data. In addition it passes the renderer that triggered the change.


(Object): An object containing the corresponding unsubscribe-method.


import { createRenderer } from 'fela'

const renderer = createRenderer(mountNode)

const rule = props => ({
  fontSize: props.fontSize,
  color: 'blue'

const subscription = renderer.subscribe(console.log)
renderer.renderRule(rule, { fontSize: 12, color: 'blue' })
// { type: 'rule', style: { fontSize: 12, color: 'blue' } }

// Unsubscribing removes the event listener


Clears the whole cache.

results matching ""

    No results matching ""