React-native-navigation: How to change screen transition (slide) left to right instead of right to left

[marzieh-kazemi]

Issue Description

I would like to have different transition, slide left to right instead of default behaviour (slide right to left) to open the screen. I have already searched a lot and read also documentation but there is no easy way to only change the default behaviour (change animation direction).

---

Environment

• React Native Navigation version: ^2.0.2418
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator/Device Version 10.0

[iksent]

@marzieh-kazemi, Hello. Please try:

    Navigation.setDefaultOptions({
            push: {
                content: {
                    x: {
                        from: -1000,
                        to: 0,
                        duration: 300,
                    },
                    alpha: { // Optional
                        from: 0.5,
                        to: 1,
                        duration: 300,
                    }
                }
            },
     });

Also you have to set the same object for pop key. But I tried and it is not working at all now...

[marzieh-kazemi]

@iksent, Hi. Thank you for your suggestion. We have tried your solution but did not work for us. That would be great if there will be a proper configuration to change the transition direction horizontally.

[pragneshpj]

transition direction horizontally work perfectly when i open new screen.
but when i pop the screen it will be slide-down screen.(issue in android)
please check below code for push and pop and help me for this.
(push working, pop not working in android)

Navigation.setDefaultOptions({
animations: {
push: {
content: {
x: {
from: 2000,
to: 0
}
}
},
pop: {
content: {
y: {
from: -2000,
to: 0
},
alpha: {
from: 0,
to: 1
}
}
}
}
});

[marzieh-kazemi]

@pragneshpj , Hi. Well I think your problem is when you pop you are setting a transition vertically and from -2000 to 0. That's why it does slide down the screen so you should add configuration for transition on x for pop as well.

[ollydixon]

I'm also facing the same problem in V2 with pushing screens.
The only reason I don't use a JS library for navigation and I use this one is because V1 it offers the native 'feel' with swipe back on iOS and the animation time is the same as it would be in native for both Android and Platform giving it a truly native feel.
I can't figure out how to emulate this in V2 at all.. what's the point of this library if we lose this simple functionality? Might as well use a JS one that doesn't have the painful setup, performance is the same.

[kishanj918]

This is for slide horizontal animation.

Navigation.setDefaultOptions({
topBar: {
visible: false,
drawBehind: true
},
layout: {
orientation: ["portrait"]
},
animations: {
push: {
content: {
x: {
from: 2000,
to: 0,
duration: 400,
}
}
},
pop: {
content: {
x: {
from: 0,
to: 2000,
duration: 500,
},
}
}
}
});

[haiderali101]

For screen transition from Left to Right

Navigation.push(componentId, {
      component: {
        name: 'nameofcomponent',
        options: {
          animations: {
            push: {
              content: {
                  x: {
                      from: -1000,
                      to: 0,
                      duration: 0,
                  },
                },
            },
            pop: {
              content: {
                  x: {
                      from: 1000,
                      to: 0,
                      duration: 0,
                  },
                },
            },
          },
        },
      },
    });