React-native-navigation: [v2] components are not unmounted with customTransition push and pop

[alexichristakis]

Issue Description

If a screen is pushed with a custom transition, the memory isn't released when it's popped. Pushing and popping the same screen continues to add to the stack and consumes more memory.

Steps to Reproduce / Code Snippets / Screenshots

Updated onClickPush() function in playground screen "PushedScreen.js" and tracked the stack in react dev tools.

async onClickPush() {
        await Navigation.push(this.props.componentId, {
            component: {
                name: "navigation.playground.PushedScreen",
                passProps: {
                    stackPosition: this.getStackPosition() + 1,
                    previousScreenIds: _.concat(
                        [],
                        this.props.previousScreenIds || [],
                        this.props.componentId,
                    ),
                },
                options: {
                    topBar: {
                        title: {
                            text: `Pushed ${this.getStackPosition() + 1}`,
                        },
                    },
                    customTransition: { animations: [], duration: 0 },
                },
            },
        });
    }

---

Environment

• React Native Navigation version: latest
• React Native version: 0.51 and 0.55
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): debug & release

[birkir]

Are we maintaining any strong references to the VC anywhere? pop calls to remove the VC from the store.

[alexichristakis]

Would it be possible to add a styling option "animated: false" for pushing a new screen or modal? I built my own shared element transition (because customTransition wasn't working for components in a list) and just want the new screen to appear instantly after my animation is complete.

[guyca]

You can disable animations in options.

Navigation.push(this.props.componentId, {
  component: {
    name: 'myScreen',
    options: {
      animations: {
        push: {
          enable: false
        }
      }
    }
  }
});

[alexichristakis]

and how would that look for Navigation.pop @guyca ?

[guyca]

I just documented the animations options - There's much to improve, i'm sure some things are not clear - if you have any suggestions for improvements please PR 👍

Navigation.push(this.props.componentId, {
  component: {
    name: 'myScreen',
    options: {
      animations: {
        pop: {
          enable: false
        }
      }
    }
  }
});

[jacobrosenskold]

@guyca I don't get it, how do you pop without animation?

Navigation.pop(this.props.componentId, {
  component: {
    options: {
      animations: {
        pop: {
          enable: false
        }
      }
    }
  }
});

Doesn't work.

[olegderecha]

Interesting thing, for me it works with enabled, not enable!

Navigation.push(this.props.componentId, {
  component: {
    name: 'myScreen',
    options: {
      animations: {
        push: {
          enabled: false
        }
      }
    }
  }
});