babel-plugin-react-native-layout

Dynamic layout for react native components

Installation

npm i --save babel-plugin-react-native-layout

Usage

Create file .babelrc in an apentle project folder

{
  "presets": [ "react-native" ],
  "plugins": [ "react-native-layout" ]
}

Layout transform

FROM

'use strict';

import React, { Text, View } from 'react-native';
import { styles } from 'react-native-theme';
const ListItem = require('./listItem');

function moreView() {
  return (
    <Text style={styles.more}>
      More...
    </Text>
  );
}

<layout>
  <addChildren type={View} ref="content" name="container">
    <props style={styles.container} name="new" />
    {moreView()}
    {
      this.props.results.map(function(result) {
        return <ListItem data={result} />
      })
    }
  </addChildren>
</layout>

TO

'use strict';

import React, { Text, View } from 'react-native';
import { styles } from 'react-native-theme';
const ListItem = require('./listItem');

function moreView() {
  return React.createElement(
    Text,
    { style: styles.more },
    'More...'
  );
}

module.exports = function (o) {
  if (o.type === View && o.config && o.config['ref'] === 'content' && o.config['name'] === 'container') {
    o.config = o.config || {};
    o.config['style'] = styles.container;
    o.config['name'] = 'new';
    o.children.push(moreView());
    o.children.push(this.props.results.map(function (result) {
      return React.createElement(ListItem, { data: result });
    }));
  }
};