react navigation in web

[samaneh-kamalian]

Current Behavior
the header bar placed at bottom of page in web!

Expected Behavior
header bar placed at top of page!.
How to reproduce
I use react navigation 5 for my react native application. there is not any problem in android and ios. but when I use this code for web, the header bar placed at bottom of page.
I use webpack for create bundle and run web.

Environment
npx react-native info:
info Fetching system and libraries information...
System:
OS: macOS 11.1
CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 111.28 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 15.2.1 - /usr/local/bin/node
Yarn: Not Found
npm: 7.4.3 - ~/node_modules/.bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
Android SDK:
API Levels: 29
Build Tools: 28.0.3, 29.0.2
System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_275 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ^16.13.1 => 16.13.1
react-native: ^0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

web
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"react-native-gesture-handler": "^1.10.3",
"react-native-safe-area-context": "^3.1.7"
"react-native-screens": "^2.11.0"
node v15.2.1 |

[samaneh-kamalian]

Can anyone help? I searched a lot but did not find a way :(

[soroushm]

@samaneh-kamalian these package belongs to version 3,4
also, I didn't get what are you trying to say please share screenshot and more details

[samaneh-kamalian]

Scan QR Code header must be at top of the screen but now it is at the bottom of screen!

Sometimes, when reload the page, header placed on top of the screen but back button disappear!

I have Stack.Navigator with about 20 Stack.Screen in it. there is not any other navigator like Tab or other.
I just use linking={{ enabled: true }} in NavigationContainer . I try to define linking like this:

linking = {
      prefixes: ['http://localhost:2000']
      config: {
        screens:{
          ... ,
          ScanQrcode: 'ScanQrcode',
          ...
        }
      }
           
}

But no difference has been made!

[soroushm]

@samaneh-kamalian linking is for the deep link not related to this one

maybe have a style problem or I'm afraid of using wrong navigation, somehow the two-screen is the on-screen could you share your project with me on GitHub repo

[samaneh-kamalian]

Thanks @soroushm.
you are right .
I use a menu as the header right of one of the pages. The style of the rest of the pages falls apart!
but I dont know why it happens!

[samaneh-kamalian]

Thanks @soroushm.
you are right .
I use a menu as the header right of one of the pages. The style of the rest of the pages falls apart!
but I dont know why it happens!

Unfortunately, I still have the problem. The first time the page is loaded, the header is at the bottom of the page, even if remove the header right, and after reloading, the header is placed at the top of the page :(((((((((((((((((((((((((((

[soroushm]

@samaneh-kamalian dear I don't have the magic power to observe you code, share it with me, otherwise I can’t help you!