React Native: Change text colour in Paper Button

user_1550974 0
Viewed 12956

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"?

react-native-paper react-native
3 Answers

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>
user_88930930 
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

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