React-native-paper: Button Character Styles: Spacing and Caps

Created on 10 Sep 2018  路  5Comments  路  Source: callstack/react-native-paper

I'd like the button text to be normal spacing and not all characters in caps.
Please add this as an option on the component or in the theme styles.

image

| software | version
| --------------------- | -------
| ios or android | android (haven't tested on ios)
| react-native | 0.55
| react-native-paper | 2.0.0

Most helpful comment

@ocarreterom we follow google's official material design guidelines which shows the text as uppercased. it doesn't matter what's the default in angular material library.

All 5 comments

It should be possible to do, by wrapping the button text with a Text component, e.g.

<Button><Text>Toast</Text></Button>

Does it solve your case?

Passing in a text comp works!

@gawrysiak following the Angular Material library texts should not be capitalized.
https://github.com/angular/material2/issues/2637#issuecomment-275573846
https://github.com/angular/material2/issues/2637#issuecomment-316457561

@ocarreterom we follow google's official material design guidelines which shows the text as uppercased. it doesn't matter what's the default in angular material library.

@ocarreterom just as @satya164 mentioned, it goes by the MD guide. In both old and new guidelines, the buttons are uppercase by default. I find it a good thing, since it's harder to go wrong with it. I'd like to see things more customizable some day, but this is how it is for now. Hopefully the extra Text wrapper isn't a big issue for your use cases.

mio-design 2fassets 2f1w8kygvruug_o8psvyioacf1llfimzb-n 2ftypesystem-typescale
https://material.io/design/typography/the-type-system.html#type-scale

Was this page helpful?
0 / 5 - 0 ratings