ToolBarAndroid not rendering in ReactNative

Question

I'm trying to get a basic Android Toolbar to render on my React native view and I'm having troubles. With my current code, it runs fine (no errors or anything) but the Toolbar isn't there. Any suggestions as to what I'm doing wrong? Thanks in advance!

    'use strict';
    const React = require('react-native');
    const MaterialKit = require('react-native-material-kit');
    const {
      AppRegistry,
      DrawerLayoutAndroid,
      StyleSheet,
      Text,
      View,
      ToolbarAndroid,
    } = React;

    const DRAWER_REF = 'drawer';

    const OpenLightApp = React.createClass({
      render: function() {
        const navigationView = (
          <View style={{flex: 1, backgroundColor: '#88D8EC'}}>
            <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Drawer Item</Text>
          </View>
        );

        return (

          <DrawerLayoutAndroid
            drawerWidth={300}
            ref={DRAWER_REF}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}>
            <View style={styles.container}>
            <ToolbarAndroid
              navIcon={require('image!hamburger')}
              title="OpenLight"
              titleColor="black"
              style={styles.toolbar}
              onIconClicked={() => this.refs[DRAWER_REF].openDrawer()} />
              <Text style={styles.welcome}>
                Example Text
              </Text>
              <Text style={styles.instructions}>
                To get started, edit index.android.js
              </Text>
              <Text style={styles.instructions}>
                Shake or press menu button for dev menu
              </Text>
            </View>
          </DrawerLayoutAndroid>
        );
      }
    });

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
      toolbar: {
        backgroundColor: '#00a2ed',
        height: 56,
      },
    });

    AppRegistry.registerComponent('OpenLightApp', () => OpenLightApp);

Answer 1

You need to assign both height and width to toolbar otherwise it wont render.

Your toolbar code should look like this

          <ToolbarAndroid
            style={styles.toolbar}
            title="Movies"
            navIcon={require("../../ic_launcher.png")}
            onActionSelected={this.onActionSelected}
            titleColor= "000"
            actions = {[
              {title: "Log out", show: "never"}
            ]}
            />

On Action selected

     onActionSelected(position) {
     }

Style for toolbar

 toolbar: {
   backgroundColor: '#2196F3',
   height: 56,
   alignSelf: 'stretch',
   textAlign: 'center',
 }, 

Result

Answer 2

As per this issue, the key seems to be setting a style on the toolbar that has a height. If no height is set, it won't render. Hopefully it gets resolved soon.

Answer 3

Here is the combination of things that worked for me:

1) https://github.com/facebook/react-native/issues/2957#event-417214498

"You should set alignItems to stretch (which is also the default) on your container, or give your toolbar an explicit width. With alignItems set to center and no explicit width, the toolbar is given 0 implicit width. "

2) Setting the height on the toolbar

The code:

I downloaded a ic_arrow_back_black_24dp.png, and placed it in the same folder as the index.android.js file

Then in index.android.js,

class MyComponent extends Component {
...
render() {
    return (

      <View style={styles.containerToolbar}>
       <ToolbarAndroid style={styles.toolbar}
                       title={this.props.title}
                       //navIcon={require('image!ic_arrow_back_white_24dp')}
                       navIcon={require('./ic_arrow_back_black_24dp.png')}
                       onIconClicked={this.props.navigator.pop}
                       //titleColor={'#FFFFFF'}/>
                       titleColor={'#000000'}/>
     </View>

}

const styles = StyleSheet.create({
  containerToolbar: {
    flex: 1,
    //justifyContent: 'center',
    justifyContent: 'flex-start',
    // https://github.com/facebook/react-native/issues/2957#event-417214498
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  toolbar: {
    backgroundColor: '#e9eaed',
    height: 56,
  },

});