Open geminiyellow opened 6 years ago
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);
}
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.
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
This is a repo that reproduces the issue https://github.com/arsamigullin/native-base-issue
it working, but tons of warnings in console, looks like that: