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.

yarn add fela-native react-fela

Using Fela with React Native basically works the same as using with React itself. We 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 RendererProvider component shipped with react-fela to pass the renderer via React's context APIs.

import React from 'react'
import { AppRegistry } from 'react-native'
import { createRenderer } from 'fela-native'
import { RendererProvider } from 'react-fela'
import MyApp from './MyApp'
const renderer = createRenderer()
const App = (props) => (
  <RendererProvider renderer={renderer}>
    <App />
  </RendererProvider>
)
AppRegistry.registerComponent('FelaNative', () => App)

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:

fela-plugin-custom-property

fela-plugin-extend

fela-plugin-named-keys

fela-plugin-theme-value

fela-plugin-rtl

fela-plugin-bidi

fela-plugin-logger

fela-perf

Differences

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

FelaComponent always requires
```
children
```
to always be a function that renders to native components

```
useFela
```
returns a
```
style
```
function rather than a
```
css
```
function

Only supported style properties are possible (Remember: It's not CSS)

Styles are applied using
```
style
```
not
```
className
```

Length values do not have units

Example

useFela

import { View, Text } from 'react-native'
import { useFela } from 'react-fela'
function Header() {
  const { style } = useFela()
  return (
    <View
      style={style({
        alignItems: 'center',
        padding: 20,
      })}>
      <Text>Welcome!</Text>
    </View>
  )
}

FelaComponent

import { View, Text } from 'react-native'
const style = {
  alignItems: 'center',
  padding: 20
}
<FelaComponent style={style}>
  {({ style, theme }) => (
    <View style={style}>
      <Text>Welcome!</Text>
    </View>
  )}
</FelaComponent>