live-markdown + native-stack + fabric causes incorrect layout when keyboard is open on Android

[kirillzyusko]

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 fine
• stack + live-markdown -> everything works fine
• stack + TextInput from RN -> everything is working fine
• native-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

[kirillzyusko]

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

[tomekzaw]

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.

[j-piasecki]

@kirillzyusko This should be fixing the problem: facebook/react-native#44796, but I guess you will need to use a patch for now 😞.

[kirillzyusko]

@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 ❤️

[tomekzaw]

@kirillzyusko Did you manage to find the root cause of the issue?

[kirillzyusko]

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

[tomekzaw]

@kirillzyusko E/App was upgraded React Native 0.75, could you please revisit this issue?

[kirillzyusko]

@tomekzaw I think @chrispader is going to check that, because he took over this task 👀

[tomekzaw]

Cool, thanks in advance!

[tomekzaw]

@chrispader Just a friendly ping, did you manage to take over this task?

[kirillzyusko]

@tomekzaw I am currently working on this task and the issue is not reproducible anymore. I think we can close this issue :)