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?