How can I specify a default color for a react-native-elements button?

I know this is an old question, but since i found this post, i will leave this answer here for others to see.

react-native-elements supports theming since Oct 2018. As per the documentation you can use a theme provider in your RN application and override the library's default colors by doing something like this:

import { ThemeProvider } from 'react-native-elements';

const theme = {
  colors: {
    primary: 'pink',
  }
}

....
....

render(){
  ...
  return(
      <ThemeProvider theme={theme} >
         <App/>
      </ThemeProvider>
   )
}

The above example will change the primary color for all your components. By applying the same logic, you can change the background color only for button elements. You can also use theming for other customizations, like default component properties etc. For more information, check out the docs


I went ahead and made a wrapper class for now. If someone finds out how to do it the other way please post.

To do this I did the following

-Imported the Button class from react-native-elements

import {Button} from 'react-native-elements'

-Created a Component class where I passed along all the same props I send to the original button from react-native-elements.

class ButtonCustom extends Component{    
    constructor(props) {
      super(props)
    }
    render(){
      return (
        <Button 
        {...this.props} 
        backgroundColor={this.props.backgroundColor|| 'blue' } /> 
        //this allows me to override that backgroundColor if i need to
      )
    }  
}

-Exported it as a module for easy reuse

module.exports = ButtonCustom;

Whenever I need it I simply import and use it. I at least don't need to set the styling each time and if I need to I can make global changes.

<ButtonCustom
          title="Blue Automatically"
          />

On the contrary, if someone wants to change color of specific components

You can use the buttonStyle prop of the Button component. In it, you can set styles as normal like backgroundColor and color

  import {Button} from 'react-native-elements'

  <Button
      buttonStyle={{
         backgroundColor: "red"
      }}

      containerStyle={{
         marginTop: 12,
         width: "40%"
      }}

      title="Cancel"
   />

Check official docs: https://react-native-elements.github.io/react-native-elements/docs/button.html#buttonstyle

Tags:

React Native