Babel plugin for extracting react native inline styles to StyleSheet.create

Description | Install | Usage | How it works ?

Description

This babel plugin will extract any inline styles to the StyleSheet.create object in a react native application.

Why it's important to have styles inside StyleSheet.create ?

The React Native StyleSheet creates immutable stylesheet references. The style objects passed into the create() method are freezed and an ID is assigned to each one of them. This will avoid creating a new style objecct every render pass. It also allows to send the style only once through the bridge.

Install

npm:

npm install --save-dev babel-plugin-rn-extract-style

yarn:

yarn add babel-plugin-rn-extract-style --dev

Usage

babel.config.js

module.exports = {
  plugins: [
    'rn-extract-style'
  ]
}

Include node_modules

By default files from the node_module are ignored if, you wish to include those you have to specify the includeNodeModules: true option:

babel.config.js

module.exports = {
  plugins: [
    [
      './plugin.js',
      {
        includeNodeModules: true,
      },
    ],
  ]
}

How it works

The plugin parses the contents of each JSX Element and extract the inline styles, generates an uniquie uid for it and appends it to the StyleSheet.create object found in the file. In case of a missing StyleSheet.create instance it generates a new one.

in:

const Component = () => (
  <View
    style={{
      height: 500,
      width: '100%',
      backgroundColor: '#6c5b7b',
    }}>
    <View style={{ height: 200 }}>
      <Text style={{ fontSize: 12 }}>Lorem ipsum</Text>
    </View>
  </View>
)

out:

const Component = () => (
  <View
    style={babelGeneratedStyles.View_style}>
    <View style={babelGeneratedStyles.View_style1}>
      <Text style={babelGeneratedStyles.Text_style2}>Lorem ipsum</Text>
    </View>
  </View>
)

const babelGeneratedStyles = StyleSheet.create({
  View_style: {
    height: 500,
    width: '100%',
    backgroundColor: '#6c5b7b',
  },
  View_style1: {
    height: 200,
  },
  Text_style1: {
    fontSize: 12,
  },
})