question-mark
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.

[2.3] `withTiming` never updates `backgroundColor` on iOS

See original GitHub issue

Description

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:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
piaskowykcommented, Dec 28, 2021
0reactions
QuintonCcommented, Jan 3, 2022

It will be fixed with #2776

looks like there is a change requested on your PR. Any updates on when this might be fixed/resolved?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found