Undefined is not an object (context.uiTheme.ActionButton)

[aktraore]

I'm having an "Undefined is not an object" when trying to import ActionButton from react-native-material-ui in my code. I cloned the demo app and tried to run it and I got the same error, any ideas?

[update]
I tried cloning and using the demo app but It couldn't find the module had the same problem on the demo and resolved the issue on the demo by including react-native-material-ui as a dependency and replacing all the occurences of '../react-native-material-ui" by 'react-native-material-ui", trying to resolve the issues with importing in my own project

[aktraore]

stupid of me :( should have really read the documentation, what an idiot

[xotahal]

We could make some improvements in documentation. Make it "easy to read". Highlight the important things (like this one :))

[KevinHu2014]

@AbdoulayeKarimTraore
So what did you miss?
I have the same problem "Undefined is not an object (context.uiTheme.ActionButton)"
Any ideas?

[aktraore]

@KevinHu2014 all the components expect a uiTheme object to be present in the context, this is obtained by wrapping the component with à themeprovider component as described in the usage section of the readme, or even better wrapping the main component of your app with the themeprovider so that the uiTheme object is available in the context for all the over components, carefully read the readme, its not extremely evident at first glance, if you have further questions feel free to hl me, I'll post code snippets for you

[rsokz]

@aktraore Could you post a code snippet, please?

[luqmansungkar]

Actually I stuck on the same problem and only notice the cause when I read @aktraore explanation. I read the readme but as @aktraore said it is not really clear that I should use wrap the component with ThemeProvider. Maybe highlight or explicitly write about it on the readme @xotahal ?

[aktraore]

@rostyys sorry for the delay, I must have missed the email, here is a snippet in which I wrap the main component of my app with a theme provider that's available to all the components, I'm using react-native-router flux for the routing and redux but that's not the main point, if you have any questions hl me

'use strict';

import React, { Component } from 'react';
import {
    StyleSheet,
    ScrollView
} from 'react-native';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ActionCreators } from './redux/actions';

function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch);
}

import { Scene, Router, Actions } from 'react-native-router-flux';
import { ThemeProvider } from 'react-native-material-ui';
import StartingPage from './starting_page/StartingPage';
import Login from './login/Login';
import ShareComponent from './share/ShareComponent';
import HangoutList from './hangout/HangoutList';
import NewHangout from './hangout/NewHangout';
import Hangout from './hangout/Hangout';
import EventList from './event/EventList';
import EventParameter from './event/EventParameter';
import EventInvitation from './event/EventInvitation';
import NewEvent from './event/NewEvent';
import EventInfo from './event/EventInfo';
import EventLocation from './event/EventLocation';
import PlaceInfo from './place/PlaceInfo';
import EventDateTimePicker from './event/EventDateTimePicker';
import Menu from './menu/Menu';
import { I18n, constants } from './common/I18n';
import PersonList from './person/PersonList';
import ChoiceList from './place/ChoiceList';
import EventMembers from './event/EventMembers';
import SearchFriends from './friends/SearchFriends';
import Friends from './friends/Friends';

const scenes = Actions.create(
    <Scene key="root">
        <Scene key='startingPage' component={StartingPage} initial={true} animation={'fade'} hideNavBar={true} />
        <Scene key='login' component={Login} animation={'fade'} hideNavBar={true} />
        <Scene key='menu' component={Menu} animation={'fade'} hideNavBar={true}/>
        <Scene key='hangoutList' component={HangoutList}  animation={'fade'} hideNavBar={true} />
        <Scene key='hangout' component={Hangout} animation={'fade'}  hideNavBar={true} />
        <Scene key='newHangout' component={NewHangout} title={I18n.t(constants.NEW_HANGOUT)} animation={'fade'} hideNavBar={false} />
        <Scene key='eventList' component={EventList}  animation={'fade'} hideNavBar={false} />
        <Scene key='newEvent' component={NewEvent} title={I18n.t(constants.NEW_EVENT)} animation={'fade'} hideNavBar={false} />
        <Scene key='eventDateTimePicker' component={EventDateTimePicker} animation={'fade'} hideNavBar={false} />
        <Scene key='shareComponent' animation={'fade'} component={ShareComponent} />
        <Scene key='eventParameter' component={EventParameter} animation={'fade'} hideNavBar={false} />
        <Scene key='eventInvitation' component={EventInvitation} animation={'fade'}  hideNavBar={false} />
        <Scene key='eventInfo' component={EventInfo} animation={'fade'} hideNavBar={true} />
        <Scene key='eventLocation' component={EventLocation} animation={'fade'} hideNavBar={true} />
        <Scene key='eventMembers' component={EventMembers} animation={'fade'} hideNavBar={false} />
        <Scene key='placeInfo' component={PlaceInfo} animation={'fade'} hideNavBar={true} />
        <Scene key="personList" component={PersonList} animation={'fade'} hideNavBar={false}/>
        <Scene key="choiceList" component={ChoiceList} animation={'fade'} hideNavBar={false}/>
        <Scene key="searchFriends" component={SearchFriends} animation={'fade'}  hideNavBar={true}/>
        <Scene key="friends" component={Friends} animation={'fade'} hideNavBar={false} />
    </Scene>
);

class OutwegoApp extends Component {

    render() {
        return (
            <ThemeProvider uiTheme={uiTheme}>
                <Router
                    backAndroidHandler={() => false}
                    navigationBarStyle={styles.routerNavBar}
                    titleStyle={styles.routerNavBarTitle}
                    barButtonIconStyle={styles.routerBackButton}
                    scenes={scenes}
                />
            </ThemeProvider>
        )
    }
}

const uiTheme = {
    palette: {
        primaryColor: '#f38d11',
    },
    drawerSectionActiveItem: {
        container: {
            backgroundColor: 'transparent',
        }
    },
}

const styles = StyleSheet.create({
    routerNavBar: {
        backgroundColor: 'transparent',
        borderBottomColor: 'transparent'
    },
    routerNavBarTitle: {
        color: '#f38d11'
    },
    routerBackButton: {
        tintColor: '#f38d11'
    }

});

export default connect(() => { return {} }, mapDispatchToProps)(OutwegoApp);