2

Wix React Native Navigation V2 Custom Navigation Transition

Content moderators like myself may get tripped up on this one and mark as duplicate as there are similarly named libraries like React Navigation which have nothing to do with this.

Is there a general way to customize transition animations for push/pop? The documentation seems to be sparse and incorrect after experimenting.

The default push animation moves from right-to-left. I would like to be able to override this in some cases to left-to-right or from top-to-bottom, etc.

Doing this per push/pop doesn't seem to work either when using "animations" and the "x" or "y" properties.

Here's an example of what I've tried.

class MyComponent extends React.PureComponent {
  static options(passProps) {
    return {
      animations: {
        push: {
          content: {
            x: {
              from: -1000, to: 0, duration: 300
            },
            y: {
              from: 0, to: 0, duration: 300
            }
          }
        },
        pop: {
          content: {
            x: {
              from: 0, to: -1000, duration: 300
            },
            y: {
              from: 0, to: 0, duration: 300
            }
          }
        }
      }
    }
  }
}

But I've tried also per actual command and globally as well with no effect, also tried using "_" in front as some random examples show this.

I'm generally confused on how to customize due to very poor docs on this.

King Friday
  • 25,132
  • 12
  • 90
  • 84
  • I ended up moving to react navigation for all things due to the poor developer experience of react native navigation. The context is essentially copied into each view rather than referencing as well. Not good and generally inflexible. – King Friday Apr 21 '20 at 14:54

1 Answers1

5

You probably forget enabled: 'true'. I set it globally like:

Navigation.setDefaultOptions({
  animations: {
    push: {
      enabled: 'true',
      content: {
        x: {
          from: 2000,
          to: 0,
          duration: 200
        }
      }
    },
    pop: {
      enabled: 'true',
      content: {
        x: {
          from: 0,
          to: 2000,
          duration: 200
        }
      }
    }
});

and works fine

angelos_lex
  • 1,593
  • 16
  • 24