[2.3] `withTiming` never updates `backgroundColor` on iOS
See original GitHub issueDescription
If you set backgroundColor using withTiming, it never changes from its initial value. It worked with 2.2, but not with 2.3.
It works fine on Web, but breaks on iOS.
Expected behavior
This should work:
const pressed = useSharedValue(false)
const style = useAnimatedStyle(() => {
return {
backgroundColor: withTiming(pressed.value ? '#ffffff' : '#000000')
}
})
Actual behavior & steps to reproduce
The color never updates if you wrap it with withTiming. If you remove withTiming, then it does indeed update.
Here is a video showing what happens:
https://www.loom.com/share/0b78eee16d644a4d8993d7844b328c00
Snack or minimal code example
View Code
import React from 'react'
import { Pressable, StyleSheet } from 'react-native'
import Animated, {
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated'
export default function HelloWorld() {
const pressed = useSharedValue(false)
const style = useAnimatedStyle(() => {
return {
backgroundColor: withTiming(pressed.value ? '#ffffff' : '#000000'),
}
})
return (
<Pressable
onPressIn={() => (pressed.value = true)}
style={styles.container}
onPressOut={() => (pressed.value = false)}
>
<Animated.View style={[styles.shape, style]} />
</Pressable>
)
}
const styles = StyleSheet.create({
shape: {
justifyContent: 'center',
height: 250,
width: 250,
borderRadius: 25,
marginRight: 10,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: '#9c1aff',
},
})
Package versions
- React Native: 0.63.4
- React Native Reanimated: 2.3.1
- NodeJS:
- Xcode:
- Java & Gradle:
Affected platforms
- Android
- iOS
- Web
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Can't change List background color in iOS 16 - Apple Developer
I can't seem to find a way to change List's background color. Modifier .background() has no effect on List background color. Putting List...
Read more >Reanimated - Expo Documentation
react-native-reanimated provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations. Reanimated uses React ...
Read more >3.0.0
In order to use this library with bazel, you will also need to upgrade your workspace versions to ... Fixed unrecognized selector crashes...
Read more >css3 | samuli.hakoniemi.net
I've tested this example with recent builds of Google Chrome, Firefox 5 Beta, iPhone 4 / iPad and Android 3.1 with Browser (Chrome)...
Read more >AMENDMENT OF SOLICITATION/MODIFICATION OF CONTRACT
NAME AND ADDRESS OF CONTRACTOR (No., Street, County, State and Zip Code) ... (updated on-line) Approval Guide ... 2.3.6.7 Signage Background Color.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

It will be fixed with https://github.com/software-mansion/react-native-reanimated/pull/2776
looks like there is a change requested on your PR. Any updates on when this might be fixed/resolved?