React-native-paper: Allow styling of text in Button and modification of Icon size

[Sam-Martin]

Describe the feature

At the moment the text styling in Button is hardcoded with a combination of styles. label and textStyle neither of which are accessible outside the component.

Also the size parameter passed to Icon is fixed to 16 and cannot be changed.

Motivation

I wish to use a button as a larger styling component and in order to make the appearance as I wish I would need to use a larger font and icon

Related Issues

N/A

[pan-pawel]

@Sam-Martin I added PR with labelStyle for button. I will notify you if we add it to paper

[Sam-Martin]

That's awesome! Thanks! Any thoughts on icon size?

[pan-pawel]

@Sam-Martin we added labelStyle to master, so with next release you will be able to set custom font for button.
We will also talk about icon size, I will keep you informed

[futantan]

Any plan of new releasing?

[tomchomiak]

Any update on controlling size of icon in buttons?

[GBGitUser]

I'd be interested also - I need to leave icons off at the moment as I am designing an app for construction workers which need big buttons and the size 16 icons just get lost :(

[rodrigo98rm]

I've managed to find a workaround for the icon situation.
I've used the React Native Vector Icons library, but you could probably change the <Icon /> for an <Image />.

Here is the code:

import { Button, Text } from 'react-native-paper';
import Icon from 'react-native-vector-icons/FontAwesome';

<Button
  style={buttonStyle}
  mode="contained"
  contentStyle={buttonContentStyle}
>
  <Icon name="warning" size={24} color="#fff" />
  <View style={{ width: 16, height: 1 }} />
  <Text style={buttonTextStyle}>Hello World</Text>
</Button>

Here is the result:

I've tried to add margin and padding to the Button contentStyle prop but it didn't work. That's why I've included the <View /> between the <Icon /> and the Text />.
I've also tried to put a <View /> inside the <Button /> and then put the rest of the stuff inside the View but I get an error.

Hope it helps!

[chriswiesner]

+1 for a iconSize prop

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[CesarGomezTissini]

Commenting for needed feature.

[kopax]

It could also support accessibilityRole="link" for app that use button styling for changing pages. See https://github.com/callstack/react-native-paper/issues/1666

[CesarGomezTissini]

Why is closed? Neither news, nor core devs reaching us for at least say something about this.

[fender]

+1

[AhmedKEpfl]

Hey I think you can also pass a function to the icon props:

<Button
    onPress={() => console.log('Clicked')}
    icon={() => <FontAwesomeIcon name='plus' size={24} />}
>    
    {'Add user'}
</Button>

The function returns any React component, so you can return an icon too.