CODEWITHSUNDEEP
reactjsecmascript-6onsen-ui
Joshua Rajandiran
Joshua Rajandiran

Reputation: 2928

No UI from Onsen UI?

I have this simple React JS + Redux app. Decided to create a version of it using Onsen UI, I'm receiving no errors and there's output but the Onsen UI isn't rendered at all.

Here is the pic:

enter image description here

Here is my render function :

render() {
        return (
            <Ons.Page renderToolbar={this.renderToolbar}>

                                <Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (                                      
                                    <Ons.ListItem tappable key={index} modifier='longdivider' >
                                        <div className={'list' + listingData.location_id}>{listingData.location_id}</div>
                                        <div>{listingData.location}</div>
                                        <div>{listingData.description}</div>
                                    </Ons.ListItem>)} />
                                    <div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div>
            </Ons.Page>
        );
    }

Here is my renderToolbar function:

renderToolbar() {
        return (
            <Ons.Toolbar>
                <div className='center'>My app</div>
                <div className='right'>
                    <Ons.ToolbarButton /*onClick={}*/>
                    <Ons.Icon icon='md-more-vert' />
                    </Ons.ToolbarButton>
                </div>
            </Ons.Toolbar>
        );
    }

I've checked the modules are all imported, I also bind the functions in my constructor so it should work but why do I not have any UI?

PS: I'm using Onsen v2.0 & React-Onsenui 0.6.2

Anything I missed? Or is there something wrong in my code?

Upvotes: 0

Views: 527

Answers (1)

Ilia Yatchev
Ilia Yatchev

Reputation: 1262

Unlike React native's way of styling its components Onsen UI has normal CSS files, which need to be included in order for it to work properly.

You can add them via link tags to the dom or if you're using webpack you can just require them.

The files should be something like

onsenui/dist/css/onsenui.css
onsenui/dist/css/onsen-css-components.css

You said you're not getting any errors in the console, so a lack of styles seems like the most likely cause.

Also if you're interested you can checkout the repo of a demo kitchensink app here.

And finally this may be a little off-topic, but you could try monaca cli as with it you can easily start from a working boilerplate.

Upvotes: 2

Related Questions