How to change text color of Button in React Native

Question

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> 

Answer 1

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.

Answer 2

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.