Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: command-click should not handle inside page #9

Closed
ericvicenti opened this issue Jan 26, 2017 · 3 comments
Closed

Website: command-click should not handle inside page #9

ericvicenti opened this issue Jan 26, 2017 · 3 comments

Comments

@ericvicenti
Copy link
Contributor

Cmd-click on the website is broken

@ericvicenti
Copy link
Contributor Author

Can somebody help fix this? Should be pretty easy to add a special case in the onClick handler:

https://github.com/react-community/react-navigation/blob/master/website/src/Link.js#L30

@irskep
Copy link

irskep commented Jan 27, 2017

It really worries me that that navigation requires special JS routing rather than just working with browser events. It means you have to implement hacks like the one you suggested, or the one in the referenced PR.

@ericvicenti
Copy link
Contributor Author

@irskep , sorry I'm a bit confused what the hack is.

Because of the server rendering, React Navigation works great in browsers without JS. So I would not say it requires special JS routing.

For browsers that do have JS, we can improve page load time by blocking the browser navigation, and switching pages in JS. This will also allow us to implement animations and make the app feel faster.

There is no other standard way to speed up page transitions, so this technique is not considered a hack. It is a web standard and is supported by all major browsers.

satya164 pushed a commit that referenced this issue Feb 7, 2020
Routes in `MaterialTopTabNavigator` are now lazy initialized like in `MaterialBottomTabNavigator`.

A scene visibility is computed from multiple states and props:

To handle the pan between tabs, we check if you're currently swiping between tabs and the prop `lazyOnSwipe` is true (default value) or if the tab have been already loaded, we'll check if this tab is a sibling of the focused tab. Then, we'll display the tab if it's a sibling.

~With the prop `animationEnabled` to true, we shouldn't hide a tab before the transition is done. So we're waiting `COMPLETE_TRANSITION` action to hide it. Also, if the prop `sceneAlwaysVisible` is true (default value), we won't hide scenes between A and D while transitioning.~

If the current tab has not been loaded and must not be visible, we do not render it.

I'll update the docs accordingly to this PR.

![tabs-2](https://user-images.githubusercontent.com/7189823/38261082-3bd30d04-3737-11e8-854e-684430db771f.gif)

<!--
#### Default behavior
Tabs are lazy initialized on swipe or focus and are always visible while transitioning.

![tabs-1](https://user-images.githubusercontent.com/7189823/38260989-060f5808-3737-11e8-87ed-d138fec6022b.gif)

#### Hide tabs between while transitioning

```js
{
  sceneAlwaysVisible: false,
}
```

![tabs-2](https://user-images.githubusercontent.com/7189823/38261082-3bd30d04-3737-11e8-854e-684430db771f.gif)

#### Fallback to only lazy initialized tabs on focus

```js
{
  lazyOnSwipe: false,
}
```

![tabs-3](https://user-images.githubusercontent.com/7189823/38261164-7bcc6018-3737-11e8-8758-de71d28218ae.gif)

-->
ShyJuno pushed a commit to ShyJuno/react-navigation that referenced this issue Apr 19, 2024
fix: avoid stringified "null" and "undefined" values
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants