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
feat: add screen "go back" transition animations based on gestures using Reanimated #1913
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
tboba
approved these changes
Jan 10, 2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Green mark from me, great job!
I just left two comments there. After that, let's merge this 🚀
This was referenced Jan 15, 2024
tboba
added a commit
that referenced
this pull request
Jan 22, 2024
## Description Unfortunately, because of changing the way how we export the components, I didn't saw the wrong export of GHContext in gesture-handler's `index.tsx` file. To match the changes from the PR with full screen swipe (#1913), I've created the directory in a wrong place. This PR fixes this export by moving the context to native-stack and removing the export from the gesture-handler/index.tsx. I'm also removing this export, because right now it's possible to import GHContext from `react-native-screens` and also from `react-native-screens/gesture-handler` which is wrong. ## Changes - Changed the export of GHContext in index.tsx - Moved GHContext from gesture-handler to native-stack ## Test code and steps to reproduce Try to build and run TestsExample - see if the bundling state passes correctly. Then, try to import GestureDetectorProvider and wrap whole navigator in it. ## Checklist - [X] Included code example that can be used to test this change - [x] Ensured that CI passes
8 tasks
WoLewicki
changed the title
feat: add full screen swipe
feat: add screen "go back" transition animations based on gestures using Reanimated
Jan 26, 2024
This was referenced Jan 31, 2024
github-merge-queue bot
pushed a commit
to software-mansion/react-native-reanimated
that referenced
this pull request
Mar 25, 2024
## Summary This pull request introduces a new feature which adds screen "go back" transition animations based on gestures. The feature is a collaboration between three libraries: `react-native-reanimated`, `react-native-screens`, and `react-native-gesture-handler`. Implementing this feature required changes in both Reanimated and RNScreens. You can find the related pull request in the `react-native-screens` repository: [PR 1913](software-mansion/react-native-screens#1913). Dependency requirements: - `react-native-reanimated@3.6+` - `react-native-screens@3.28+` - `react-native-gesture-handler@2+` A demo of this feature was presented at the RNCK meetup: [RNCK Meetup Demo](https://www.youtube.com/live/UYhOULSwjAg?si=YE55L6nw8z4FgZ9-&t=4523) ### API Overview #### Basic usage To use this feature, you need to import the `GestureDetectorProvider` from `react-native-screens/gesture-handler` and wrap your navigation container with it. Here's an example: ```js import { GestureDetectorProvider } from 'react-native-screens/gesture-handler'; <GestureHandlerRootView> <NavigationContainer> <GestureDetectorProvider> <Stack.Navigator screenOptions={{ stackAnimation: 'none', }}> <Stack.Screen name="ScreenA" component={ScreenA} /> <Stack.Screen name="ScreenB" component={ScreenB} options={{ goBackGesture: 'swipeRight', // gestures that trigger the screen transition }} /> </Stack.Navigator> </GestureDetectorProvider> </NavigationContainer> </GestureHandlerRootView> ``` Available gestures: - swipeRight - swipeLeft - swipeUp - swipeDown - verticalSwipe - horizontalSwipe - twoDimensionalSwipe #### Preset usage You can also use preset animations for the transition. Import `ScreenTransition` from `react-native-reanimated` and specify the desired preset in the `transitionAnimation` option. Example: ```js import { ScreenTransition } from 'react-native-reanimated'; <Stack.Screen name="ScreenB" component={ScreenB} options={{ goBackGesture: 'swipeRight', transitionAnimation: ScreenTransition.SwipeRightFade, // transition preset }} /> ``` Available presets: - SwipeRight - SwipeLeft - SwipeDown - SwipeUp - Horizontal - Vertical - TwoDimensional - SwipeRightFade You don't need to worry about the preset because each gesture is associated with a default transition preset. #### Custom Animation If you want to create a custom animation, you can define your own `AnimatedScreenTransition` object. Here's an example: ```js const customTransition: AnimatedScreenTransition = { topScreenFrame: (event, screenSize) => { 'worklet'; const progress = event.translationX / screenSize.width; return { transform: [ { translateX: 1.3 * event.translationX }, { rotate: 20 * progress + 'deg' } ] }; }, belowTopScreenFrame: (event, screenSize) => { 'worklet'; const progress = event.translationX / screenSize.width; return { transform: [ { scale: 0.7 + 0.3 * progress } ] }; }, } <Stack.Screen name="ScreenB" component={ScreenB} options={{ goBackGesture: 'swipeRight', transitionAnimation: customTransition }} /> ``` #### `screenEdgeGesture` To trigger a gesture that starts from the edge of the screen, you can use the `screenEdgeGesture` option. Example: ```js <Stack.Screen name="ScreenB" component={ScreenB} options={{ goBackGesture: 'swipeRight', screenEdgeGesture: true }} /> ``` This means you can trigger a transition with a gesture that starts from the edge of the screen. ## Test plan Test example from Example App
github-merge-queue bot
pushed a commit
to valora-inc/wallet
that referenced
this pull request
Apr 13, 2024
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-native-screens](https://togithub.com/software-mansion/react-native-screens) | [`^3.29.0` -> `^3.30.1`](https://renovatebot.com/diffs/npm/react-native-screens/3.29.0/3.30.1) | [![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-screens/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-screens/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-screens/3.29.0/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-screens/3.29.0/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>software-mansion/react-native-screens (react-native-screens)</summary> ### [`v3.30.1`](https://togithub.com/software-mansion/react-native-screens/releases/tag/3.30.1) [Compare Source](https://togithub.com/software-mansion/react-native-screens/compare/3.30.0...3.30.1) Patch release addressing an issue with building a package due to the missing submodule from `postinstall` command. #### 🔢 Miscellaneous - Remove postinstall step from package.json by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2081 **Full Changelog**: software-mansion/react-native-screens@3.30.0...3.30.1 ### [`v3.30.0`](https://togithub.com/software-mansion/react-native-screens/releases/tag/3.30.0) [Compare Source](https://togithub.com/software-mansion/react-native-screens/compare/3.29.0...3.30.0) Minor release including custom screen transitions, adding support for VisionOS, supporting `slide_from_left` animation on iOS and fixing other aspects (including wrong targets for touchable components on Fabric). Thanks for following along! 💙 **Note**: Please note that support for React Native versions lower than 0.68 have been **dropped**. Older versions may still continue to work with this and newer releases of react-native-screens, but bugs from deprecated versions will not be considered for repair. #### What's Changed #### 👍 Improvements - **Custom screen transitions** - In 3.30.0, we've introduced a support for custom transition animations while making a "go back" gesture. Made by [@​piaskowyk](https://togithub.com/piaskowyk) and [@​WoLewicki](https://togithub.com/WoLewicki) in [software-mansion/react-native-screens#1913 - **Support for VisionOS is here!** - From now, react-native-screens offers bundled support for VisionOS platform. Made by [@​okwasniewski](https://togithub.com/okwasniewski) in [software-mansion/react-native-screens#2025 - **`slide_from_left` transition on iOS** - You can use `slide_from_left` animation that will be used for pushing or popping a new screen. Made by [@​kirillzyusko](https://togithub.com/kirillzyusko) in [software-mansion/react-native-screens#2057 - Add `cancelSearch` command on SearchBar by [@​Jasonzj](https://togithub.com/Jasonzj) in [software-mansion/react-native-screens#1987 - Fixed Android screen stack animation by [@​janicduplessis](https://togithub.com/janicduplessis) in [software-mansion/react-native-screens#2019 #### 🐛 Bug fixes - Not working hitslop for headerRight/Left views by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#1995 - App freeze when navigating back from any modal nested in contained modal by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#1996 - Incorrect safe area on transparent modals using landscape orientation by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2008 - Invalid orientation of contained modals by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2011 - Modify the decorFitsSystemWindow parameter in setNavigationBarHidden by [@​jiyong1](https://togithub.com/jiyong1) in [software-mansion/react-native-screens#1988 - Avoid race condition related to state on the new arch by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-screens#2024 - Check for multiple screens while changing screen orientation by [@​uzegonemad](https://togithub.com/uzegonemad) in [software-mansion/react-native-screens#2035 - Fix setting incorrect measure with native header by [@​WoLewicki](https://togithub.com/WoLewicki) and [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2028 - Add notifying for header height change, fix header height values by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2075 - Change context while running `runOnUiQueueThread` on 0.73 with Bridgeless by [@​cortinico](https://togithub.com/cortinico) in [software-mansion/react-native-screens#2022 - Use reactApplicationContext in onScreenChanged by [@​WoLewicki](https://togithub.com/WoLewicki) in [software-mansion/react-native-screens#2046 - Remove calculating status bar height in useAnimatedHeaderHeight when header is not shown by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2033 - Handle setting `display` for `_viewConfig` attribute by [@​WoLewicki](https://togithub.com/WoLewicki) and [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2071 - Fix crash with searchResultsController in RNSSearchBar by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2004 - Add constraints for velocity in `goBackGesture` screen transition by [@​piaskowyk](https://togithub.com/piaskowyk) in [software-mansion/react-native-screens#2061 - Add view check for getting StackView in `goBackGesture` by [@​piaskowyk](https://togithub.com/piaskowyk) in [software-mansion/react-native-screens#2060 - Change default value of context of ScreenGestureDetector, add warning for goBackGesture by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2013 - Move GHContext from gesture-handler to native-stack by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2017 - Change default gesture from Tap to Fling, fix failing CI by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2023 #### 🔢 Miscellaneous - **Drop React Native 0.64 - 0.67 since 3.30.0** by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2036 - Remove mixed CJS/ESM, refactorize index.native.tsx by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#1982 - Add react-navigation as submodule & use it in test applications by [@​kkafar](https://togithub.com/kkafar) and [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#1993 - Unify member-field naming convention in Kotlin by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#1999 - Update compatibility table with supported RN versions with Fabric by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#2001 - Change name of `headerBackButtonClicked` event by [@​WoLewicki](https://togithub.com/WoLewicki) in [software-mansion/react-native-screens#2015 - Stabilize Android E2E tests by [@​kirillzyusko](https://togithub.com/kirillzyusko) in [software-mansion/react-native-screens#2062 - Update Podfiles in Example projects, update RN in FabricExample to 0.73 by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#1989 - Update React Native to 0.73.4, change Cocoapods version by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2032 - Configure yarn version in package.json by [@​bakkerjoeri](https://togithub.com/bakkerjoeri) in [software-mansion/react-native-screens#2077 - Bump ip from 1.1.8 to 1.1.9 by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-screens#2038 - Bump ip from 1.1.8 to 1.1.9 in example apps by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2044 #### New Contributors - [@​jiyong1](https://togithub.com/jiyong1) made their first contribution in [software-mansion/react-native-screens#1988 - [@​Jasonzj](https://togithub.com/Jasonzj) made their first contribution in [software-mansion/react-native-screens#1987 - [@​j-piasecki](https://togithub.com/j-piasecki) made their first contribution in [software-mansion/react-native-screens#2024 - [@​cortinico](https://togithub.com/cortinico) made their first contribution in [software-mansion/react-native-screens#2022 - [@​okwasniewski](https://togithub.com/okwasniewski) made their first contribution in [software-mansion/react-native-screens#2025 - [@​uzegonemad](https://togithub.com/uzegonemad) made their first contribution in [software-mansion/react-native-screens#2035 - [@​bakkerjoeri](https://togithub.com/bakkerjoeri) made their first contribution in [software-mansion/react-native-screens#2077 #### 🙌 Thank you for your contributions! **Full Changelog**: software-mansion/react-native-screens@3.29.0...3.30.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:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: valora-bot <valorabot@valoraapp.com>
✅ If anyone face "Reanimated" issue then it may solve your problem 👇 |
shottah
pushed a commit
to zed-io/kolektivo
that referenced
this pull request
May 15, 2024
…inc#5239) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-native-screens](https://togithub.com/software-mansion/react-native-screens) | [`^3.29.0` -> `^3.30.1`](https://renovatebot.com/diffs/npm/react-native-screens/3.29.0/3.30.1) | [![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-screens/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-screens/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-screens/3.29.0/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-screens/3.29.0/3.30.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>software-mansion/react-native-screens (react-native-screens)</summary> ### [`v3.30.1`](https://togithub.com/software-mansion/react-native-screens/releases/tag/3.30.1) [Compare Source](https://togithub.com/software-mansion/react-native-screens/compare/3.30.0...3.30.1) Patch release addressing an issue with building a package due to the missing submodule from `postinstall` command. #### 🔢 Miscellaneous - Remove postinstall step from package.json by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2081 **Full Changelog**: software-mansion/react-native-screens@3.30.0...3.30.1 ### [`v3.30.0`](https://togithub.com/software-mansion/react-native-screens/releases/tag/3.30.0) [Compare Source](https://togithub.com/software-mansion/react-native-screens/compare/3.29.0...3.30.0) Minor release including custom screen transitions, adding support for VisionOS, supporting `slide_from_left` animation on iOS and fixing other aspects (including wrong targets for touchable components on Fabric). Thanks for following along! 💙 **Note**: Please note that support for React Native versions lower than 0.68 have been **dropped**. Older versions may still continue to work with this and newer releases of react-native-screens, but bugs from deprecated versions will not be considered for repair. #### What's Changed #### 👍 Improvements - **Custom screen transitions** - In 3.30.0, we've introduced a support for custom transition animations while making a "go back" gesture. Made by [@​piaskowyk](https://togithub.com/piaskowyk) and [@​WoLewicki](https://togithub.com/WoLewicki) in [software-mansion/react-native-screens#1913 - **Support for VisionOS is here!** - From now, react-native-screens offers bundled support for VisionOS platform. Made by [@​okwasniewski](https://togithub.com/okwasniewski) in [software-mansion/react-native-screens#2025 - **`slide_from_left` transition on iOS** - You can use `slide_from_left` animation that will be used for pushing or popping a new screen. Made by [@​kirillzyusko](https://togithub.com/kirillzyusko) in [software-mansion/react-native-screens#2057 - Add `cancelSearch` command on SearchBar by [@​Jasonzj](https://togithub.com/Jasonzj) in [software-mansion/react-native-screens#1987 - Fixed Android screen stack animation by [@​janicduplessis](https://togithub.com/janicduplessis) in [software-mansion/react-native-screens#2019 #### 🐛 Bug fixes - Not working hitslop for headerRight/Left views by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#1995 - App freeze when navigating back from any modal nested in contained modal by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#1996 - Incorrect safe area on transparent modals using landscape orientation by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2008 - Invalid orientation of contained modals by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2011 - Modify the decorFitsSystemWindow parameter in setNavigationBarHidden by [@​jiyong1](https://togithub.com/jiyong1) in [software-mansion/react-native-screens#1988 - Avoid race condition related to state on the new arch by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-screens#2024 - Check for multiple screens while changing screen orientation by [@​uzegonemad](https://togithub.com/uzegonemad) in [software-mansion/react-native-screens#2035 - Fix setting incorrect measure with native header by [@​WoLewicki](https://togithub.com/WoLewicki) and [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2028 - Add notifying for header height change, fix header height values by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2075 - Change context while running `runOnUiQueueThread` on 0.73 with Bridgeless by [@​cortinico](https://togithub.com/cortinico) in [software-mansion/react-native-screens#2022 - Use reactApplicationContext in onScreenChanged by [@​WoLewicki](https://togithub.com/WoLewicki) in [software-mansion/react-native-screens#2046 - Remove calculating status bar height in useAnimatedHeaderHeight when header is not shown by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2033 - Handle setting `display` for `_viewConfig` attribute by [@​WoLewicki](https://togithub.com/WoLewicki) and [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2071 - Fix crash with searchResultsController in RNSSearchBar by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2004 - Add constraints for velocity in `goBackGesture` screen transition by [@​piaskowyk](https://togithub.com/piaskowyk) in [software-mansion/react-native-screens#2061 - Add view check for getting StackView in `goBackGesture` by [@​piaskowyk](https://togithub.com/piaskowyk) in [software-mansion/react-native-screens#2060 - Change default value of context of ScreenGestureDetector, add warning for goBackGesture by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2013 - Move GHContext from gesture-handler to native-stack by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2017 - Change default gesture from Tap to Fling, fix failing CI by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2023 #### 🔢 Miscellaneous - **Drop React Native 0.64 - 0.67 since 3.30.0** by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2036 - Remove mixed CJS/ESM, refactorize index.native.tsx by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#1982 - Add react-navigation as submodule & use it in test applications by [@​kkafar](https://togithub.com/kkafar) and [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#1993 - Unify member-field naming convention in Kotlin by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#1999 - Update compatibility table with supported RN versions with Fabric by [@​kkafar](https://togithub.com/kkafar) in [software-mansion/react-native-screens#2001 - Change name of `headerBackButtonClicked` event by [@​WoLewicki](https://togithub.com/WoLewicki) in [software-mansion/react-native-screens#2015 - Stabilize Android E2E tests by [@​kirillzyusko](https://togithub.com/kirillzyusko) in [software-mansion/react-native-screens#2062 - Update Podfiles in Example projects, update RN in FabricExample to 0.73 by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#1989 - Update React Native to 0.73.4, change Cocoapods version by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2032 - Configure yarn version in package.json by [@​bakkerjoeri](https://togithub.com/bakkerjoeri) in [software-mansion/react-native-screens#2077 - Bump ip from 1.1.8 to 1.1.9 by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-screens#2038 - Bump ip from 1.1.8 to 1.1.9 in example apps by [@​tboba](https://togithub.com/tboba) in [software-mansion/react-native-screens#2044 #### New Contributors - [@​jiyong1](https://togithub.com/jiyong1) made their first contribution in [software-mansion/react-native-screens#1988 - [@​Jasonzj](https://togithub.com/Jasonzj) made their first contribution in [software-mansion/react-native-screens#1987 - [@​j-piasecki](https://togithub.com/j-piasecki) made their first contribution in [software-mansion/react-native-screens#2024 - [@​cortinico](https://togithub.com/cortinico) made their first contribution in [software-mansion/react-native-screens#2022 - [@​okwasniewski](https://togithub.com/okwasniewski) made their first contribution in [software-mansion/react-native-screens#2025 - [@​uzegonemad](https://togithub.com/uzegonemad) made their first contribution in [software-mansion/react-native-screens#2035 - [@​bakkerjoeri](https://togithub.com/bakkerjoeri) made their first contribution in [software-mansion/react-native-screens#2077 #### 🙌 Thank you for your contributions! **Full Changelog**: software-mansion/react-native-screens@3.29.0...3.30.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:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: valora-bot <valorabot@valoraapp.com>
This was referenced May 22, 2024
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.
Summary
This pull request introduces a new feature which adds screen "go back" transition animations based on gestures. The feature is a collaboration between three libraries:
react-native-reanimated
,react-native-screens
, andreact-native-gesture-handler
. Implementing this feature required changes in both Reanimated and RNScreens. You can find the related pull request in thereact-native-reanimated
repository: PR 1913.Dependency requirements:
react-native-reanimated@3.6+
react-native-screens@3.28+
react-native-gesture-handler@2+
A demo of this feature was presented at the RNCK meetup: RNCK Meetup Demo
API Overview
Basic usage
To use this feature, you need to import the
GestureDetectorProvider
fromreact-native-screens/gesture-handler
and wrap your navigation container with it. Here's an example:Available gestures:
Preset usage
You can also use preset animations for the transition. Import
ScreenTransition
fromreact-native-reanimated
and specify the desired preset in thetransitionAnimation
option. Example:Available presets:
You don't need to worry about the preset because each gesture is associated with a default transition preset.
Custom Animation
If you want to create a custom animation, you can define your own
AnimatedScreenTransition
object. Here's an example:screenEdgeGesture
To trigger a gesture that starts from the edge of the screen, you can use the
screenEdgeGesture
option. Example:This means you can trigger a transition with a gesture that starts from the edge of the screen.
Test plan
Test example from Example App