-
-
Notifications
You must be signed in to change notification settings - Fork 527
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(Android): Add focused states on page transitions #1894
Conversation
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.
Sort of nit: It might be better to preserve findLastFocusedChild
function's responsibility and move the if(isTelevision())
logic to the actual spot where you call the function. Awesome work!
android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt
Outdated
Show resolved
Hide resolved
android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt
Outdated
Show resolved
Hide resolved
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.
Left some comment below
android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt
Outdated
Show resolved
Hide resolved
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.
Has the "recommended way" started working?
@kkafar Yep, it works now - however, I'm not satisfied with it, as it checks the feature inside the OS - not the device. Just a small note for us - if there will be an opportunity to add support for watches, car infotainments or something similar maybe we should reconsider using the old way of checking the device 😛 |
[![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.25.0` -> `^3.26.0`](https://renovatebot.com/diffs/npm/react-native-screens/3.25.0/3.26.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-screens/3.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-screens/3.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-screens/3.25.0/3.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-screens/3.25.0/3.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>software-mansion/react-native-screens (react-native-screens)</summary> ### [`v3.26.0`](https://togithub.com/software-mansion/react-native-screens/releases/tag/3.26.0) [Compare Source](https://togithub.com/software-mansion/react-native-screens/compare/3.25.0...3.26.0) Minor release adding new useAnimatedHeaderHeight and useReanimatedHeaderHeight hooks, providing fixes for search bar and introducing internal changes. *Please note that new hooks introduced in this release are fully functional on Paper, on Fabric there are few edge cases we are still working on*. #### What's Changed #### 🐛 Bug fixes - Change implementation of `headerConfig` prop on Android by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1883](https://togithub.com/software-mansion/react-native-screens/pull/1883) - Change elements visibility on search bar open by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1903](https://togithub.com/software-mansion/react-native-screens/pull/1903) - Fix positioning of large header and search bar by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1895](https://togithub.com/software-mansion/react-native-screens/pull/1895) - Change implementation of calculating status bar, refactor methods used on header height change by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1917](https://togithub.com/software-mansion/react-native-screens/pull/1917) - Fix calculating header height when changing status/action bar visibility by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1922](https://togithub.com/software-mansion/react-native-screens/pull/1922) - Allow Reanimated Screen to check large header by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1915](https://togithub.com/software-mansion/react-native-screens/pull/1915) - Fix issue when emptying nav stack on Windows by [@​chrisglein](https://togithub.com/chrisglein) in [https://github.com/software-mansion/react-native-screens/pull/1890](https://togithub.com/software-mansion/react-native-screens/pull/1890) - Update podspec to use install_modules_dependencies by [@​cipolleschi](https://togithub.com/cipolleschi) in [https://github.com/software-mansion/react-native-screens/pull/1920](https://togithub.com/software-mansion/react-native-screens/pull/1920) - Remove MaxPerm args from JVM invocation by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1888](https://togithub.com/software-mansion/react-native-screens/pull/1888) #### 👍 Improvements - Calculate values of useHeaderHeight natively by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1802](https://togithub.com/software-mansion/react-native-screens/pull/1802) - Allow for different fragment types inside ScreenContainer by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1887](https://togithub.com/software-mansion/react-native-screens/pull/1887) - Add focused states on page transitions by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1894](https://togithub.com/software-mansion/react-native-screens/pull/1894) #### 🔢 Miscellaneous - **Create FUNDING.yml by [@​aleqsio](https://togithub.com/aleqsio) in [https://github.com/software-mansion/react-native-screens/pull/1886](https://togithub.com/software-mansion/react-native-screens/pull/1886)** - Migrate from deprecated `RCTEventEmitter` by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1867](https://togithub.com/software-mansion/react-native-screens/pull/1867) - Use `require` syntax for resolution of all native components by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1909](https://togithub.com/software-mansion/react-native-screens/pull/1909) - Run Android e2e with JDK 17 by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1892](https://togithub.com/software-mansion/react-native-screens/pull/1892) - Put timelimit on execution of each workflow by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1893](https://togithub.com/software-mansion/react-native-screens/pull/1893) - Trigger e2e tests on JS-only changes by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1910](https://togithub.com/software-mansion/react-native-screens/pull/1910) - Update deprecated expo install instructions to `npx expo install` by [@​GabrieldosSantosOliveira](https://togithub.com/GabrieldosSantosOliveira) in [https://github.com/software-mansion/react-native-screens/pull/1899](https://togithub.com/software-mansion/react-native-screens/pull/1899) - Bump activesupport from 6.1.7.3 to 7.0.7.2 in /TestsExample by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-screens/pull/1877](https://togithub.com/software-mansion/react-native-screens/pull/1877) - Update deps & RN in example apps after release by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1878](https://togithub.com/software-mansion/react-native-screens/pull/1878) - Migrate `Example` app & e2e tests to RN 0.72.4 by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1880](https://togithub.com/software-mansion/react-native-screens/pull/1880) - Bump library deps to recent versions (including RN) by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1881](https://togithub.com/software-mansion/react-native-screens/pull/1881) - Bump library native Android deps & config by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1891](https://togithub.com/software-mansion/react-native-screens/pull/1891) #### New Contributors - [@​chrisglein](https://togithub.com/chrisglein) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1890](https://togithub.com/software-mansion/react-native-screens/pull/1890) - [@​GabrieldosSantosOliveira](https://togithub.com/GabrieldosSantosOliveira) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1899](https://togithub.com/software-mansion/react-native-screens/pull/1899) - [@​cipolleschi](https://togithub.com/cipolleschi) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1920](https://togithub.com/software-mansion/react-native-screens/pull/1920) **Full Changelog**: software-mansion/react-native-screens@3.25.0...3.26.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:eyJjcmVhdGVkSW5WZXIiOiIzNy4xOS4yIiwidXBkYXRlZEluVmVyIjoiMzcuMTkuMiIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: valora-bot <[email protected]> Co-authored-by: Silas Boyd-Wickizer <[email protected]> Co-authored-by: Silas Boyd-Wickizer <[email protected]>
…on#1894) ## Description Currently, on Android TV devices when user is switching between views the last focused child is lost. This seems like an incorrect behavior - In software-mansion#1706 people are reporting that on Android TV the last focused element should be stored. This PR introduces the change to remember last focused element on previous screen. For now I've added a statement that the last element should be stored only for Android TV, but we should discuss if we also should store those elements for classic Android - I've noticed that it's possible to focus an element on a normal screen, but I've achieved it only by switching between elements with arrows on keyboard (so is it possible to focus an element just by touching a screen? Maybe TalkBack is also focusing the elements?). <details><summary> Focusing elements on Android </summary> https://github.com/software-mansion/react-native-screens/assets/23281839/4f62ae66-f411-4c45-b678-1e47c3fa4ff2 </details> Fixes software-mansion#1706. ## Changes - Added `isTelevision` method that checks if user is currently using Android TV. - Added `lastFocusedChild` variable with an implementation for finding last focused elements. ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before https://github.com/software-mansion/react-native-screens/assets/23281839/0e3e0ad4-a202-43c3-b688-6c66f76a43f8 ### After https://github.com/software-mansion/react-native-screens/assets/23281839/998dfa5c-6def-47f2-b129-425a2257319a ## Test code and steps to reproduce You can test those changes on `Example` application by switching between examples with arrows on the keyboard. ## Checklist - [ ] Ensured that CI passes
Description
Currently, on Android TV devices when user is switching between views the last focused child is lost. This seems like an incorrect behavior - In #1706 people are reporting that on Android TV the last focused element should be stored.
This PR introduces the change to remember last focused element on previous screen.
For now I've added a statement that the last element should be stored only for Android TV, but we should discuss if we also should store those elements for classic Android - I've noticed that it's possible to focus an element on a normal screen, but I've achieved it only by switching between elements with arrows on keyboard (so is it possible to focus an element just by touching a screen? Maybe TalkBack is also focusing the elements?).
Focusing elements on Android
Changing.state.on.mobile.mov
Fixes #1706.
Changes
isTelevision
method that checks if user is currently using Android TV.lastFocusedChild
variable with an implementation for finding last focused elements.Screenshots / GIFs
Here you can add screenshots / GIFs documenting your change.
You can add before / after section if you're changing some behavior.
Before
Before.mov
After
After.mov
Test code and steps to reproduce
You can test those changes on
Example
application by switching between examples with arrows on the keyboard.Checklist