React-native-web: StatusBar is missing

[jasonfma]

What is the current behavior?
Using the StatusBar from react-native throws an error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.

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

class App extends Component {
  render() {
    return (
      <StatusBar hidden />
    );
  }
}

export default App;

What is the expected behaviour?
I think it can just render as null with no side affects.

If this is acceptable I'm happy to submit a PR.

OS: macOS 10.12.4
Browser: Chrome
React Native for Web (version): 0.0.81
React (version): 15.4.2

[RangerMauve]

Pretty sure you can't use null as a component.

[necolas]

Don't render StatusBar if you're on web

[jasonfma]

@RangerMauve Sorry to clarify I was thinking of just the render returning null... which I do believe is valid react.

const StatusBar = () => {
  return null;
};

@necolas I was hoping to more easily share some of the layouts that we have made for iOS and android without having to refactor. Is there a reason why we wouldn't want this implemented as basically a noop?

[RangerMauve]

I actually like the idea of having no-op components. Only if there was a warning message being logged so that people won't get too confused as to why the component isn't rendering

[RangerMauve]

Code that uses a ref to the component would break if it tired to use it, though

[jasonfma]

We could make it a real component to allow for ref usage too.

[necolas]

Is there a reason why we wouldn't want this implemented as basically a noop?

https://facebook.github.io/react-native/docs/statusbar.html - the API has a bunch of static methods on it too.

I think some of these authoring patterns are poor practices in RN (people have to guess/discover why components are actually rendering something for a given platform). Platform-specific components could be wrapped in a Platform check, which also makes it clear what platform its for, or composed with platform-agnostic components in platform-specific files.

[jasonfma]

Ok thanks for the discussion @necolas and @RangerMauve. I'll close the issue.

[necolas]

A stub component is exported in 0.0.85

[jasonfma]

@necolas Thanks!

[piranna]

What about adding a basic implementation? At least background and content color are modificable by using meta tags in Android and iOS... Would you accept a pull-request for that?

[shamilovtim]

+1 to providing a real looking statusbar

[necolas]

On web you need to use a PWA manifest. See https://github.com/necolas/react-native-web/pull/850