react / react/react-native

KeyboardAvoidingView Android white area when keyboard open/close

Đang mở
#32,612 27 bình luận 19 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

API: Keyboard Component: KeyboardAvoidingView Needs: Triage :mag: Platform: Android
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

Description

When using KeyboardAvoidingView on android, whatever the configuration I use for the behavior or the keyboardVerticalOffset I always have a white area when the keyboard is opening or closing while on iOS everything is moving smoothly.

https://user-images.githubusercontent.com/21194324/142198993-243f9d37-07ae-4b10-bc7d-2357867629fb.mp4

In the video, we can see that when the keyboard opens there is a big white area and when closing sometimes a small white rectangle with some flickering. I'm wondering if this is normal behavior because on iOS it transitions smoothly

I tried modifying android manifest with android:windowSoftInputMode="adjustResize" or android:windowSoftInputMode="adjustPan" but the problem is still there with both config.

It would actually be ok if we could change this color from white to something else like the background color of the content (red in my example). But I couldn't find a way.

Version

0.66

Output of react-native info

It happens from the documentation snack so I guess this section is not necessary

Steps to reproduce

Take the example from the KeyboardAvoidingView of react-native documentation and modify the background color of the container from white to red in order to see the white area when opening/closing the keyboard.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@flowwwww/keyboardavoidingview

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện ví dụ KeyboardAvoidingView trong tài liệu trên Android, sử dụng Snack được liên kết, rồi kiểm thử hành vi được báo cáo và các thiết lập keyboardVerticalOffset. So sánh adjustResize và adjustPan đồng thời quan sát vùng màu trắng và hiện tượng nhấp nháy; công việc được xem là hoàn tất khi hành vi chuyển tiếp được báo cáo đã được giải quyết hoặc cách được hỗ trợ để kiểm soát màu của vùng này đã được xác lập rõ ràng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.