Comments (19)
Hi!
There is a "blockNavigationOut" property specifically for this purpose.
Hope it helps 👍
from react-spatial-navigation.
@asgvard Thank you! I will try this out asap and let you know if this worked.
from react-spatial-navigation.
@asgvard do you have an example of how to use blockNavigationOut
?
from react-spatial-navigation.
It's quite straightforward, this property has to be set for the Screen or Popup component that will act as a "boundary" for the focus.
<Screen
blockNavigationOut
/>
or
<Popup
blockNavigationOut
/>
I can't think of any more detailed example :) We are using React Navigation ourselves and just adding this property to our screens or popups.
from react-spatial-navigation.
@asgvard I am attempting to add it to the wrapped Focusable component but I am getting the error below. We get to this screen by calling navigation.push('DetailScreen', {...params})
.
Is there a way to apply this property without calling it directly like suggested above?
<DetailScreen blockOutNavigation />
from react-spatial-navigation.
This is an error from the TS type checks. We do not (yet) officially provide TS support, so the types you are using are at your own risk. If these are the type definitions you are using: #41 (comment), they do not have blockOutNavigation
in the withFocusableOpts
, you can perhaps manually add it there.
We are still planning a big refactoring of this library into hooks + TS support though. Stay tuned :)
from react-spatial-navigation.
@asgvard Should we only use Class Components in order to properly use properties like blockOutNavigation
?
We currently are using Functional Components but without hooks
support this might not be the best approach.
from react-spatial-navigation.
Hi,
We are using functional components ourselves. Having class components wouldn't make any difference. Unfortunately it is hard to understand the problem just from the screenshot. We are actively using screen stacking with React Navigation, and blockOutNavigation should restrict focus going out from the focusable container (active screen).
from react-spatial-navigation.
Okay so we currently have the Main Screen of our app that is pushing a new screen like so...
this.props.navigate.push('DetailScreen', {...params})
Screen two is a functional Component that is apart of our Navigation Stack
with 2 Focusable Buttons on the entire screen. We are wrapping the entire screen in a focusable like so >
export default withFocusable({ blockNavigationOut: true })(Detail);
However we are still able to Focus items that are on the HomeScreen.
from react-spatial-navigation.
By "tapping" do you mean that you are able to press on the items on the touch screen device or click on them in the browser? If so, this library only handles the spatial navigation with the arrow keys (left-right-up-down) and changes the focus between them. It doesn't control any other interactions such as taps or clicks.
from react-spatial-navigation.
apologies I am using the up, down, left, right
keys on the web simulator but we are getting the same behavior using the TV simulator as well. We are able to focus on elements from the first screen while we are on the 2nd screen and have that blockNavigationOut
value set to true.
from react-spatial-navigation.
Sounds like a bug then :) thanks for the information, we will get back to you. I will discuss it with our team, maybe someone encountered similar issue. If we don't have any immediate idea, we will probably ask you to create a demo project where this problem can be reproduced. E.g. barebone app with React navigation and 2 screens representing the issue. I understand that it probably would not be possible to share the real project.
from react-spatial-navigation.
Okay that sounds great! thanks for the quick feedback it is greatly appreciated! I look forward to hearing from you!
from react-spatial-navigation.
We also are using ReNative
& using Tizen
. We could also provide a sample project ASAP as this is a big blocking issue for us & we are on a tight deadline so any information or help you need from us we are happy to provide. @asgvard Thanks again!
from react-spatial-navigation.
Hi @AdrianBrown1,
We are using blockNavigationOut
with React Navigation
at the component level, not as a HOC prop.
Consider you have a DetailScreen (or DetailContainer) then you should pass it like in the following example:
const DetailScreen = (props) => {
...
return (<Detail
{...otherProps}
blockNavigationOut
/>);
};
Could you please try this out?
If the error persists, please send us a demo example where we can reproduce it, and we will try to help you.
from react-spatial-navigation.
So we were able to get the issue fixed with our own work around.
We originally had our Stack Navigator set up like so ...
<Stack.Navigator
initialRouteName={HOME}
screenOptions={{ headerShown: false }}
>
<Stack.Screen name={HOME} component={HomeScreen} />
<Stack.Screen name={DETAIL} component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
VS working implementation ...
<NavigationContainer>
<Stack.Navigator
initialRouteName={HOME}
screenOptions={{ headerShown: false }}
>
<Stack.Screen
name={HOME}
children={props => (
<HomeScreen
focusable={false}
focusKey={HOME}
{...props}
/>
)}
/>
<Stack.Screen
name={DETAIL}
children={props => (
<DetailScreen
focusable={false}
focusKey={DETAIL}
{...props}
/>
)}
/>
</Stack.Navigator>
</NavigationContainer>
We are still not able to get blockNavigationOut
working on its own without focusable={false}
set. We will move forward with the current implementation as it is working as intended but please let us know if we are following the intended implementation of this API properly. If you have any other suggestions for us to try we are happy to give that a try!
I look forward to hearing back!
from react-spatial-navigation.
So we were able to get the issue fixed with our own work around.
We originally had our Stack Navigator set up like so ...
<Stack.Navigator initialRouteName={HOME} screenOptions={{ headerShown: false }} > <Stack.Screen name={HOME} component={HomeScreen} /> <Stack.Screen name={DETAIL} component={DetailScreen} /> </Stack.Navigator> </NavigationContainer>
VS working implementation ...
<NavigationContainer> <Stack.Navigator initialRouteName={HOME} screenOptions={{ headerShown: false }} > <Stack.Screen name={HOME} children={props => ( <HomeScreen focusable={false} focusKey={HOME} {...props} /> )} /> <Stack.Screen name={DETAIL} children={props => ( <DetailScreen focusable={false} focusKey={DETAIL} {...props} /> )} /> </Stack.Navigator> </NavigationContainer>
We are still not able to get
blockNavigationOut
working on its own withoutfocusable={false}
set. We will move forward with the current implementation as it is working as intended but please let us know if we are following the intended implementation of this API properly. If you have any other suggestions for us to try we are happy to give that a try!I look forward to hearing back!
Would it be possible that you to share a demo project that we can clone and test ourselves?
I would need to see how you are creating the withFocusable
on HomeScreen
and other components.
from react-spatial-navigation.
Hello @guilleccc
Apologies for the delay in response. Unfortunately we haven't had the time to create a demo project you can run but below is the pattern we are using for creating Focusable
screens. Please let me know if this clears things up for you or if you need more information. We are using this pattern for all screens in our application that need to Focusable
const HomeScreen = (props) => {
return (
<View>
<TouchableOpacity onPress={() => props.navigation.push('details')}>
<Text>Navigate to Details</Text>
</TouchableOpacity>
</View>
);
}
export default withFocusable()(HomeScreen);
from react-spatial-navigation.
Hi,
I will close it due to inactivity. If you still experience the same issue, please feel free to reopen, but we would need a demo project where the issue is easily reproducible. We are using "blockNavigationOut" and stack navigation on multiple projects and haven't experienced issues with the feature itself.
from react-spatial-navigation.
Related Issues (20)
- CSS gap:0 breaks navigation HOT 1
- Focus lost when Item Removed HOT 4
- Sometimes navigation doesn't work after go back to previous screen HOT 1
- a vulnerability CVE-2020-15168 is introduced in @noriginmedia/react-spatial-navigation HOT 2
- Focuses the second item in the list, after navigating from the fixed menu HOT 2
- Performance/Crash issue when load multiple rails and hold arrow keys to navigate HOT 1
- [Question]Can I use this package in a ReactJS project? HOT 4
- withFocusable usage with forwardRef HOT 9
- Understanding of roadmap for library HOT 5
- more than 100 UI elements in funcational component taking too long to navigate. HOT 1
- 2-Directional Grid-type Items HOT 1
- display none control HOT 2
- Focus gets lost in case of collision HOT 3
- Track Child not recognizing children
- RTL is not supported
- Loss of focus when a component is rendered HOT 2
- Error when Server Side Rendering HOT 1
- Focusable elements not recognised when layout is position absolute HOT 5
- How should I handle focus when opening/closing a pop-up? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spatial-navigation.