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

feat(Android): Add focused states on page transitions #1894

Merged
merged 4 commits into from
Sep 20, 2023

Conversation

tboba
Copy link
Member

@tboba tboba commented Sep 18, 2023

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

  • 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

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

  • Ensured that CI passes

@tboba tboba requested a review from kkafar September 18, 2023 12:41
@tboba tboba self-assigned this Sep 18, 2023
Copy link

@yusufyildirim yusufyildirim left a 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!

Copy link
Member

@kkafar kkafar left a 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

Copy link
Member

@kkafar kkafar left a 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?

@tboba
Copy link
Member Author

tboba commented Sep 20, 2023

@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 😛

@tboba tboba merged commit bc83c9b into main Sep 20, 2023
4 checks passed
@tboba tboba deleted the @tboba/fix-android-tv-focus branch September 20, 2023 07:56
renovate bot referenced this pull request in valora-inc/wallet Nov 2, 2023
[![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
[@&#8203;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
[@&#8203;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
[@&#8203;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 [@&#8203;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 [@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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

- [@&#8203;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)
-
[@&#8203;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)
- [@&#8203;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]>
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this pull request Oct 9, 2024
…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
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

Successfully merging this pull request may close these issues.

[ANDROID TV] Focus gets lost between page transitions
3 participants