Change Button Font Size on React Native [Closed]

Change Button Font Size on React Native [Closed]

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.

4

6 Answers

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="+"
/>
1

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>
  );
}
1

Unfortunately, according to the documentation () 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"
/>

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
    }
});

Use this library 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>

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

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

When to use TouchableNativeFeedback, TouchableHighlight or TouchableOpacity?

James H. Sterling
Author

James H. Sterling

James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.