Usage with React Native

Fela is designed to be very modular and abstract. The renderer is the only platform specific component. With version 2.0.0 a new native renderer has been added which adds support for React Native. It can be used together with the existing official React bindings for Fela.

npm i --save fela-native react-fela

Using Fela with React Native basically works the same as using with React itself. Therefore I really recommend using the presentational and container components approach which is already described in Usage with React section.

Native Renderer

As mentioned above, the only difference to Fela for Web is the renderer itself. It is directly imported from the fela-native package.

import { createRenderer } from 'fela-native'

Note: Other APIs such as combineRules and enhance are still imported from fela directly. The fela-native package only ships the createRenderer method.

We can use the <Provider> Component shipped with react-fela to pass the renderer via context.

import React from 'react'
import { AppRegistry } from 'react-native'
import { createRenderer } from 'fela-native'
import { Provider } from 'react-fela'
import App from './App'

const renderer = createRenderer()

const wrappedApp = props => (
  <Provider renderer={renderer}>
    <App />

AppRegistry.registerComponent('FelaNative', () => wrappedApp)

Advanced Usage

After passing the native renderer, we can use Fela and the React bindings just as shown within the Usage with React section.

Plugins & Enhancers

The native renderer also supports plugins, though most plugins do not work with React Native and/or are not necessary for native development as they are web specific e.g. vendor prefixing.
The following plugins and enhancers will also work with React Native:


Below there are some key differences comparing Fela for React and Fela for React Native.

  • Use style not className
  • createComponent always requires the second parameter, and the second parameter should be the type and not the string (see example below)
  • Length values do not have units
  • Only supported style properties are possible (It's not CSS!)

createComponent Example

Create the Component using the Type

const WelcomeText = createComponent(rule, View)

You can now use the component as a component or a wrapper

 render() {
    return (
      <Provider renderer={renderer}>
          <WelcomeText><Text>Welcome to this awesome app</Text></WelcomeText>


Renderer for React Native

results matching ""

    No results matching ""