Skip to content

UsageWithReactNative.md

Latest commit

 

History

History
101 lines (75 loc) · 4.43 KB

UsageWithReactNative.md

File metadata and controls

101 lines (75 loc) · 4.43 KB

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.

# yarn
yarn add fela-native react-fela

# npm
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 />
  </Provider>
)

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:

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(see example below)
  • Length values do not have units
  • Only supported style properties are possible (Remember: It's not CSS)
  • Styles are applied using style not className

Using FelaComponent

const style = {
  alignItems: 'center',
  padding: 20
}

<FelaComponent style={style}>
  {({ style, theme }) => (
    <View style={style}>
      <Text>Welcome!</Text>
    </View>
  )}
</FelaComponent>

Related

Renderer

fela-native
Renderer for React Native
⚡