Button background color does not update when switching themes on Android

[tonihm96]

Current behaviour

On Android, when switching the provided theme between dark and light modes, the button's background color does not update.

Expected behaviour

The button's background color should update accordingly when the theme is switched between dark and light modes.

How to reproduce?

1. Wrap your app with PaperProvider and provide a theme.
2. Use React state to toggle between dark and light themes.

https://snack.expo.dev/@tonihm96/react-native-paper-button-background-color

Preview

screen-recording.mp4

What have you tried so far?

I created a wrapper Button component based on the one provided by the library and passed the desired background color via the contentStyle prop.

Your Environment

software	version
ios	unknown
android	14
react-native	0.76.3
react-native-paper	5.12.5
node	20.12.1
npm	10.8.2
expo sdk	52.0.14

[teneeto]

@tonihm96 what is supposed to be the expected background when switched to dark mode?

[tonihm96]

@tonihm96 what is supposed to be the expected background when switched to dark mode?

it is supposed to be the primary dark color

[Acex187x]

Experiencing same issue when using disabled prop. More precisely for me it seems like the background color does not update sometimes, but the text is, like on video. It began happening after upgrading from RN 0.73.6 to 0.76.3. Also reproducibility is quite unstable, after some time of using the app looks like this issue fixes itself.

[vsheyanov]

@Acex187x I'm in the process of updating our app 0.74.2 to 0.76.3 - I have the same problem, but even without disabled prop.

<ButtonPaper
  buttonColor={on ? 'red' : 'yellow'}
  textColor={on ? 'yellow' : 'blue'}
>
    {text}
</ButtonPaper>

When I switch on variable, text color changes, but background - not.

"react-native-paper": "5.12.5"

[AbisheekKumar]

Current behaviour

On Android, when switching the provided theme between dark and light modes, the button's background color does not update.

Expected behaviour

The button's background color should update accordingly when the theme is switched between dark and light modes.

How to reproduce?

1. Wrap your app with PaperProvider and provide a theme.
2. Use React state to toggle between dark and light themes.

https://snack.expo.dev/@tonihm96/react-native-paper-button-background-color

Preview

screen-recording.mp4

What have you tried so far?

I created a wrapper Button component based on the one provided by the library and passed the desired background color via the contentStyle prop.

Your Environment

software version
ios unknown
android 14
react-native 0.76.3
react-native-paper 5.12.5
node 20.12.1
npm 10.8.2
expo sdk 52.0.14

Yes, I am also facing the same issue. For now, I am using TouchableOpacity to create the button, and the theming works fine with it. Once the issue is fixed, we can switch back to React Native Paper's Button component. I hope many of us are facing the issue on upgrading to latest version of react native. Here is my code.

import { StyleSheet, TouchableOpacity, useColorScheme, View } from 'react-native';
import { Text, useTheme } from 'react-native-paper';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const examplePage = () =>{
  const theme = useTheme();
  const scheme = useColorScheme();
  return(
        <View style={{ width: '70%', gap: 15 }}>
                <TouchableOpacity style={{ ...styles.button, backgroundColor: theme.colors.primary }} onPress={() => console.log("Scan QR Code")}>
                  <MaterialCommunityIcons name="qrcode-scan" size={24} color={theme.colors.onPrimary} />
                  <Text variant='bodyMedium' style={{ color: theme.colors.onPrimary }}>Scan QR Code</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{ ...styles.button, backgroundColor: theme.colors.secondary }} onPress={() => console.log("Scan BarCode")}>
                  <MaterialCommunityIcons name="barcode-scan" size={24} color={theme.colors.onPrimary} />
                  <Text variant='bodyMedium' style={{ color: theme.colors.onPrimary }}>Scan Bar Code</Text>
                </TouchableOpacity>
        </View>
  )
};
export default examplePage ;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    flexDirection: 'row',
    alignContent: 'center',
    gap: 10,
    justifyContent: 'center',
    padding: 15,
    borderRadius: 50
  }
});

OfCourse everyone knows the above approach, but anyway it might help us.

[manswiss]

I've the same issue. Please solve it fast because I can't update my app's now.

[LeandroPata]

I'm also experiencing the same issue, the background color of the Button doesn't update while the text color does.
I've been using RN 0.76.3 with react-native-paper 5.12.5 the entire time without issues though, so, at least for me, that isn't the cause.
For me, the cause is some incompatibility between the new architecture and react-native-paper, as it only happens when setting newArchEnable: true in app.config.ts, and just setting contentStyle={backgroundColor: theme.colors.elevation.level1} seems to fix it.

[manswiss]

Thanks @LeandroPata
When I change to the old archithecture and made a new build it works correct.

I think it has to do with this change:

I hope it will be fixed soon.

[luis-diego-ruiz]

Hi, I confirm the bug. In my case, this happened when I moved from React version 18.2.0 -> 18.3.1 and React Native 0.73.2 -> 0.76.3

I also confirm the suggestion from @LeandroPata works as expected.