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

Seta

When change to contained color property is mean background color. Simple way try <button><text style={{color:'yourvalue}} ></text></button> – Sunrise

oh..it worked! thank you. may be we shall move to answer. – Seta

I'm happy to be helped to you :) – Sunrise

@NijatAliyev is possible to change colour of 'outlined' button in 'paper button' – Duax

The latest documentation lives at callstack.github.io/react-native-paper/docs/components/Button/… and has quite a nice table that shows what theme properties you need to set to get what you are looking for. – Gravettian

Answer 1

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>

Bonds

Is there a way to do it theme wise? i.e. if you want all the buttons to have labelStyle color set as white. – Norvol

Answer 2

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

Adenectomy

is it possible to change colour border in 'outlined button' – Duax

Answer 3

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

Gastronomy

Please add some more information regarding your answer, instead of just the code. This way it is easier to understand for everyone :) – Theologue