feat(Android): add ios like slide animation #1945
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fobos531
suggested changes
Oct 23, 2023
tboba
requested changes
Oct 24, 2023
There was a problem hiding this comment.
Hey @alexandrius, great job! Thanks for creating the PR 🥳
Just left some comments there
tboba
reviewed
Oct 24, 2023
tboba
approved these changes
Oct 27, 2023
There was a problem hiding this comment.
LGTM! 👍
@WoLewicki @kkafar could you check if the ios name for the animation would fit there? I'm for it, but just want to know your opinion about it.
|
I don't have an idea for a better name so seems OK to me 😅 |
|
Let's get this merged then 🎉 |
|
Hi @alexandrius! I'm happy to say that we've released new version of react-native-screens (3.29.0) which has this change included! 🥳 Check it out! If you find something wrong related to the newest version (this change is still buggy or doesn't work for you) let us know 🎉 |
renovate bot
referenced
this pull request
in valora-inc/wallet
Jan 8, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-native-screens](https://github.com/software-mansion/react-native-screens) | [`^3.27.0` -> `^3.29.0`](https://renovatebot.com/diffs/npm/react-native-screens/3.27.0/3.29.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>software-mansion/react-native-screens (react-native-screens)</summary> ### [`v3.29.0`](https://github.com/software-mansion/react-native-screens/releases/tag/3.29.0) [Compare Source](https://github.com/software-mansion/react-native-screens/compare/3.28.0...3.29.0) Minor release including fix for iOS that was accidentally omitted from 3.28.0. It should be now possible to present modal in outer stack, from modal in nested stack (😄 ) #### What's Changed #### 🐛 Bug fixes - fix(iOS): select correct VC for nested modal presentation by [@​kkafar](https://github.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1912](https://github.com/software-mansion/react-native-screens/pull/1912) **Full Changelog**: software-mansion/react-native-screens@3.28.0...3.29.0 ### [`v3.28.0`](https://github.com/software-mansion/react-native-screens/releases/tag/3.28.0) [Compare Source](https://github.com/software-mansion/react-native-screens/compare/3.27.0...3.28.0) Minor release adding a support for **React Native 0.73**, adding new iOS-like slide animation, fixing crashes with AVPlayer on iOS and resolving build issues on Android. #### What's Changed #### 🐛 Bug fixes - Update status bar & orientation in screen stack fragment by [@​delphinebugner](https://github.com/delphinebugner) in [https://github.com/software-mansion/react-native-screens/pull/1934](https://github.com/software-mansion/react-native-screens/pull/1934) - Set stateWrapper in ScreenViewManager in Fabric by [@​joemun](https://github.com/joemun) in [https://github.com/software-mansion/react-native-screens/pull/1944](https://github.com/software-mansion/react-native-screens/pull/1944) - Don't include AVPlayerView in `traverseForScrollView` method by [@​tboba](https://github.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1969](https://github.com/software-mansion/react-native-screens/pull/1969) - Fix error about duplicate class ViewModelLazy by [@​tboba](https://github.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1977](https://github.com/software-mansion/react-native-screens/pull/1977) - Move DelayedFreeze setImmediate into an effect by [@​amadeus](https://github.com/amadeus) in [https://github.com/software-mansion/react-native-screens/pull/1980](https://github.com/software-mansion/react-native-screens/pull/1980) #### 👍 Improvements - Add ios like slide animation by [@​alexandrius](https://github.com/alexandrius) in [https://github.com/software-mansion/react-native-screens/pull/1945](https://github.com/software-mansion/react-native-screens/pull/1945) #### 🔢 Miscellaneous - Support for RN 0.73 by [@​kkafar](https://github.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1956](https://github.com/software-mansion/react-native-screens/pull/1956) - Use JDK 17 for CI builds as required for RN 0.73 by [@​kkafar](https://github.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1957](https://github.com/software-mansion/react-native-screens/pull/1957) - Update Podfile.lock files in example projects by [@​tboba](https://github.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1979](https://github.com/software-mansion/react-native-screens/pull/1979) #### New Contributors - [@​delphinebugner](https://github.com/delphinebugner) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1934](https://github.com/software-mansion/react-native-screens/pull/1934) - [@​joemun](https://github.com/joemun) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1944](https://github.com/software-mansion/react-native-screens/pull/1944) - [@​alexandrius](https://github.com/alexandrius) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1945](https://github.com/software-mansion/react-native-screens/pull/1945) - [@​amadeus](https://github.com/amadeus) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1980](https://github.com/software-mansion/react-native-screens/pull/1980) **Full Changelog**: software-mansion/react-native-screens@3.27.0...3.28.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone America/Los_Angeles. 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/valora-inc/wallet). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xMjEuMCIsInVwZGF0ZWRJblZlciI6IjM3LjEyMS4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: valora-bot <valorabot@valoraapp.com>
48 tasks
This was referenced May 22, 2024
This was referenced May 25, 2024
This was referenced Jun 3, 2024
8 tasks
kkafar
pushed a commit
that referenced
this pull request
Sep 25, 2024
## Description <!-- Description and motivation for this PR. Include Fixes #<number> if this is fixing some issue. Fixes # . --> This PR is based on #1945 and implements the `ios` animation in the reverse direction (slide in from left to right, slide out from right to left) ## Changes <!-- Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section. For example: - Updated `about.md` docs --> <!-- ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before ### After --> ## Test code and steps to reproduce <!-- Please include code that can be used to test this change and short description how this example should work. This snippet should be as minimal as possible and ready to be pasted into editor (don't exclude exports or remove "not important" parts of reproduction example) --> ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation: <!-- For adding new props to native-stack --> - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes
ja1ns
pushed a commit
to WiseOwlTech/react-native-screens
that referenced
this pull request
Oct 9, 2024
](https://renovatebot.com){kind=link}
## Description This PR adds iOS like slide in animation to Android. But why? iOS like slide in animations are extremely popular in Android apps. Twitter, Telegram, Slack and many other apps stack navigation resembles or flat out copies iOS behaviour. `react-navigation` non native stack gives us ability to have reimplementation of iOS slide in behavior. However, `expo-router` doesn't support non native stack. Besides that if you want native performance and iOS like behavior you are kinda stuck 🤷. ## Changes <!-- Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section. For example: - Updated `about.md` docs --> <!-- PR updates: `native-stack/GUIDE_FOR_LIBRARY_AUTHORS.md` `native-stack/README.md` `src/types.tsx` Additionally adds entries to iOS and Windows ## Screenshots / GIFs https://github.com/software-mansion/react-native-screens/assets/5978212/68541271-7bc7-4417-b004-17be2b855c05 ## Test code and steps to reproduce - Run the Example app - Go to Animations - Press on "Stack Animation: default" - Choose `cupertino` - Play around the push/pop ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation: <!-- For adding new props to native-stack --> - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes
ja1ns
pushed a commit
to WiseOwlTech/react-native-screens
that referenced
this pull request
Oct 9, 2024
…-mansion#2328) ## Description <!-- Description and motivation for this PR. Include Fixes #<number> if this is fixing some issue. Fixes # . --> This PR is based on software-mansion#1945 and implements the `ios` animation in the reverse direction (slide in from left to right, slide out from right to left) ## Changes <!-- Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section. For example: - Updated `about.md` docs --> <!-- ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before ### After --> ## Test code and steps to reproduce <!-- Please include code that can be used to test this change and short description how this example should work. This snippet should be as minimal as possible and ready to be pasted into editor (don't exclude exports or remove "not important" parts of reproduction example) --> ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation: <!-- For adding new props to native-stack --> - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds iOS like slide in animation to Android.
But why?
iOS like slide in animations are extremely popular in Android apps. Twitter, Telegram, Slack and many other apps stack navigation resembles or flat out copies iOS behaviour.
react-navigationnon native stack gives us ability to have reimplementation of iOS slide in behavior. However,expo-routerdoesn't support non native stack. Besides that if you want native performance and iOS like behavior you are kinda stuck 🤷.Changes