React Native change Button Text color

Question

I am a beginner in React Native and I just want to write my first line of code with it. I made a button and started wondering how can I change the colour and other properties of the text in the button. <Button title="Click Me"></Button>

I was also wondering if there are some good packages that are recommended for beginners. Thanks for the help.

Hamas Hassan · Accepted Answer · 2021-02-21 11:46:47Z

11

You can use a Button from react-native like this and can also pass the color prop.

Button
  onPress={onPressLearnMore}
  title="Click Me"
  color="#841584"
/>

For complex and custom buttons you can create it by your own styles using Touchables which are given by react-native you don't have to use any third-party libraries for that.

Example:

    <TouchableOpacity style={{ here you can specify custom styles for button container }} onPress={gotoDashboard}>
        <Text style={{here you can specify text styles}}>Button Text Here</Text>
  // You can add there as many components according to your designs.
      </TouchableOpacity>

answered Feb 21, 2021 at 11:46

Hamas Hassan

9241 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saurav Kumar Over a year ago

The first code doesn't change the text colour.

Hamas Hassan Over a year ago

the button component does not have the option to change the text color. The color property just changes the overall background color of the Button. You have to use Touchable for custom buttons. Try the second example. I hope that will workout

micah Over a year ago

@Akshay Bhanderi is correct in their answer that your first solution sets the text color in ios, but it sets the background color in andriod, making TouchableOpacity a good solution

Valieriia Hnidenko · Accepted Answer · 2023-02-02 11:41:13Z

3

You should use titleStyle like this:

<Button
  titleStyle={{
     color: '#00BAD4',
     fontSize: 30,
     fontStyle: 'italic',
  }}
  title="Title"
  buttonStyle={{
     backgroundColor: '#FFF',
     borderRadius: 4,
     margin: 5,
  }}
/>

Btw here's more useful information about buttons: https://reactnativeelements.com/docs/components/button

answered Feb 2, 2023 at 11:41

Valieriia Hnidenko

311 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Akshay Bhanderi · Accepted Answer · 2023-09-17 12:02:06Z

1

So, the color prop of react native Button behaves differently in IOS and Android as per official docs It affects the background color if it's Android while the font color if it's IOS. So, you have to specify styles as per that.

One good alternative can be TouchableOpacity.

answered Sep 17, 2023 at 12:02

Akshay Bhanderi

411 silver badge5 bronze badges

Comments

Prashant · Accepted Answer · 2023-11-01 04:56:41Z

0

To Make Button Text Color in React Native Just add Following Line

<Button color="#2ECC71" title='Click Me'/>

answered Nov 1, 2023 at 4:56

Prashant

991 silver badge11 bronze badges

Collectives™ on Stack Overflow

React Native change Button Text color

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related