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(new tab).

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(new tab) 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(new tab) package.

import { createRenderer } from 'fela-native'

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

We can use the RendererProvider component shipped with react-fela(new tab) to pass the renderer via React's context(new tab) 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(new tab)

fela-plugin-extend(new tab)

fela-plugin-named-keys(new tab)

fela-plugin-theme-value(new tab)

fela-plugin-rtl(new tab)

fela-plugin-bidi(new tab)

fela-plugin-logger(new tab)

fela-perf(new tab)

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>

react-fela(new tab)

API Reference -
```
createRenderer
```

API Reference -
```
useFela
```

API Reference -
```
FelaComponent
```

API Reference -
```
FelaTheme
```

API Reference -
```
RendererProvider
```

API Reference -
```
ThemeProvider
```

Renderer

fela-native(new tab)
Renderer for React Native