React-native-paper: FAB.Group actions accepts a IconSource, not only a string

Created on 7 May 2019 · 5Comments · Source: callstack/react-native-paper

Environment

"react-native-paper": "2.15.0" and Typescript

Description

I was looking at the docs to see if i could use a custom icon source on the FAB.Group actions, but the type for the actions icon is specified as a string:
https://github.com/callstack/react-native-paper/blob/5935fb4c8010f884b407a91bef30a472dafe58a8/src/components/FAB/FABGroup.js#L32-L39

But the signature is wrong, looking at the FAB.Group source, the action list actually can receive a IconSource just like the normal FAB:
https://github.com/callstack/react-native-paper/blob/5935fb4c8010f884b407a91bef30a472dafe58a8/src/components/FAB/FABGroup.js#L283-L287

Reproducible Demo

I think that just a simple component using typescript and a icon source on the actions will
give you the compile error:

const MyComponent = () => <Portal>
                <FAB.Group
                    open={ true }
                    icon={ props => <Icon name='add' { ...props }/> }
                    actions={ [
                        {
                            icon: props => <Icon name='add' { ...props }/>,
                            label: 'Enviar',
                            onPress: () => console.log('Pressed add')
                        }
                    ] }
                    onStateChange={ () => {  } }
                    onPress={ () => {  } }
                />
            </Portal>

I managed to make my code compile making a cast (as unknown as FABGroupAction[]) on the list before using it on the component

Source

Grohden

Most helpful comment

I would like to fix this issue!

Taym95 on 8 May 2019

👍2

All 5 comments

The FAB component only supports string even in FAB group because the FAB group used the FAB component as a child element. So the compiler is doing its job correctly.

Note paper only supports icon from material.io in v3 they are planning to add custom fonts support.