Focusable items hidden are able to be accessed. about react-spatial-navigation HOT 19 CLOSED

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.

@asgvard

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.

@asgvard

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 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!

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.