`live-markdown` + `native-stack` + `fabric` causes incorrect layout when keyboard is open on Android
Opened this issue ยท 9 comments
Description
If you use @expensify/react-native-live-markdown
with native-stack
(and new arch enabled) then input is obscured by the keyboard even if adjustResize
is specified for softInputMode
.
Actually I don't know if it's correct repo to open an issue or it should be opened in @expensify/react-native-live-markdown
, because:
native-stack
+TextInput
from RN -> everything is working finestack
+live-markdown
-> everything works finestack
+TextInput
from RN -> everything is working finenative-stack
+live-markdown
produces incorrect layout.
The reason why I open it here because if you inspect elements in layout inspector then you can notice, that next children to Screen
has incorrect layout (and I tend to think that the problem comes from RNS, but feel free to correct me - if you think it's live-markdown
issue, let me know and I'll re-open issue there):
Initially I opened issue in react-native-screens
repository software-mansion/react-native-screens#2124
Steps to reproduce
- click on go to details
- set focus to input
Snack or a link to a repository
https://github.com/kirillzyusko/native-stack-markdown-repro
Screens version
3.31.0
React Native version
0.73.4
Platforms
Android
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
Android emulator
Device model
Pixel 3A (API 33)
Acknowledgements
Yes
@tomekzaw may I ask you to look into it? We're trying to integrate native-stack
navigator in Expensify app and it's the only one blocker that remains ๐
At least would be good to understand if it's caused by live-markdown
or conflict is somewhere else ๐
Hey @kirillzyusko, thanks for submitting this issue and preparing the minimal repro.
I confirm the problem is reproducible on my end.
We will investigate this issue.
edit: The problem goes away when I comment out registering MarkdownCommitHook
, perhaps there's something wrong in there.
@kirillzyusko This should be fixing the problem: facebook/react-native#44796, but I guess you will need to use a patch for now ๐.
@j-piasecki interesting ๐ค Originally I discovered this problem in Expensify app and then prepared a reproduction example.
But in Expensify it looks like we already include state
during a copy:
childNode = parentNode.clone({
ShadowNodeFragment::propsPlaceholder(),
std::make_shared<ShadowNode::ListOfShared>(children),
parentNode.getState(),
});
Interesting, I'll need to allocate some more time to test everything again more carefully ๐ I'll get back to you when I have tests results. Thank you for taking a look on this issue @j-piasecki and @tomekzaw โค๏ธ
@kirillzyusko Did you manage to find the root cause of the issue?
@tomekzaw no, not yet. I'm waiting for RN 0.74 to land in Expensify and then will verify all fixes related to native-stack at once ๐
@kirillzyusko E/App was upgraded React Native 0.75, could you please revisit this issue?
@tomekzaw I think @chrispader is going to check that, because he took over this task ๐
Cool, thanks in advance!