Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android: scenes transition vertically instead of horizontally #2903

Closed
Twinbird24 opened this issue Feb 26, 2018 · 3 comments
Closed

Android: scenes transition vertically instead of horizontally #2903

Twinbird24 opened this issue Feb 26, 2018 · 3 comments

Comments

@Twinbird24
Copy link

Twinbird24 commented Feb 26, 2018

I'm having a problem where, on android, the transitions between scenes/ pages is vertical, instead of horizontal. I was thinking I could add a prop to a scene, like so: <Scene direction="leftToRight" /> but this does not work. How should I go about fixing the transitions on android devices?

Version

  • react-native-router-flux v4.0.0-beta.22
  • react-native v0.49.3

Expected behaviour

Scenes transition horizontally (i.e. left-to-right) on both android and iOS devices.

Actual behaviour

On android: scenes transition vertically (from bottom-to-top) instead of horizontally like they do in iOS.

Steps to reproduce

  1. Set up project with multiple sciences. i.e.
<Router>
      <Stack>
        <Scene />
        <Scene />
        ...
  1. Navigate between scenes
  2. Should see iOS transitions vertically, while android transitions pages horizontally

I've tried <Stack key="root" transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal })}> but this throws an error: undefined is not a function (evaluating 'addListener'. Please do not link to #2628 and close this issue, because I've read through that thread and I'm still having issues.

@Dorentin1997
Copy link

Dorentin1997 commented Feb 27, 2018

Import this at the file you register scenes.
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

And Add this to transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal })}
to your stack like this :
<Stack key="root" hideNavBar={true} transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal })}>

Edit : this error may occur of react-native-router-flux version i had this error before. I am using version
"react-native-router-flux": "^4.0.0-beta.26", now and it`s working perfectly fine.

@Blapi
Copy link
Collaborator

Blapi commented Feb 27, 2018

Show your main file with all your Scenes, as well as your imports please

@Twinbird24
Copy link
Author

Twinbird24 commented Feb 27, 2018

@Dorentin1997 upgrading react-native-router-flux from v4.0.0-beta.22 to 4.0.0-beta.26 fixed it for me, thank you! Closing issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants