Intro

What & Why

Setup

Installation

Getting Started

Language

Targets

JavaScript

Reason

Plugins

Advanced

API Reference

Extra

JavaScript: React Native

yarn add --dev @elodin/generator-javascript-react-native

This generator is used with JavaScript and React Native.
It renders all styles to StyleSheet instances.

Usage

To use the React Native generator, simply add it to your Elodin configuration and you're ready to go.

elodin.config.js

var { createGenerator } = require('@elodin/generator-javascript-react-native') 
 
module.exports = { 
  generator: createGenerator(), 
}

Configuration

Option	Type	Default	Description
importFrom	String	react-native	Package from which package the `StyleSheet` API is imported. Useful when building with other React Native adopted renderers such as react-pdf or react-native-web.
devMode	Boolean	false	In devMode, style names contain human-readable prefixes that help to indentify the referenced style.
generateFileName	Function	module => module + ".elo"	A function that represents the JavaScript filename convention. It takes the module name. The `.js` extension is applied automatically.
generateVariantName	Function	name => uncapitalize(name)	A function that generates variant names in our JavaScript files. It represents the property key which we need to pass in order to apply variants.
generateVariantValue	Function	value => uncapitalize(value)	A function that generates variant values in our JavaScript files. It represents the variant value which we need to pass in order to apply variants.

Example

elodin.config.js

var { createGenerator } = require('@elodin/generator-javascript-react-native') 
 
module.exports = { 
  generator: createGenerator({ 
    importFrom: '@react-pdf/renderer', 
    // makes variant values uppercase e.g. variant: "PRIMARY" 
    generateVariantValue: (value) => value.toUpperCase(), 
  }), 
}

Feature Coverage

Styles

Primitives

Variables

Functions

Coming soon

Variants

Conditionals

Usage Example

button.elo

variant Variant {
  Primary
  Secondary
}
 
style Button {
  paddingLeft: 10
  paddingRight: 10
  minWidth: $minWidth
  [Variant=Primary] {
    backgroundColor: blue
  }
  [Variant=Secondary] {
    backgroundColor: red
  }
}

Button.js

import React from 'react' 
import { View } from 'react-native' 
 
import { Button as ButtonStyle } from './button.elo.js' 
 
// just to showcase the API - do not create Buttons from Views! 
function Button({ children, minWidth = 100, variant = 'primary' }) { 
  return <View style={ButtonStyle({ minWidth, variant })}>{children}</View> 
}