CODEWITHSUNDEEP
react-native
aedry
aedry

Reputation: 346

How to change button fontSize in React Native?

How can I change the following button's font size? Using the style attribute with fontSize doesn't work.

   <Button
       style={{fontSize: 32}}
       uppercase={false}
       mode="contained">
     Some text
   </Button>

Upvotes: 1

Views: 7699

Answers (3)

Suraj kochale
Suraj kochale

Reputation: 973

If you are using 'react-native-elements' button, use titleStyle to set font size.

import {Input, Button} from 'react-native-elements';

<Button
   titleStyle={{
       color: "white",
       fontSize: 16,
   }}
   buttonStyle={{
       backgroundColor: "white",
       borderRadius: 60,
       flex: 1,  
   }}

   title="Click here"
/>

For React-native Button, you can use use TouchableOpacity.

<TouchableOpacity style={{height:50}}>
     <Text style={{fontSize:36}}>Click here</Text>
</TouchableOpacity>

Upvotes: 1

Salim
Salim

Reputation: 198

I use the Text component inside TouchableXXX for every button, it's more flexible and works fine, you can also try to make you own button component and passing props that you want to control (fontsize, colors ...): 

 <TouchableHighlight onPress={handelPress} style={styles.buttonStyle}>
     <Text style={styles.buttonTextStyle}>Click here</Text>
 </TouchableHighlight>

Upvotes: 3

shammi
shammi

Reputation: 1409

The React Native Button is very limited in what you can do, see; https://facebook.github.io/react-native/docs/button

It does not have a style prop, and you don't set fontSize.

If you want to have more control over the appearance you should use one of the TouchableXXXX' components like TouchableOpacity They are really easy to use :-) I have make a button for you . hope it will useful for you

<TouchableOpacity style={{height:50,backgroundColor:"skyblue",alignItems:'center',justifyContent:'center'}}>
     <Text style={{fontSize:32,}}>Some Text</Text>
</TouchableOpacity>

Upvotes: 6

Related Questions