search

gorhom / react-native-portal

A simplified portal implementation for ⭕️ React Native & Web ⭕️.
MIT License
662 stars 38 forks source link

Flicker appears on keyboard close in form page. #47

Open RagavendraM opened 1 year ago

RagavendraM commented 1 year ago

We are using Portal as well as Bottomsheet in the Application. Portal specifically for showing bottomsheet above bottomBar in HomePage. In Form Page after editing fields or pressing back while editing (closing keyboard) a flicker appears i.e., backdrop defined in bottomsheet. As mentioned in below stackoverflow post for Flicker we added View with device height as parent to all in App.tsx. But after that, textfields in forms not scrolled above keyboard i.e, (softInputMode = adjustResize in android manifest not working)

MohanadAmrr commented 6 months ago

Hey Ragvendra, did you find a solution for this problem?

LasithaOffice commented 5 months ago

I'm having the same issue. it's weird

somasekharkakarla commented 3 months ago

i am also facing same issue with react native 0.73.8. with react native 0.70.5 it working fine

somasekharkakarla commented 3 months ago

hi @gorhom , your library is saving huge time for fellow developer. i appreciate your hard work. i would like to inform you one issue. that users are facing discomfort when using the portal with bottom sheet.

There was issue with portal with new react native version 0.73.8. I using a flat list to create a from. it has many components like dropdown where i use bottomsheet and portal. Problem: when i am using a textinput, keyboard is working is fine. but in closing complete screen getting flickered. i think this can we fixed with applying a translucent as default in main component as of now can you please look into it. i am attaching video below please look into. if any doubt please free to contact me.

https://github.com/user-attachments/assets/2110c3a4-8c9a-4e91-b72d-3a5e67fff99b

somasekharkakarla commented 3 months ago

Hi, i am to resolve this issue. With few changes. This is occurs in a combo of portal, bottomsheet (with backdropComponent)and flatlist. This exists even in react-native-paper's portal also.

Solution: if you wrap backdropComponent in useCallback it will resolve the issue for keyboard. or if you still facing it you can use bottomSheetModal where you no need to use portal. https://ui.gorhom.dev/components/bottom-sheet/modal