React-native: ToolbarAndroid not rendering

[ndarilek]

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.

[facebook-github-bot]

Hey ndarilek, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[ndarilek]

Happening on React Native 0.18.0rc.

[Ehesp]

Try adding a height to the toolbar?

[ndarilek]

That did it. Thanks! Any reason this doesn't just get a default height?

[Ehesp]

Haven't a clue to be honest, I found it pretty strange first time. I guess there should be, @christopherdro worth a PR?

[Pungsnigel]

I'm getting the same error, even when I do specify the height of the toolbar. Any ideas? Running react-native 0.21.0

[damusnet]

@facebook-github-bot stack-overflow

[ghost]

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.

[ndarilek]

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

[damusnet]

@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.

[ndarilek]

I've already stated that I understand the need to set priorities, but
"low" is a priority. Here you have someone for whom the existing
solution didn't work. This person may or may not have gone to SO, seen
the other question which has no accepted answers (the only answer being
mine, in fact, which points to this issue) and now what recourse do they
have?

If the answer is for them to ask on SO, then maybe the solution should
be posted there as well. If the solution isn't posted there, then maybe
it is because there _isn't_ one. And if there _isn't_ one, then perhaps
this issue should be left open with a low priority so that, when someone
gets around to low-priority issues, they can address it. It's hard to
believe in a product when the response to something with no known
solution is "go away, we're too busy and never want to deal with this
again," not "thanks for taking the time to discover this thing that
doesn't work, we'll get to it eventually."

If I seem cranky, it's because I just took the time to file another
issue on another project, had it closed and was told to go get support
from the community, only to have it reopened a few hours later because
it was legit and needed to be looked into. If I take the time to
research a problem and register that it exists, the least the curators
of that code could do would seem to be leaving it open until a) someone
posts a definitive solution that works or b) someone gets around to
looking at it years from now and figuring out what's wrong. Here there
would seem to be no solution.

[sirnacnud]

One can easily reproduce this issue by leaving off the height. The example provided in the doc specifies a height of 56. If users are supposed to specify a height, then there is no bug, otherwise, this is an issue and it should be at least reopened.

[jhohlfeld]

Sorry but I have to chime in to this issue. There is indeed no height set in the example. I bumped into this by following the getting started guide. Once I bumped the version up to [email protected] this issue was solved.

[damusnet]

@jhohlfeld are you saying there should be a height in the example, or that 0.27 does not need an height anymore? Or both?

[jhohlfeld]

@damusnet The height seems not to be necessary anymore in 0.27. Somehow I was getting 0.26 when doing the Getting Started, while the docs was 0.27 already. This had lead to some confusion but it's settled now.

[damusnet]

@jhohlfeld ok, thanks. Then this issue is definitely closed now I guess :)

[fkrauthan]

I just started a new project with 0.27.2 and I can only get the ToolbarAndroid working with specifying a height. Or are there other things I need to setup to get the toolbar working?

[Ehesp]

That's what you're supposed to do I believe as the above comments suggest.
On 21 Jun 2016 7:15 a.m., "Florian Krauthan" [email protected]
wrote:

I just started a new project with 0.27.2 and I can only get the
ToolbarAndroid working with specifying a height. Or are there other things
I need to setup to get the toolbar working?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/5293#issuecomment-227349777,
or mute the thread
https://github.com/notifications/unsubscribe/AAzZXggWlJ-psmZbzePiq1dXs9hs1Wmxks5qN4F-gaJpZM4HEZT_
.

[fkrauthan]

The height seems not to be necessary anymore in 0.27

I thought this issue was closed because it is not longer needed?

[paldepind]

I'm using 0.28 and also need to specify a height in order to get ToolbarAndroid to show up. Furthermore the first example in the documentation does not specify a height. Seems like an issue to me.

[frankandrobot]

Using latest as of 8/24 and also need a height.

[stevenjob]

Using 0.32 and also need a height. Can we reopen?

[achembarpu]

Same here. Without height, it doesn't render. The docs are misleading, and the fact that this inbuilt component doesn't enforce height with a required propType is just confusing.

version: 0.32

[nguyendv]

Using 0.39 and also need a height. How can I make an edit to this page? https://facebook.github.io/react-native/docs/toolbarandroid.html

[damusnet]

Hi @nguyendv and thanks for offering to help. If you look at the bottom of the page, before the examples, you'll see a link to You can edit the content above on GitHub and send us a pull request! that points to Github. There you can edit the code and create a pull request. Please tell me if you need any more directions.

[hiteshsahu]

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',
 },