Change all button style with theming

Asked Jun 25 '19 at 12:27

Active Jun 25 '19 at 13:40

Viewed 412 times

I want to change all button style, without having to add style one after another like that:

<Button mode="contained" style={{ backgroundColor: "#FF6766" }} >

I'm trying to do something with that:

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ffffff',
    accent: '#f1c40f',
    text: '#515151',
    surface: '#FF6766',
    underlineColor: 'transparent',
    background: '#ffffff',
    contained: '#000000',
  }
};

But I don't know if it's possible here, I found this on this link: https://callstack.github.io/react-native-paper/theming.html

App.js

export default function App() {

  const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
      ...DefaultTheme.colors,
      primary: '#ffffff',
      accent: '#f1c40f',
      text: '#515151',
      surface: '#FF6766',
      underlineColor: 'transparent',
      background: '#ffffff',
      contained: '#000000',
    }
  };

  return (
    <PaperProvider theme={theme}>
      <AppNavigator />
    </PaperProvider>
  )

}

edited Jun 25 '19 at 13:40

asked Jun 25 '19 at 12:27

Benjamin BENOIT

Did you pass this theme to `PaperProvider` like in the docs ? `` – adesurirey Jun 25 '19 at 12:33
@adesurirey yes look my edit please – Benjamin BENOIT Jun 25 '19 at 13:41
That should work, as long as you're importing components from `react-native-paper` and not `react-native`. What's your current issue with it? – Zaytri Jun 25 '19 at 18:01
@zaytrix for exemple I can't change background colour buttons – Benjamin BENOIT Jul 01 '19 at 06:43
The color set as `primary` will change the background color of buttons with `mode='contained'` – Zaytri Jul 01 '19 at 16:32

Change all button style with theming

0 Answers0