No animations on iOS Device

[skizzo]

Description

Animating styles, e.g. with useAnimatedStyle, works fine on Android (emulator & physical device) and iOS Simulator, but not on actual iOS device.

There is no animation at all, the state is just changed instantly.

I'm using react-native-vision-camera 2.15.6, also, the error does not reproduce in the Snack provided, I don't know why.

My Podfile, just in case:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

# react-native-firebase
use_frameworks! :linkage => :static
$RNFirebaseAsStaticFramework = true

platform :ios, min_ios_version_supported
prepare_react_native_project!

flipper_config = FlipperConfiguration.disabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'myApp' do
  config = use_native_modules!

  flags = get_default_flags()

  # https://github.com/mrousavy/react-native-vision-camera/issues/860#issuecomment-1623463804
  pre_install do |installer|
    installer.pod_targets.each do |pod|
      if pod.name.eql?('vision-camera-code-scanner') || pod.name.eql?('VisionCamera') ||  pod.name.eql?('RNReanimated') 
        def pod.build_type
          Pod::BuildType.static_library
        end
      end
    end
  end

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'myAppTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

Steps to reproduce

1. Install react-native-reanimated 3.4.1 and react-native-vision-camera 2.15.6

2. Define animated style:

   const [expanded, setExpanded] = useState(false)
   const animatedCaretStyle = useAnimatedStyle(() => 
   ({transform: [{rotate: withTiming(expanded ? "180deg" : "0deg")}]})
   , [expanded])

3. Use in an Animated.View:

   <Animated.View style={[{height: 18, paddingRight: 0, justifyContent: "center"}, animatedCaretStyle]}>
   {* ... *}
   </Animated.View>

Snack or a link to a repository

https://snack.expo.dev/p7GpSPR_6

Reanimated version

3.4.1

React Native version

0.71.11

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 7

Acknowledgements

Yes

[piaskowyk]

Is it possible that you have enabled "reduce motion" option in system preferences?

[skizzo]

Oh my god, you're a life saver. This was absolutely the case, I just turned it back on and everything works as it should!

Stupid question, but is there any way to force animations even when this reduced motion is enabled in system settings?

[tomekzaw]

@skizzo You can force animation with ReduceMotion.Never, see more details in the docs here.

[YaoHuiJi]

@piaskowyk @tomekzaw thank you, but is there any way to set ReduceMotion.Never as default, some packages that rely on react-native-reanimated will have many strange behaviors like react-native-bottom-sheet, and many exist projects have a lot of animations, if I can set ReduceMotion.Never as default in only one place, the repair would be less invasive.

[stianjensen]

but is there any way to set ReduceMotion.Never as default, some packages that rely on react-native-reanimated will have many strange behaviors like https://github.com/gorhom/react-native-bottom-sheet/issues/1560, and many exist projects have a lot of animations, if I can set ReduceMotion.Never as default in only one place, the repair would be less invasive.

Agreed, I wasn't able to understand from the docs if there exists a way with reanimated to set global defaults?

[janroures]

did you find any solution for this?

[skizzo]

did you find any solution for this?

Yes, just read the comments above

[janroures]

sorry, I meant is there any way to disable reducedMotion globally?

[skizzo]

sorry, I meant is there any way to disable reducedMotion globally?

I don't think so, you need to specify it every time you define an animation. But I agree, would be super handy to have a global setting..

[irisjae]

sorry, I meant is there any way to disable reducedMotion globally?

A patch is possible (you can apply via patch directly, or via patch-package)

--- a/react-native-reanimated/lib/module/reanimated2/PlatformChecker.js
+++ b/react-native-reanimated/lib/module/reanimated2/PlatformChecker.js
@@ -33,6 +33,6 @@ export function isWindowAvailable() {
 export function isReducedMotion() {
   return isWeb() ? isWindowAvailable() ?
   // @ts-ignore Fallback if `window` is undefined.                                                                                                                                                          
-  !window.matchMedia('(prefers-reduced-motion: no-preference)').matches : false : global._REANIMATED_IS_REDUCED_MOTION ?? false;
+  !window.matchMedia('(prefers-reduced-motion: no-preference)').matches : false : false;
 }
-//# sourceMappingURL=PlatformChecker.js.map
\ No newline at end of file
+//# sourceMappingURL=PlatformChecker.js.map
diff --git a/react-native-reanimated/src/reanimated2/PlatformChecker.ts b/react-native-reanimated/src/reanimated2/PlatformChecker.ts
index 9b3fcb1..0111380 100644
--- a/react-native-reanimated/src/reanimated2/PlatformChecker.ts
+++ b/react-native-reanimated/src/reanimated2/PlatformChecker.ts
@@ -49,5 +49,5 @@ export function isReducedMotion() {
       ? // @ts-ignore Fallback if `window` is undefined.
         !window.matchMedia('(prefers-reduced-motion: no-preference)').matches
       : false
-    : (global as localGlobal)._REANIMATED_IS_REDUCED_MOTION ?? false;
+    : false;
 }

[halilibrahimcelik]

Is it possible that you have enabled "reduce motion" option in system preferences?

Still faces with this problem, is there any updates to get adjust motion globally, as warning indicaces, this can only visible on the development mode but it would be super to make changes on app level.