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

Question

Right now I am using the react-native-elements component library for my app. Specifically I am using their Button component, which has a default color of grey applied to it.

How can I set a custom default color for these buttons without having to pass in style props every time?

Is there a simple function/method I can call, or do I have to look at creating a custom component to wrap it? I would prefer the former.

Answer 1

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