Allow Customization of Text in Button

Current behaviour

Currently there is no way to change many properties for the text component in Buttons. For example, two properties which are causing issues for me at the moment are textAlign and margin. You can change some properties by wrapping the text in your own Text component, but this does not effect all the properties namely the two I mentioned.

Expected behaviour

Ability to change style of Text component in Button. This could be a prop on buttons like buttonTextStyle or something.

Code sample

This Snack shows no way to edit text-align or margin on the text component. https://snack.expo.io/r1Nz_Xoam

What have you tried

You can get around this by setting display: 'flex', justifyContent: 'flex-start', but similar to this https://github.com/callstack/react-native-paper/issues/352, the pressed state only appears over the text. Further, because I cannot change the margins on the text, I cannot change the padding from the side of the button to the text.

[satya164]

This seems somewhat like an exaggeration, this is an dropdown component most close to the outlined Button. Though it is a “select” component almost all libraries use a Button component to create dropdown:

This isn’t an exaggeration. The screenshot you have posted is very different from Button. The text is left aligned, the outline is thicker and darker with a label on top left. I don’t think it’s possible to provide such flexibility without making the implementation very complex or exposing a lot of internal components which will make it harder to change those things later.

Yeah the component is called a button and technically buttons represent a lot of different styles of clickable elements, but it’s not the goal of this component to be used as all of those. There’s icon button, toggle button (wip), fab etc. which have separate components due to their difference in appearance even though they are technically buttons.

The linked libraries don’t change any styling for the button. They just take the same button component and add a dropdown on top of it. If you wanted to implement the same functionality here, no changes to the button component would be required.

This is what I initially tried but the <TextInput> component does not have onPress. As I mentioned above I used native react-native components to achieve this.

The TextInput component has a render prop which allows you to render anything inside it, which I think will be perfect for this use case.

It is possible to both follow Material Design Guidelines strictly and provide flexibility for users who need something that deviates slightly.

Definitely. Though here I’d like to know what use cases will it address and then consider the API, instead of adding an API without knowing the use cases.

Some users need something that deviates slightly from Material Guidelines but still require such things as clickability, ripple effect, or shadow.

What is clickability? You can already customize shadow with the elevation style. Anyway, I’m not opposed to adding props, but I just want to know the use cases first.

This is a very simple addition and would not add any significant complexity to the api.

This looks simple on the surface. However, it’s not as simple. A textStyle prop isn’t sufficient and we need to consider several things:

• Buttons can display a loading indicator or an icon. Say you add a margin to the text element, it’s not applied to the loading indicator/icon. This wouldn’t be the expected behavior.
• If you pass a custom color for the text in the style, should it also be applied to the icon/loading indicator? This will require extra work to extract it from style and apply to them.
• What if we add more features to the button in future and change the internal hierarchy? Will the textStyle prop work the same?

There are probably more edge cases I haven’t thought of. But it goes to show how adding a simple prop can affect several things. And even that won’t help much with implementing your desired component. That’s why I want to know the exact use cases when adding a feature so I can think about different scenarios and implement it properly.

In this case, I think using TextInput will be a much better choice for you, but ideally we’ll have a dropdown component in future once we have a menu component.

[satya164]

@Pushplaybang please open a new issue with your use case. There is a PR open already which should allow you to change the padding etc. #854