ToolBarAndroid not showing in ReactNative

Question

I am trying to get the basic Android toolbar for rendering in my own React view and I am having problems. It works fine with my current code (no errors or anything else), but there is no toolbar there. Any suggestions on what I'm doing wrong? Thank you 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

For this question , it seems that the key is customizing the style of the toolbar with height. If the height is not set, it will not be displayed. I hope it is resolved soon.

Answer 2

Here is a combination of what worked for me:

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

"You must set alignItems to stretch (which is also the default) in your container or give your toolbar an explicit width. Using alignItems set to center and without explicit width, the toolbar is set to 0 implicit width."

2) Setting the height on the toolbar

Code:

I downloaded ic_arrow_back_black_24dp.png and put 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, }, }); 

Answer 3

You need to assign the height and width of the toolbar, otherwise it will not be displayed.

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"} ]} /> 

In the selected action

  onActionSelected(position) { } 

Toolbar Style

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

Result