Repository navigation
react navigation in web #62
Description
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 |
Activity
samaneh-kamalian commentedon May 17, 2021
Can anyone help? I searched a lot but did not find a way :(
soroushm commentedon May 17, 2021
@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 commentedon May 18, 2021
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.Navigatorwith about 20Stack.Screenin it. there is not any other navigator like Tab or other.I just use
linking={{ enabled: true }}inNavigationContainer. I try to define linking like this:But no difference has been made!
soroushm commentedon May 18, 2021
@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 commentedon May 19, 2021
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 commentedon May 19, 2021
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 commentedon May 19, 2021
@samaneh-kamalian dear I don't have the magic power to observe you code, share it with me, otherwise I can’t help you!