Tons of warnings in console when running `web-support` branch

[geminiyellow]

it working, but tons of warnings in console, looks like that:

Warning: Received `true` for a non-boolean attribute `uppercase`.
Warning: Received `true` for a non-boolean attribute `square`.
Warning: Received `true` for a non-boolean attribute `button`.
...

[alexkrautmann]

I actually have this problem in a project I am trying to integrate NativeBase into. The app renders properly in native, but it is completely broken for me in web and I get the same warnings you mention.

ios

Web

I have discovered the warnings are caused by NativeBase spreading props when react-native-web creates a <div>.

For example, the following can be seen using react devtools:

 <ListItem button noBorder onPress={() => navigation.navigate(route.route)}>

Turns into:

    <div
        button=={true}
        noBorder={true}
        onKeyDown={"[function bound touchableHandleKeyEvent]"}
        onKeyUp={"[function bound touchableHandleKeyEvent]"}
        onResponderGrant={"[function bound touchableHandleResponderGrant]"}
        onResponderMove={"[function bound touchableHandleResponderMove]"}
        onResponderRelease={"[function ]"}
        onResponderTerminate={"[function bound touchableHandleResponderTerminate]"}
        onResponderTerminationRequest={"[function bound touchableHandleResponderTerminationRequest]"}
        onStartShouldSetResponder={"[function bound touchableHandleStartShouldSetResponder]"}
        data-focusable={true}
        tabIndex={"0"}
        // className={OMITTED} 
    >
        ...
    </div>

Which results in the same type of warnings you posted:

Warning: Received `true` for a non-boolean attribute `button`.
If you want to write it to the DOM, pass a string instead: button="true" or button={value.toString()}.
    in div
    in View
    in TouchableHighlight (at ListItem.js:31)
    in ListItem (at connectStyle.js:384)
    in Styled(ListItem) (at SideBar.tsx:23)
    ...
Warning: React does not recognize the `noBorder` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `noborder` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div
    in View
    in TouchableHighlight (at ListItem.js:31)
    in ListItem (at connectStyle.js:384)
    in Styled(ListItem) (at SideBar.tsx:23)
    ...

I just figured this out after trying this in my downtime the last few days. I will take a closer look soon and see if I can find out more.

I have noticed following the stacktrace:

// native-base/src/basic/View.js
import { View, ViewPropTypes } from "react-native";
...

class ViewNB extends Component {
  render() {
    return <View ref={c => (this._root = c)} {...this.props} />;
  }
}

// react-native-web/src/exports/View/index.js
import { View, ViewPropTypes } from "react-native";
...

class View extends Component<ViewProps> {
  ...
  render() {
    const {
      ...
      ...otherProps
    } = this.props;
    ...
    return createElement('div', otherProps);
  }

[ross-rosario]

I'm having the same issue as well. Although things seem to work as expected, I see one warning in chrome console, per displayed NativeBase component.

[SupriyaKalghatgi]

#121

[ghost]

Similar (seems) issue encountered with other elements, here a Text.

This is more than a warning, the element is not displayed.

arning: Received `true` for a non-boolean attribute `uppercase`.

If you want to write it to the DOM, pass a string instead: uppercase="true" or uppercase={value.toString()}.
    in div (created by Text)
    in Text (at Text.js:30)
    in Text (at connectStyle.js:384)
    in Styled(Text) (at App.tsx:34)
    in div (created by View)
    in View (created by TouchableOpacity)
    in TouchableOpacity (at Button.js:67)
    in Button (at connectStyle.js:384)
    in Styled(Button) (at App.tsx:30)
    in div (created by View)
    in View (created by ScrollView)
    in div (created by View)
    in View (created by ScrollViewBase)
    in ScrollViewBase (created by ScrollView)
    in ScrollView (at KeyboardAwareHOC.js:508)
    in KeyboardAwareScrollView (at Content.js:125)
    in Content (at connectStyle.js:384)
    in Styled(Content) (at App.tsx:28)
    in div (created by View)
    in View (at Container.js:15)
    in Container (at connectStyle.js:384)
    in Styled(Container) (at App.tsx:27)
    in div (created by View)
    in View (at App.tsx:26)
    in div (created by View)
    in View (at Root.js:13)
    in Root (at connectStyle.js:384)
    in Styled(Root) (at App.tsx:25)
    in Provider (at App.tsx:24)
    in App
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

[arsamigullin]

This is a repo that reproduces the issue https://github.com/arsamigullin/native-base-issue