IconButton failed prop type color supplied

[elmcapp]

Description

I am getting an error that say IconButton failed prop type color supplied. The issue is that I am not providing a color at all. Also if I do provide a color I get this issue

CodeSandbox/Snack link

Not able to provide link

Steps to reproduce

The follow show the example of what creates the issue

 <IconButton
            icon={<Ionicons name="refresh" size={15} color="undefined" />}
            onPress={() => handleRefresh()}
          />

or

 <IconButton
            icon={<Ionicons name="refresh" size={15} />}
            onPress={() => handleRefresh()}
          />

NativeBase Version

3.3.1

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

React Native for macOS

Additional Information

No response

[Krithikj20]

Thank you @elmcapp for reporting this issue. We will look into it.

[ankit-tailor]

This should work for you. Let me know if it works for you.

<IconButton
  icon={<Icon as={Ionicons} name="refresh" color="red.500" />}
  onPress={() => console.log('hello world')}
  size="lg"
/>

[Nasseratic]

@ankit-tailor Yeah, that works because the color is then passed to the NativeBase component which is able to resolve the color from the theme.

@Viraj-10 Any chance this gets fixed soon?
I would also like to help with this :)

[Viraj-10]

Hi @Nasseratic, @ankit-tailor has provided the right way to write. When you write <Ionicons name="refresh" size={15} color="undefined" /> NativeBase doesn't have control over it. here we have mentioned the API how you can use Icons with IconButton. If you feel that your API should be supported as well. Please feel free to create PR. we will have a look and be happy to merge it if everything looks good.

[Viraj-10]

Closing this issue. Feel free to re-open it.

[Nasseratic]

Hi, @Viraj-10 thanks for the quick response :) I don't think the way mentioned is a solution.

Let me describe the issue a bit more:

<IconButton _icon={{color:"red.500" }} icon={ isLoading ? <Spinner/>  : <Icon as={Ionicons} name="refresh" />} ... />

In the above example, the app might crash ( at least in dev ) because we are passing red.500 to a Spinner in case of loading. Here native-base clone the element and pass the _icon props without being actually resolved by the theme Also in case of pressing, IconButton will try to pass different color depending on the theme.

https://github.com/GeekyAnts/NativeBase/blob/ef47454bbbcf8f3cd212d5942f685c61415090fd/src/components/composites/IconButton/index.tsx#L50-L57

So if you pass any element that doesn't accept the theme color prop even by mistake, it will cause an issue that is hard to trace.