setRoot Animations Do Not Work on iOS

karrettgelley commented 2 years ago

🐛 Bug Report

From experimentation with both the playground and my app, it seems that setRoot animations do not work on iOS (on both simulator and physical device). I thought at first it was due to an incorrect implementation in my app, but after cloning master (v7.30.0) of this repo, I was able to reproduce the issue in the playground app (again, on both simulator and physical device on iOS). More specifically, none of the setRootAnimation animations work in playground/src/commons/options/Animations.ts. Instead of showing a slide in/slide out animation as the code intends, the default replace animation is shown

Please see videos below for a demonstration of the issue

To Reproduce

Open the playground app in Xcode (either playground/ios/playground.xcodeproj or playground/ios/playground.xcworkspace)
Run the playground app via npm run start
Build and run the app in Xcode on either a simulator or on a physical device by pressing the play button
Once the app has launched, Click the 'Navigation' bottom tab
Click the 'Set Root' button near the top of the screen
Here you'll be presented a list of buttons that are meant to showcase the various behaviors of the Navigation.setRoot() method, including custom animations. Press any of these options
Observe that no animation occurs when navigation from one root to another

Expected behavior

According to the setRootAnimation variable defined in playground/src/commons/options/Animations.ts. the destination screen should slide in from the right and the source screen should slide out to the left

Actual Behavior

Default replace screen animation is exhibited

Your Environment

*While I observed this issue in both my app and the playground app, the following values refer to those in the playground

React Native Navigation version: 7.30.0 (cloned directly from master)
React Native version: 0.69.5
Platform(s) (iOS, Android, or both?): iOS (not tested on android)
Device info (Simulator/Device? OS version? Debug/Release?): Physical device = iPhone 13 iOS 15.4.1, Simulator = iPhone 14

Reproducible Demo

The following video demonstrates the issue as shown on physical device. I have also recorded a demo on sim but the file is too large to post here

https://user-images.githubusercontent.com/31458115/200108016-26196255-5852-45bf-bb60-6592c34e75ee.mov

Just clone master and follow the STR above

Are you willing to resolve this issue by submitting a Pull Request?

✅ Yes, I have the time, but I don't know how to start. I would need guidance. *I would be a new contributor to the project but am willing and able to help

viper4595 commented 11 months ago

Same issue here. The "setRoot" animation still not working on iOS in the latest RNN version 7.37.2, React Native 0.72

lucasalmeida-mt commented 1 month ago

Same issue here. The "setRoot" animation using translationX still not working on iOS in the latest RNN version 7.40.1, React Native 0.73.9

...
  animations: {
    setRoot: {
      enter: {
        waitForRender: true,
        enabled: true,
        translationX: {
          from: width,
          to: 0,
          duration: 3,00
        },
      },
    },
  },
...

wix / react-native-navigation