React Native: Change text colour in Paper Button

Question

I am relatively new in react native.

I can easily show button (with shadow, etc) as in here.

 <Button
  mode="contained"
  color={'#f08e25'}
  contentStyle={{ height: 44 }}
  onPress={this.onPressSubmit}
  theme={theme} >SUBMIT </Button>

I am also referring to this document.

https://callstack.github.io/react-native-paper/button.html#contentStyle

Problem is I can't change text colour if mode is "contained". I tried in contentStyle or theme and it is not working. How shall I change text color if mode is "contained"?

When change to contained color property is mean background color. Simple way try — Nijat Aliyev, Oct 23 '19 at 04:42
@NijatAliyev is possible to change colour of 'outlined' button in 'paper button' — Sagar, Oct 13 '21 at 11:46

score 17 · Answer 1 · edited Apr 18 '22 at 10:25

17

For mode="contained" react-native-paper buttons, color changes the background colour and you need labelStyle to change the text. For mode="flat" buttons, color will change the text. You just need to add the labelStyle prop. The code below will give you your orange button with white text for example:

<Button
  mode="contained"
  color="#f08e25"
  contentStyle={{ height: 44 }}
  labelStyle={{ color: "white", fontSize: 18 }}
  onPress={this.onPressSubmit}
  theme={theme} >
    SUBMIT 
</Button>

edited Apr 18 '22 at 10:25

veryreverie

2,871
2
13
26

answered Nov 13 '19 at 17:07

TeamBeamo

559
5
14

2

Is there a way to do it theme wise? i.e. if you want all the buttons to have labelStyle color set as white. – panosl Nov 23 '20 at 16:42

score 4 · Answer 2 · answered Oct 23 '19 at 05:14

import * as React from 'react';
import { Button,Text } from 'react-native-paper';

const MyComponent = () => (
  <Button icon="camera" color="blue" dark={true} compact={true}  style={{color:"red",marginTop:100}} mode="contained" onPress={() => console.log('Pressed')}>
   <Text style={{color:"red"}}>press me</Text>
  </Button>
);

export default MyComponent;

this is your answer in contained mode , color is shows for the color of all button not just text

is it possible to change colour border in 'outlined button' – Sagar Oct 13 '21 at 11:48 — Sagar, Oct 13 '21 at 11:48

score 0 · Answer 3 · answered Oct 23 '19 at 06:21

0

onPressSubmit = () => {
    setState({flag:true})
}
<Button
  mode="contained"
  color={'#f08e25'}
  contentStyle={this.state.flag ? styleA : styleB}
  onPress={this.onPressSubmit}
  theme={theme} >SUBMIT </Button>

answered Oct 23 '19 at 06:21

Samed Vahora

1
1

Please add some more information regarding your answer, instead of just the code. This way it is easier to understand for everyone :) – Remy Oct 23 '19 at 12:56

React Native: Change text colour in Paper Button

3 Answers3