feat: over keyboard view #589

kirillzyusko · 2024-09-20T07:55:28Z

📜 Description

Added OverKeyboardView component.

💡 Motivation and Context

From an implementation perspective I think it's worth to note that there are only one way to implement that:

on Android we need to attach a view directly to WindowManager with TYPE_APPLICATION_PANEL;
on iOS we need to attach view directly to UIRemoteKeyboardWindow (prior to iOS 16 it was possible to attach just as a last window, but starting from iOS 16 the UIRemoteKeyboardWindow gets hidden in window list);

So in this PR I used approaches from above to achieve this.

From an unusual things:

on Android we need to stretch first children to screen size manually - it's done via custom ShadowNode and overwriting lifecycle method;
on iOS we have to do the same, but I couldn't achieve this from a native code, so I specified styles in JS code;
on iOS touch handlers from Detox are not working (I don't know why - plaing touchable system and RNGH works fine);
on Android if touch gets unhandled then application will instantly crash - that's why I wrapped the OverKeyboardView in TouchableWithoutFeedback.

Closes #373

📢 Changelog

Docs

added a page in API section;
added to feature comparison;
added a new line in README;
added a new keyword in package.json;

E2E

added new test for OverKeybaordView;

JS

added OverKeyboardView view;
added unit-tests for new component;
added new mocks;
added example screen with usage of new component;

iOS

export new OverKeyboardView component;
added new UIWindow.topWindow extension;

Android

export new OverKeyboardView component;
added new getDisplaySize extension;

🤔 How Has This Been Tested?

Tested manually on:

iPhone 6s (iOS 15, real device);
iPhone 15 Pro (iOS 17.5, simulator);
iPhone 11 (iOS 18, real device);
Xiaomi Redmi Note 5 Pro (Android 9, real device)
Pixel 7 Pro (Android 14, real device);
Pixel 3a (Android 13, emulator);

📸 Screenshots (if appropriate):

Android	iOS

📝 Checklist

CI successfully passed
I added new mocks and corresponding unit-tests if library API was changed

github-actions · 2024-09-20T07:57:11Z

PR Preview Action v1.4.8
🚀 Deployed preview to https://kirillzyusko.github.io/react-native-keyboard-controller/pr-preview/pr-589/
on branch `gh-pages` at 2024-09-23 09:30 UTC

argos-ci · 2024-09-20T07:58:42Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Sep 23, 2024, 9:32 AM

github-actions · 2024-09-20T08:10:22Z

📊 Package size report

Current size	Target Size	Difference
155924 bytes	148737 bytes	7187 bytes 📈

## 📜 Description Fixed integration of `GestureDetector` inside `OverKeyboardView`. ## 💡 Motivation and Context The problem came to the fact that `TouchableWithoutFeedback` kind of intercepted touches and `GestureDetector` didn't receive it. I added `TouchableWithoutFeedback` in #589 - in that PR it was reasonable to keep it there as it prevented crashes when touch gets handled by `rootView`. However in most cases developers will wrap area in `OverKeyboardView` in `Touchable*` to handle closing of their views, so now for me it seems to be safe to remove it. The second thing is that if we apply styles to stretch inner view in JS then `GestureDetector` becomes broken again. I added this fix as iOS only and back to the time I haven't discovered any issues on Android. Now I see, that it introduces some edge-case bugs, so I apply this style/fix conditionally (iOS only). Applying these 2 fixes `GestureDetector` can work in `OverKeyboardView`. Fixes an issue discovered in #599 ## 📢 Changelog    ### JS - removed `TouchableWithoutFeedback`; - apply `width`/`height` style only for `ios`. ## 🤔 How Has This Been Tested? Tested manually on Pixel 3a (API 33, emulator) and Pixel 7 Pro (API 34, real device). ## 📸 Screenshots (if appropriate): |Before|After| |-------|-----| |<video src="https://github.com/user-attachments/assets/b26347e8-38ee-48b8-ba2c-2a5f4a354c70">|<video src="https://github.com/user-attachments/assets/5b54733b-9f2d-4c73-80ce-441c1f43c7a6">| ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed

kirillzyusko added 30 commits September 16, 2024 10:06

feat: initial changes

2e3273d

feat: working PoC

43b9d11

feat: continue implementation

f39f402

fix: attempt to fix touchables

eedaba9

fix: touches

96c0122

fix: hot reload

7815fc4

fix: show and hide multiple times

08863bd

fix: stretch first children to full screen height

cdd18cf

docs: add a new page for docs

9d43e37

docs: added lottie animation

185a8ae

docs: update keywords and main description

03e06af

docs: update TODO list

06e1a33

docs: update keywords

c9e377c

feat: iOS implementation scratch

3dc53b4

feat: move implementation further

ec93fcf

docs: update TODO list

eb47a4a

fix: touches on iOS

45ccf98

feat: continue the implementation

12b31b8

fix: attempt to add blur

9d4dbee

feat: move implementation further

ee24129

feat: Android fabric

25ad017

chore: migrate swift code to ObjC++

3d53d89

fix: add new mock

c7226f0

feat: iOS fabric support

b2289f9

chore: update unit tests

a0007b4

fix: formatters

57c8140

fix: code cleanup, add testIds

4d188f5

e2e: added e2e tests

8cc986d

fix: looks like hot reloading works on iOS too

1a2e838

fix: RNGH on iOS

bcc6bb9

kirillzyusko added 2 commits September 19, 2024 14:47

docs: new lottie animation

ba7c5ca

docs: update docs page

3d99633

kirillzyusko added documentation Improvements or additions to documentation enhancement New feature or request e2e Anything about E2E tests tests You added or changed unit tests labels Sep 20, 2024

kirillzyusko self-assigned this Sep 20, 2024

kirillzyusko added the OverKeyboardView Anything related to OverKeyboardView label Sep 20, 2024

kirillzyusko added 3 commits September 20, 2024 09:58

docs: compress lottie

60e8271

fix: swiftlint

3113b29

fix: typescript

6eb444d

kirillzyusko added 9 commits September 20, 2024 10:50

fix: typos, ts lint

cdb197b

fix: android lint

fb3e2eb

chore: rename screen title to match example app

5b85a37

fix: e2e tests

195c518

fix: remaining CI

3660448

chore: changes after self review

780d5ac

chore: more clean up

156c359

docs: add limitations section

efcd33c

chore: final cleanup

0e0af40

kirillzyusko marked this pull request as ready for review September 23, 2024 09:21

kirillzyusko merged commit bc8d3b7 into main Sep 23, 2024
34 checks passed

kirillzyusko deleted the feat/over-keyboard-view branch September 23, 2024 10:35

This was referenced Sep 25, 2024

fix: KeyboardAwareScrollView + gesture-handler #595

Merged

fix: non working GestureDetector inside OverKeyboardView #602

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: over keyboard view #589

feat: over keyboard view #589

kirillzyusko commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024 •

edited

Loading

argos-ci bot commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024 •

edited

Loading

feat: over keyboard view #589

feat: over keyboard view #589

Conversation

kirillzyusko commented Sep 20, 2024 • edited Loading

📜 Description

💡 Motivation and Context

📢 Changelog

Docs

E2E

JS

iOS

Android

🤔 How Has This Been Tested?

📸 Screenshots (if appropriate):

📝 Checklist

github-actions bot commented Sep 20, 2024 • edited Loading

argos-ci bot commented Sep 20, 2024 • edited Loading

github-actions bot commented Sep 20, 2024 • edited Loading

📊 Package size report

kirillzyusko commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024 •

edited

Loading

argos-ci bot commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024 •

edited

Loading