Nativebase: Invalid props.style key `NativeBase`

[dakiesse]

node, npm, react-native, react and native-base version

"native-base": "^2.7.2",
"react": "16.4.2",
"react-native": "0.56.0",

Actual behaviour

When I am trying to use "Content" component I'm getting a error:

Code

  render () {
    return (
      <Content/>
    )
  }

Info

Is the bug present in both iOS and Android or in any one of them?

I've checked only on Android.

[SupriyaKalghatgi]

@dakiesse I couldn't reproduce this
can you create test repo for this

[dakiesse]

I couldn't reproduce it via initialed project too. But, my project has the problem after updating RN and others packages. I'll try to move my project in new initialed project. If I found out something I'll let you know.

[mpcarr]

I'm also getting this error in iOS and Android. Not had chance to investigate it yet.

Warning: Failed prop type: Invalid props.style key NativeBase supplied to ScrollView.
Bad object: {
"NativeBase": {
"Segment": {
"height": 45,
"borderColor": "#a7a6ab",
"flexDirection": "row",
"justifyContent": "center",
"backgroundColor": "#F8F8F8",
"NativeBase.Button": {
"alignSelf": "center",
"borderRadius": 0,
"paddingTop": 3,
"paddingBottom": 3,
"height": 30,
"backgroundColor": "transparent",
"borderLeftWidth": 0,
"borderRightWidth": 1,
"borderTopWidth": 1,
"borderBottomWidth": 1,
"borderColor": "#007aff",
"elevation": 0,
".active": {
"backgroundColor": "#007aff",
"NativeBase.Text": {
"color": "#fff"
},
"NativeBase.Icon": {
"color": "#fff"
}
},
".first": {
"borderTopLeftRadius": 5,
"borderBottomLeftRadius": 5,
"borderLeftWidth": 1
},
".last": {
"borderTopRightRadius": 5,
"borderBottomRightRadius": 5
},
"NativeBase.Text": {
"color": "#007aff",
"fontSize": 14
},
"NativeBase.Icon": {
"fontSize": 22,
"paddingTop": 0,
"color": "#007aff"
}
}
}
},
"flex": 1,
"backgroundColor": "transparent"
}
Valid keys: [
"display",
"width",
"height",
"start",
"end",
"top",
"left",
"right",
"bottom",
"minWidth",
"maxWidth",
"minHeight",
"maxHeight",
"margin",
"marginVertical",
"marginHorizontal",
"marginTop",
"marginBottom",
"marginLeft",
"marginRight",
"marginStart",
"marginEnd",
"padding",
"paddingVertical",
"paddingHorizontal",
"paddingTop",
"paddingBottom",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingEnd",
"borderWidth",
"borderTopWidth",
"borderStartWidth",
"borderEndWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"position",
"flexDirection",
"flexWrap",
"justifyContent",
"alignItems",
"alignSelf",
"alignContent",
"overflow",
"flex",
"flexGrow",
"flexShrink",
"flexBasis",
"aspectRatio",
"zIndex",
"direction",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"transform",
"transformMatrix",
"decomposedMatrix",
"scaleX",
"scaleY",
"rotation",
"translateX",
"translateY",
"backfaceVisibility",
"backgroundColor",
"borderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
"borderStartColor",
"borderEndColor",
"borderRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"borderTopEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderBottomEndRadius",
"borderStyle",
"opacity",
"elevation"
]
in ScrollView (at KeyboardAwareHOC.js:397)
in _class (at Content.js:125)
in Content (at connectStyle.js:384)
in Styled(Content) (at auth-loading.pres.js:24)
in RCTView (at View.js:43)
in Container (at connectStyle.js:384)
in Styled(Container) (at auth-loading.pres.js:22)
in AuthLoadingComponent (created by Connect(AuthLoadingComponent))
in Connect(AuthLoadingComponent) (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:59)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at App.js:31)
in StyleProvider (at App.js:30)
in Provider (at App.js:29)
in App (at renderApplication.js:32)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in AppContainer (at renderApplication.js:31)

[akhil-geekyants]

@mpcarr can you try ChillkroeteTTS's comment https://github.com/GeekyAnts/NativeBase/issues/2157#issuecomment-413144027

[SupriyaKalghatgi]

Closing this tomorrow in case of no response

[stepri]

Didn't work for me

[mpcarr]

I removed node modules, changed to v2.7.1 in package.json, installed and warnings went away. Then upgraded back to 2.7.2. Currently no invalid prop warnings.

[nahidmbstu]

no solution worked for me ....

[DrEhsan]

same issue here, changed to v2.7.1 and still have this issue!

[rianonehub]

this issue also happened to me on v2.7.0 when using react-navigation

[joakimwennergren]

I'm having the same issue, tried to downgrade to v2.7.1 but warning won't go away.
Im working on IOS.

[cmcaboy]

I am also receiving this error. On version 2.7.2

[SupriyaKalghatgi]

I cannot reproduce this issue. So whoever facing this issue, could put it on snack or github, I can then look into this

Also try try installing node_modules again by clearing lock files, cache etc

[wwarodom]

I also got this error on v2.7.2 and v2.7.1 even I tried to remove node_modules and did npm install again on v.2.7.1 already.

[DrEhsan]

this error appears on win cli thanks to react-native 0.56 :|

[dpwilhelmsen]

@SupriyaKalghatgi - I was playing with an example react-native app and saw this warning. Here's a link to my fork where I see the issue: https://github.com/dpwilhelmsen/react-native-shop-ui. I haven't had the opportunity to narrow it down yet but hopefully it'll let you reproduce the issue.

[SupriyaKalghatgi]

ok

[mognia]

still having this issue

[Aryk]

Not sure if I'm getting the same issue, but basically I have

      <Text style={editMode && {opacity: 1}}>dfdfd</Text>

This gives me that same error I think it's due to the "opacity" on the Text.

However, if I switch to react native Text, no error....