Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Apps supporting a dark theme frequently crash when the theme is toggled

See original GitHub issue

Current behaviour

When switching between a light and a dark theme (e.g. by using the OSs theme setting in combination with the react-native Appearance API) the following error frequently occurs and the app crashes.

Error: Style property 'backgroundColor' is not supported by native animated module

Linked issue: #2063 #2574 #2167 #2641 Linked PR: #2113 #2068

Expected behaviour

Well, the app shouldn’t crash

Code sample

Any app with Dark Theme support, dedicated light and dark themes would work. (The app would also need to display one of the affected components described below). Expo go apparently doesn’t support system wide dark themes so one would need to copy this snack to hopefully have a working repro.

What have you tried

The root cause for this error is that the backgroundColor of the Surface component is calculated based on the Surfaces elevation (using the overlay() helper). However, Card, Button and Chip animate their elevation which causes their Surfaces backgroundColor to be animated as well which causes said error.

There were attempts to fix this by disabling the native animation driver if toggling of the dark mode is detected. Unfortunately, these attempts did not cover all cases. Furthermore, disabling the native animation driver isn’t optimal for performance reasons.

What’s the Surface components expected behaviour here? Should its background color change when its elevation is animated? In this case we can’t use the native animation driver and should disable it for elevation animations of said components.

Or should the Surface component keep its background color when its evelation is animated? In this case we need a way to tell the Surface component which fixed elevation to use to calculate its background color.