CODEWITHSUNDEEP
react-native
Diego Alves
Diego Alves

Reputation: 2669

How to change text color of Button in React Native

Sigh... how to change button text color in Reat Native. I am using the button from

import { Button } from 'react-native';

I set the button color for yellow and the text didn't show very well I need to change the button text color.

My code is like this, I've tried several things related to changing the text color but none work.

     <Button  color="#F0C228"   style={{ fontColor:"red" }}    onPress={() => regiao()} title="Entrar">   </Button>

Upvotes: 0

Views: 551

Answers (2)

grenzbotin
grenzbotin

Reputation: 2565

If you want to ensure the button looks similar on Android and iOS, you should create your own button component using TouchableOpacity.

import { StyleSheet, TouchableOpacity, Text } from "react-native";

const Button = ({ onPress, title }) => (
  <TouchableOpacity onPress={onPress} style={styles.buttonContainer}>
    <Text style={styles.buttonText}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: "#F0C228",
  },
  buttonText: {
    color: "#ff0000",
  }
});

export default Button;

And then simply import where you need it.

Upvotes: 3

Bellarose143
Bellarose143

Reputation: 175

You can use the color property as shown, but depending on what platform you are testing your app on, you may see different things. For Android, that should change the background color of the button, while on iOS it would change the text color of the button.

I would look at the documentation here. There is an editable piece of code you can use to see results in real-time using their example.

Upvotes: 2

Related Questions