rofrischmann/fela

# 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](https://github.com/robinweser/fela/tree/master/packages/react-fela).

```bash
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](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.67qfcbme5) approach which is already described in [Usage with React](guides/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](https://github.com/robinweser/fela/tree/master/packages/fela-native) package.

```javascript
import { createRenderer } from 'fela-native'
```

> **Note**: Other APIs such as [combineRules](api/fela/combineRules) and [enhance](api/bindings/enhance) are still imported from [fela](https://github.com/robinweser/fela/tree/master/packages/fela) directly.<br/>The [fela-native](https://github.com/robinweser/fela/tree/master/packages/fela-native) package **only** ships the [createRenderer](api/fela-native/createRenderer) method.

We can use the [RendererProvider](api/react-fela/RendererProvider) component shipped with [react-fela](https://github.com/robinweser/fela/tree/master/packages/react-fela) to pass the renderer via React's [context](https://reactjs.org/docs/context.html) APIs.

```javascript
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](guides/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.<br />
The following plugins and enhancers will also work with React Native:

- [fela-plugin-custom-property](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-custom-property)
- [fela-plugin-extend](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-extend)
- [fela-plugin-named-keys](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-named-keys)
- [fela-plugin-theme-value](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-theme-value)
- [fela-plugin-rtl](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-rtl)
- [fela-plugin-bidi](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-bidi)
- [fela-plugin-logger](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-logger)
- [fela-perf](https://github.com/robinweser/fela/tree/master/packages/fela-perf)

## Differences

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

- [FelaComponent](api/react-fela/FelaComponent) always requires `children` to always be a function that renders to native components
- [`useFela`](api/react-fela/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

```jsx
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

```jsx
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>
```

---

## Related

- [react-fela](https://github.com/robinweser/fela/tree/master/packages/react-fela)
- [API Reference - `createRenderer`](api/fela-native/createRendere)
- [API Reference - `useFela`](api/react-fela/useFela)
- [API Reference - `FelaComponent`](api/react-fela/FelaComponent)
- [API Reference - `FelaTheme`](api/react-fela/FelaTheme)
- [API Reference - `RendererProvider`](api/react-fela/Provider)
- [API Reference - `ThemeProvider`](api/react-fela/ThemeProvider)

### Renderer

**[fela-native](https://github.com/robinweser/fela/tree/master/packages/fela-native)**<br />
Renderer for React Native