Nativebase: Warning: Failed propType: Invalid props.style key 'color' supplied to [ 'View' | 'RCTView' ]

[geirman]

Original issue submitted here...
https://github.com/start-react/native-starter-kit/issues/10

I'm using native-starter-kit, which uses native-base. In both iOS and Android simulators, I'm receiving these warnings after clicking "Login"

iOS

Android

I believe the error is occurring in /native-base/Components/Widgets/Button.js, but I haven't been able to locate it yet.

[sankhadeeproy007]

Hi can you do a fresh install and see if it's still the case?

[geirman]

Did the warnings go away for you? Or are you not able to duplicate the warnings yourself? They are still there for me.

I like to document exactly what I did to test this so we're on the same page. Maybe I'm doing something wrong.

1. I opened my native-starter-kit package.json and deleted this line...
   
   "native-base": "https://github.com/GeekyAnts/NativeBase.git",
2. I ran npm install native-base --save
3. This installed native-base and added this line to my package.json...
   
   "native-base": "^0.4.7",
4. I ran react-native run-ios and verified the warnings persisted
5. I ran rm -rf node_modules then npm install
6. I repeated step 4 with the same results, warnings persist.

[sankhadeeproy007]

I just did a clean install of native-base on my project and I am not getting any warnings. The warning says color property has been used with a View component. And I just grep-ed the entire project, that is clearly not the issue. The problem is probably with the starter kit, some view component might have been given the property color. Since you're getting the warnings only after logging in. I'd advise you to go through the stylesheet of the home page. I'm sure you'll find your fix there.
Let me know if it helped, so I can close it.

[geirman]

I'm confused. I originally opened this issue on the native-starter-kit repo https://github.com/start-react/native-starter-kit/issues/10. you replied to tell me it was native-base related and asked me to open the issue here instead, so I did. Now you're telling me it's starter kit related again?

Maybe if you installed starter kit and tested you'd be able to duplicate the issue?

[sankhadeeproy007]

native-starter-kit/js/components/home/styles.js Delete line number 14.

[sankhadeeproy007]

It was you who suggested that the error is in native-base button.js. And if you'd followed the instructions, (stylesheet of home page), you could have fixed the issue yourself. But thanks anyways for bringing it to our attention.

[geirman]

was just trying to be helpful. thanks for your attention

[geirman]

BTW @sankhadeeproy007 the reason I thought it had something to do with the button is because if you compare the full warning to the Button.js component, you'll notice that their structures are the same. That was the only place I found this similarity.

 getInitialStyle() {
        return {
            button: {
                padding: 15,
                justifyContent: 'space-around',
                flexDirection: 'row',
                alignSelf: 'center',
                alignItems: 'center',
                backgroundColor: this.getTheme().btnPrimaryBg,
                elevation: (this.props.transparent) ? 0 : 2,
                shadowColor: (this.props.transparent) ? undefined : '#000',
                shadowOffset: (this.props.transparent) ? undefined : {width: 0, height: 2},
                shadowOpacity: (this.props.transparent) ? undefined : 0.1,
                shadowRadius: (this.props.transparent) ? undefined : 1.5
            }
        }
    }

Also, removing line 14 as you suggested does make the error go away, but only because that same style is applied to the button. If you remove that style from the button, the warning goes away as well.

                    <Button onPress={() => this.replaceRoute('login')}>
                        Logout
                    </Button>

So the root of the problem does indeed seem to be in the Button component. It doesn't like it when you pass color to it for some reason. Can't really tell why though. When I look at that component, I don't see any views. I see a TouchableOpacity. There's a lot going on in that file though, so I think it would take some time to trace things through thoroughly since it's not jumping out at me right away.

Anyways, I know it's not as helpful as it could be, but it's as much as I have at the moment.

[sankhadeeproy007]

If we go through the docs of react-native. It is clearly mentioned that TouchableOpacity is just a wrapper around View to respond to touch gestures. So it is inherently a View component. And react-native View component doesn't accept color as a style property. The warning goes away after removing the color attribute in the said line.

If you remove that style from the button, the warning goes away as well.

I'm not sure though what you mean by that. We remove the style, the conflicting attribute is removed, so no warnings.
Hopefully that cleared your doubts.

[geirman]

Ah! _light-bulb_. That makes sense about TouchableOpacity being essentially a View.

I'm not sure though what you mean by that.

To better explain myself, I removed the style={styles.text} from the <Button> element on the homepage, and that also solves the problem, which is how I knew it was related to the button. You've now explained why, which makes sense. The button still needs the align-self attribute to stay centered though, so I just created a new style. I'm all good now. Thanks!

[AlexCoderBit]

Checking out the source code, I found that you can simply add prop 'color' to the button, so it will have top priority and will be showed. This way you may also save your custom style.

<Button style={styleGuide.button} color='#fff' ...

[sankhadeeproy007]

We have textStyle prop for that. Everything related to the text inside the button.

[moshebeeri]

This issue is so annoying, not because NativeBase has something to do with this issue, but since it is the same company whom I payed 100$ for a start kit which has not compatible with the open source written by company, causing this issue.
Why the hack I payed you guys? to read this F**n post and to get stack with the warnings??
I expect that the NativeBase Commercial and NativeBase Social that cost me 200$ will work with the latest NativeBase out of the box!
I do not recommend any one to buy the kits from NativeBase until they will fix those issue!!!

[sanketsahu]

@moshebeeri We are in the process of upgrading all the themes. You will receive an update soon.

And we are trying our level best to push the community forward. Bugs do pop-up, no software is perfect. But we are trying really hard to get things moving with the latest version.

[jackuhan]

use xxxStyle: Text.propTypes.style

[akhilthakur]

React will not allow you to add properties like (font, font-weight, colors,....) to that view if you want to assign such properties to add this property to ,

This might help you

[michaelVictoriaDev]

is this the same issue with Error: Invalid props.style key whiteSpace supplied to TextInput ?