react navigation header style is broken

[mokuzuu]

Description

I use react-navigation and dripsy with following version

"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"dripsy": "^3.6.0",

When I use dripsy View as Stack screen component props

import {View} from 'dripsy'
...
<Stack.Screen name="TopicsList" component={() => <View />} />

and it puts header at the bottom screen as screenshot.

It looks like flex-direction property, which supposed to be column-reverse is overridden by another class and sets flex-direction: column

When I disable flex-direction: column and it (pretty much) fix the style.

This issue won't happen when I use react-native View component

[nandorojo]

I'm not really sure what the gist of the issue is. Can you please make a reproduction at https://snack.expo.io and show expected / actual behavior?

[mokuzuu]

Thank you for response. I tried to reproduce the bug on expo snack, but it actually works as expected (Header is displayed at the top of the page) expo snack link

I made a repo in which I could reproduce the bug on my mac book pro https://github.com/mokuzuu/dripsy-react-navigation-issue-218/

[nandorojo]

i think native stack is kind of messed on web in general, maybe try normal stack on web?

https://github.com/showtime-xyz/showtime-frontend/blob/911795b8a0f0a48d8fda592bb9e1b818e4cc1559/packages/app/navigation/create-stack-navigator.web.tsx

[mokuzuu]

You are right! It fixes the issue! I have another UI issue with drawer, but it might be fixed with same approach. I will try later.

I feel this is beneficial to some people. May I update README to note about this?

[mokuzuu]

Thank you very much Fernando