Changing Button Mode doesn't work dynamically (Expo 52)

[dbrownstatsdraft]

Current behaviour

After upgrading to Expo 52 I can no longer change a button's mode attribute dynamically in iOS 18.1 simulator. Either programmatically or manually while developing. I must restart the app for the change to take effect when changing manually. It also appears that all styles are effected in this same way. If I update a style like margin it doesn't take effect until I either kill and restart the app or send a refresh signal via expo.

Expected behaviour

I should be able to change a Button's mode from "text" to "contained" and see the changes immediately in the app.

How to reproduce?

Create a new expo 52 app.
Create a react-native-paper (latest) button
Set button mode to "text"
Run in iOS 18.1 simulator
Change button mode to "contained" and save file
Look at button now. It will be in an in between state

Snack Link
Ensure Expo 52 and iOS or Android. Seems to work fine on Web but not iOS or Android.

Preview

Top button mode set to contained.

After button press top button mode is set to text but wrapping container still has the fill color

What have you tried so far?

Confirmed that downgrading expo to 51 works.

Your Environment

software	version
ios	18.1
android	latest
react-native	0.76.2
react-native-paper	5.12.5
node	22.11.0
npm or yarn	10.9.0
expo sdk	52.0.8

[raajnadar]

Are you using a new architecture? It seems the issue is in Expo or on the React Native side not the react native paper side problem.

[dbrownstatsdraft]

Yes, new architecture.

[dbrownstatsdraft]

I just updated app.json's newArchEnabled:false and I still see the issue.

[iM-GeeKy]

Potentially related to #4520. I've also added this to the list of new arch affected issues for visibility.

[K-E-L]

I can confirm with @dbrownstatsdraft . I am seeing the issue with "newArchEnabled: false" and "newArchEnabled: true" on expo 52.0.11

[Crhist0]

following as I'm having the same issue with new expo projects

[ptrtdrv]

Expo ~52.0.9. Same issue here. Button doesn't get rendered at all when its properties change. I have to force rendering it by changing 'key' attribute as a workaround. "newArchEnabled: false" and "newArchEnabled: true" don't make any difference.

[fathulfahmy]

i am having the same issue as well

Examples:

Conditional render two separate buttons. Working ✔

import React, { useState } from "react";
import { View } from "react-native";
import { Button } from "react-native-paper";

import { ScreenWrapper } from "@/components/screens";

const AcquireRequestScreen = () => {
  const [mode, setMode] = useState<string>("");

  const handleSelect = (mode: string) => {
    setMode(mode);
  };

  return (
    <ScreenWrapper>
      <View>
        {mode !== "service" && (
          <Button mode="contained-tonal" onPress={() => handleSelect("service")}>
            Pay with service
          </Button>
        )}
        {mode === "service" && <Button mode="contained">Pay with service</Button>}

        {mode !== "cash" && (
          <Button mode="contained-tonal" onPress={() => handleSelect("cash")}>
            Pay with cash
          </Button>
        )}
        {mode === "cash" && <Button mode="contained">Pay with cash</Button>}
      </View>
    </ScreenWrapper>
  );
};

export default AcquireRequestScreen;

Setting mode prop conditionally. Not working ❌

        <Button mode={mode === "service" ? "contained" : "contained-tonal"} onPress={() => handleSelect("service")}>
          Pay with service
        </Button>

        <Button mode={mode === "cash" ? "contained" : "contained-tonal"} onPress={() => handleSelect("cash")}>
          Pay with cash
        </Button>

Setting buttonColor prop conditionally. Not working ❌

        <Button
          mode="contained"
          buttonColor={mode === "service" ? colors.primary : colors.primaryContainer}
          onPress={() => handleSelect("service")}
        >
          Pay with service
        </Button>

        <Button
          mode="contained"
          buttonColor={mode === "cash" ? colors.primary : colors.primaryContainer}
          onPress={() => handleSelect("cash")}
        >
          Pay with cash
        </Button>

Setting backgroundColor style conditionally. Not working ❌

        <Button
          mode="contained"
          style={{ backgroundColor: mode === "service" ? colors.primary : colors.primaryContainer }}
          onPress={() => handleSelect("service")}
        >
          Pay with service
        </Button>

        <Button
          mode="contained"
          style={{ backgroundColor: mode === "cash" ? colors.primary : colors.primaryContainer }}
          onPress={() => handleSelect("cash")}
        >
          Pay with cash
        </Button>

Environment:

package.json

{
  "name": "the-barter-app",
  "license": "0BSD",
  "main": "expo-router/entry",
  "version": "52.0.43",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@dev-plugins/react-query": "^0.1.0",
    "@expo/vector-icons": "^14.0.2",
    "@hookform/resolvers": "^3.9.1",
    "@op-engineering/op-sqlite": "^11.2.8",
    "@react-native-community/netinfo": "11.4.1",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/material-top-tabs": "^7.0.18",
    "@react-navigation/native": "^7.0.0",
    "@shopify/flash-list": "1.7.1",
    "@stream-io/flat-list-mvcp": "^0.10.3",
    "@stripe/stripe-react-native": "0.38.6",
    "@tanstack/react-query": "^5.62.0",
    "axios": "^1.7.8",
    "dayjs": "^1.11.13",
    "expo": "~52.0.11",
    "expo-av": "~15.0.1",
    "expo-blur": "~14.0.1",
    "expo-clipboard": "~7.0.0",
    "expo-constants": "~17.0.3",
    "expo-dev-client": "~5.0.5",
    "expo-document-picker": "~13.0.1",
    "expo-file-system": "~18.0.6",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-image-manipulator": "~13.0.5",
    "expo-image-picker": "~16.0.3",
    "expo-insights": "~0.8.1",
    "expo-linking": "~7.0.3",
    "expo-media-library": "~17.0.4",
    "expo-network": "~7.0.3",
    "expo-router": "~4.0.9",
    "expo-secure-store": "~14.0.0",
    "expo-sharing": "~13.0.0",
    "expo-splash-screen": "~0.29.13",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.4",
    "expo-updates": "~0.26.9",
    "expo-web-browser": "~14.0.1",
    "react": "18.3.1",
    "react-content-loader": "^7.0.2",
    "react-dom": "18.3.1",
    "react-hook-form": "^7.53.2",
    "react-native": "0.76.3",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-pager-view": "6.5.1",
    "react-native-paper": "^5.12.5",
    "react-native-paper-dates": "^0.22.27",
    "react-native-quick-sqlite": "^8.2.7",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "~4.1.0",
    "react-native-svg": "15.8.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "stream-chat-expo": "^6.0.1",
    "zod": "^3.23.8",
    "zustand": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@tanstack/eslint-plugin-query": "^5.62.1",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "eslint": "^8.57.0",
    "eslint-config-expo": "~8.0.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "prettier": "^3.4.1",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  }
}

[fathulfahmy]

i am having the same issue as well

Examples:

Conditional render two separate buttons. Working ✔
Setting mode prop conditionally. Not working ❌
Setting buttonColor prop conditionally. Not working ❌
Setting backgroundColor style conditionally. Not working ❌

Environment:

package.json

fixed after running npx expo install --fix and updated Expo Go application

[BogiKay]

Closing as it's fixed in 5.13.0.