Change Button Font Size on React Native

Question

I'm trying to change Button font-size on my react native app, but I got an error. Does anyone know how to properly do it? Thank you.

I want to style the button for the navigation. I have the code on snack, here's the link : https://snack.expo.io/@indriruth/navigation — webprogramming13, Apr 27 '18 at 16:29
I tried to change fontSize and fontWeight of Button on ./components/Home.js. Thank you for responding, guys. — webprogramming13, Apr 27 '18 at 16:32

score 18 · Answer 1 · edited Sep 16 '19 at 13:25

18

You can use react-native-elements with titleStyle props.

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

<Button
   onPress={this.addPicture}
   titleStyle={{
       color: "white",
       fontSize: 16,
   }}
   buttonStyle={{
       backgroundColor: "white",
       borderRadius: 60,
       flex: 1,
       height: 30,
       width: 30,  
   }}

   title="+"
/>

edited Sep 16 '19 at 13:25

brooksrelyt

3,925
5
31
54

answered Sep 16 '19 at 13:24

loic queruel

191
1
5

Hahaha I finally get `buttonStyle` working after who knows how long of searching, then I have to use a *separate* prop for the title...Thanks – velkoon Aug 03 '21 at 22:08

score 9 · Answer 2 · edited May 12 '21 at 19:20

9

Unfortunately, according to the documentation (https://reactnative.dev/docs/button) you can't change a font-size of a button. The only style prop you can change is color.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

edited May 12 '21 at 19:20

ggorlen

44,755
7
76
106

answered Jun 25 '18 at 19:30

Oleh Chemerskyi

164
2

score 7 · Answer 3 · answered Apr 27 '18 at 16:15

7

I have a feeling you're not using a Text element inside of your Touchable:

import React from 'react';
import { TouchableWithoutFeedback, Text } from 'react-native';

export default function ComponentName() {
  return (
    <TouchableWithoutFeedback>
      <Text style={{ fontSize: 24 }}>Button Text</Text>
    </TouchableWithoutFeedback>
  );
}

answered Apr 27 '18 at 16:15

AryanJ-NYC

2,529
2
20
27

I don't think I can use Touchable for navigate to the next page. I post the link and more description on my problem above. Please kindly check it. – webprogramming13 Apr 27 '18 at 16:35

score 4 · Answer 4 · answered Jul 10 '18 at 15:54

Here is my solution to easily style buttons using TouchableOpacity with Text:

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";

export default class CustomButton extends Component {
  render(){
    return (
      <View style={styles.container}>

        /* Custom Button */
        <TouchableOpacity
          style={styles.customBtnBG}
          onPress={() => {}} 
        >
          <Text style={styles.customBtnText}>Button</Text>
        </TouchableOpacity>

      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
        justifyContent: "center",
    alignItems: "center"
  },

  /* Here style the text of your button */
    customBtnText: {
        fontSize: 40,
        fontWeight: '400',
        color: "#fff",
    },

  /* Here style the background of your button */
    customBtnBG: {
    backgroundColor: "#007aff",
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 30
    }
});

score 1 · Answer 5 · answered Jul 12 '18 at 09:39

Use this library https://github.com/APSL/react-native-button instead of Button component in react native.

<View>
  <Button
    style={{
      backgroundColor: "#FE434C",
      borderColor: "transparent",
      borderRadius: 20,
      width: 250
    }}
    textStyle={{ color: "#FFFFFF", fontSize: 20 }}
  >
    Hello
  </Button>
</View>

score 0 · Answer 6 · answered Jul 11 '18 at 11:23

you can create custom buttons with TouchableHighlight, TouchableOpacity, TouchableNativeFeedback.

import {TouchableHighlight,TouchableOpacity,TouchableNativeFeedback }from 'react-native'

When to use TouchableNativeFeedback, TouchableHighlight or TouchableOpacity?

Change Button Font Size on React Native

6 Answers6