wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

how to set 'native' option to true? #165

Closed PierBover closed 8 years ago

PierBover commented 8 years ago

The docs for using react-templates with react-native specify that:

In order to use React Templates for React Native you should set the native option to true.

Where is this option set?

nippur72 commented 8 years ago

by looking at the source, it's --native.

PierBover commented 8 years ago

Thanks again @nippur72

Can you post a link to the source?

How would I use that option which looks like a shell command option?

PierBover commented 8 years ago

So I figured out this --native argument has to be used with the CLI although when compiling the following template with rt test.rt --native:

<View>
    <ListView dataSource="{this.state.dataSource}">
        <Row>
            <Text>{rowData}</Text>
        </Row>
    </ListView>
</View>

I get:

var testRT = function () {
    return React.createElement(View, {}, React.createElement(ListView, { 'dataSource': this.state.dataSource }, React.createElement(Row, {}, React.createElement(Text, {}, rowData))));
};

instead of what the docs suggest I should get:

'use strict';
var React = require('react-native');
var _ = require('lodash');
function renderRow1(rowData) {
    return React.createElement(React.Text, {}, rowData);
}
module.exports = function () {
    return React.createElement(React.View, {}, React.createElement(React.ListView, {
        'dataSource': this.state.dataSource,
        'renderRow': renderRow1.bind(this)
    }));
};
PierBover commented 8 years ago

My bad, I wasn't using the -r to overwrite the previous file.

Now I get:

var testRT = function () {
    function renderRow1(rowData, sectionID, rowID, highlightRow) {
        return React.createElement(React.Text, {}, rowData);
    }
    return React.createElement(React.View, {}, React.createElement(React.ListView, {
        'dataSource': this.state.dataSource,
        'renderRow': renderRow1.bind(this)
    }));
};

But this still lacks the var React = require('react-native') and the correct exports.

PierBover commented 8 years ago

I will be closing this now since the original question has been solved.

nippur72 commented 8 years ago

You have to provide the --modules commonjs option too, otherwise it will default to none (no modules).

Can you post a link to the source?

see options.js

PierBover commented 8 years ago

Strange. The docs say:

In native mode the default modules option is set to commonjs and the default react-import-path is set to react-native.

Maybe I'm doing something wrong.

When using rt template.rt -r --modules commonjs --native I get:

'use strict';
var React = require('react/addons');
var _ = require('lodash');
module.exports = function () {
    return React.createElement(React.View, {}, React.createElement(React.Text, {}, 'Hola'));
};

Which still misses var React = require('react-native');.

PierBover commented 8 years ago

It seems I got it right with rt template.rt -r --modules commonjs --native --react-import-path react-native.

I will open a new bug about the --native option not doing its thing.