You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Switch component doesn't update visually on first press when used inside Portal/Modal #4789
When using React Native Paper's Switch component inside a Portal/Modal, the switch doesn't update its visual state on the first press, even though the state change is properly triggered and logged. The switch only updates visually on the second press. This issue doesn't occur when the same Switch is used outside of Portal/Modal contexts.
Expected behaviour
It should re render the switch as the state has changed.
How to reproduce?
// Minimal reproduction case
import { useState } from 'react';
import { Modal, Portal, Switch } from 'react-native-paper';
export default function BugDemo() {
const [visible, setVisible] = useState(true);
const [checked, setChecked] = useState(false);
return (
<Portal>
<Modal visible={visible}>
<Switch
value={checked}
onValueChange={setChecked} // State updates but UI doesn't on first press
/>
</Modal>
</Portal>
);
}
What have you tried so far?
it works If I apply a dynamic key to the Switch like this
<Switch
key={`switch-${checked}`} // This fixes the issue
value={checked}
onValueChange={setChecked}
/>
I’m experiencing the same problem.
It started after upgrading to:
"react": "19.0.0"
"expo": "^53.0.20"
Previously I was on:
"react": "18.3.0"
"expo": "^52.0.47"
The issue happens when Switch is inside Portal — it only updates visually on the second tap.
If I move Portal outside of the component, the issue disappears.
import { useState } from 'react';
import { Modal, Portal, Switch } from 'react-native-paper';
export default function BugDemoWrapper() {
const [visible, setVisible] = useState(true);
return (
<Portal>
<BugDemo visible={visible} />
</Portal>
);
}
function BugDemo({ visible }) {
const [checked, setChecked] = useState(false);
return (
<Modal visible={visible}>
<Switch
value={checked}
onValueChange={setChecked} // Works fine now
/>
</Modal>
);
}
Reacted by Enrique Villafane, Juan Cruz Barrios, Ludevv and Jan Klinge
Activity
markovapps commentedon Aug 10, 2025
I’m experiencing the same problem.
It started after upgrading to:
Previously I was on:
The issue happens when Switch is inside Portal — it only updates visually on the second tap.
If I move Portal outside of the component, the issue disappears.
einjunge99 commentedon Oct 15, 2025
I'm having the same issue even with native Switch component. Adding dynamic key fixed it, but seems to be odd.
nicholascloud commentedon Jan 12, 2026
Solved the problem by wrapping the mutator in a
setTimeout(). YMMV.adrcotfas commentedon May 28, 2026
I wasn't able to reproduce this after #4957. It's not yet released but you can find it on
main. Please reopen if the issue persists.