react-native: ToolbarAndroid not rendering

Trying what I’d thought would be a simple view, a toolbar in a DrawerLayout. Eventually plan to add styling and actions but I can’t even get this to render:

import React, {
  AppRegistry,
  Component,
  DrawerLayoutAndroid,
  StyleSheet,
  Text,
  ToolbarAndroid,
  View
} from 'react-native';

class Perceptron extends Component {

  renderNavigationView() {
    return <View>
      <Text>Home</Text>
    </View>
  }

  onActionSelected(position) {
  }

  render() {
    return <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition={DrawerLayoutAndroid.positions.Left}
      renderNavigationView={this.renderNavigationView}
      >
      <ToolbarAndroid
        title="Perceptron"
        navIcon={require("./icons/empty.png")}
        onActionSelected={this.onActionSelected}
        actions = {[
          {title: "Log out", show: "never"}
        ]}
        />
      <Text>Hello, world from the toolbar!</Text>
    </DrawerLayoutAndroid>
  }

}

AppRegistry.registerComponent("Perceptron", () => Perceptron)

What am I missing? The only item that renders is the “Hello, world from the toolbar!” text.

Thanks.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 26 (10 by maintainers)

Commits related to this issue

Include a style in the example - The toolbar does not render unless height and width are set. It may not be a priority to fix, but we should at least update the docs so the example works. see: https... — committed to TiraO/react-native by deleted user 7 years ago

Most upvoted comments

Try adding a height to the toolbar?

+16

Ehesp on Jan 14, 2016

@ndarilek this components works fine for most people, so it is likely not a bug in this particular case. If setting a height fixes it for you, then you are welcome to submit a PR either amending the docs, or fixing the component with a default height. In the meantime, there are over 500 open issues right now on react-native, and priorities must be set.

damusnet on May 6, 2016

@facebook-github-bot stack-overflow

damusnet on May 6, 2016

You need to assign both width and height to the toolbar or else it won’t render and all you were gone see is white blank space. Try to assign manually some width or let it stretch full width using this style



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

hiteshsahu on Apr 24, 2017

What? How does closing this make sense? You’ve got a bunch of components that work fine, except for this one that requires a height be set and fails silently otherwise. Then you have someone for whom that doesn’t even work, and the response is basically having a bot tell them to go away and closing the issue? Color me confused, but a bug is a bug is a bug, and telling someone to go ask about it on Stack Overflow isn’t going to fix it.

For the record, someone did ask that question there and didn’t get an answer when I looked last, if I recall correctly, so that’s not even a solution.

I understand being busy, and that maybe folks can’t look at this now. But unless I understand why this isn’t a bug, I think it should be reopened. And if your proposed Stack Overflow situation is the way to go, then maybe an answer here that works for everyone is the solution:

http://stackoverflow.com/questions/34124400/toolbarandroid-not-rendering-in-reactnative

ndarilek on May 6, 2016

Hey @ndarilek and thanks for posting this! @damusnet tells me this issue looks like a question that would be best asked on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only. Will close this as this is really a question that should be asked on SO.

ghost on May 6, 2016