CODEWITHSUNDEEP
react-nativereact-native-navigation-v2
King Friday
King Friday

Reputation: 26096

Wix React Native Navigation V2 - custom navigation transitions

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.

Upvotes: 2

Views: 1732

Answers (1)

angelos_lex
angelos_lex

Reputation: 1661

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

Upvotes: 5

Related Questions