CODEWITHSUNDEEP
androidiosreactjsreact-nativemobile
Saurav Kumar
Saurav Kumar

Reputation: 155

React Native change Button Text color

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.

Upvotes: 6

Views: 19906

Answers (4)

Prashant
Prashant

Reputation: 89

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

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

Upvotes: 0

Akshay Bhanderi
Akshay Bhanderi

Reputation: 41

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.

Upvotes: 1

Valieriia Hnidenko
Valieriia Hnidenko

Reputation: 31

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

Upvotes: 3

Hamas Hassan
Hamas Hassan

Reputation: 941

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>

Upvotes: 11

Related Questions