Rendering issue when switching screen using react-navigation in combination w/ react-native-web

[nikgraf]

When switching to the page it looks like this:

When refreshing the page it looks like this (and this is how it supposed to be):

Code:

      <Text style={tw`mt-4 mb-1`}>Nodes</Text>
      <Tiles style={tw`max-w-lg`} space={4} columns={10}>
        <Icon name="at-line" />
        <Icon name="code-s-slash-line" />
        <Icon name="double-quotes-l" />
        <Icon name="heading" />
        <Icon name="h-1" />
        <Icon name="h-2" />
        <Icon name="h-3" />
        <Icon name="h-4" />
        <Icon name="h-5" />
        <Icon name="h-6" />
        <Icon name="indent-decrease" />
        <Icon name="indent-increase" />
        <Icon name="list-check" />
        <Icon name="list-check-2" />
        <Icon name="list-ordered" />
        <Icon name="list-unordered" />
        <Icon name="paragraph" />
        <Icon name="table-2" />
        <Icon name="text" />
      </Tiles>

This seems like a general issue with the library. I also noticed it on other pages. Any ideas?

[nikgraf]

@mobily seems like it's an issue with react-native-web itself or react-navigation because I noticed it also happens on screens where stacks is not used

[nikgraf]

Actually realized we used stacks more than I thought and all cases were stacks related.

For a horizontal stack I nailed down the issue to a broken flex-ba sis setting.

This might be related: https://github.com/necolas/react-native-web/issues/1264

[mobily]

hello @nikgraf! 👋 thanks for posting this issue, could you try with v2.1.0, please? also, if this still occurs, a repro repo would be helpful! 🙏

[nikgraf]

@mobily still happening :(

[nikgraf]

sorry, don't have time to setup a full repro. we are using react-navigation and after switching between screens it sometimes happens. Could be something wrong with our setup

[vbylen]

@nikgraf I replaced all instances of <Stack/> and <Inline/> with <Box/>, and removed flex='content'. This seems to have solved the problem. Not ideal, but it works.

edit: it seems fixed now in the latest version

[makhataibar]

I was update react-native-web to latest version (0.18.1) and all works correctly now. But I don't know, can I upgrade RNW without Expo migration guide?