Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29603

Keyboard or D Pad navigation on stack navigator Focusing on previous screen Touchables

$
0
0

So I have a stack navigator with a Home screen page which has a mapped array of "Menu Items". They are aligned horizontally. My problem is that when I navigate to any of the page (using keyboard or dpad on android) and use my keyboard to navigate on elements of that screen, if I press down key, it focuses on the home screen menu items. But those items are in home screen and this is another screen. I know it focused because I loose focus on my current screens focused elements and If I press return, it opens the screen from which it is focused on in the main menu.

App.js:

<Stack.Navigator initialRouteName='Home' headerMode='none'>
                        <Stack.Screen name="Home" component={HomeScreen} />
                        <Stack.Screen name="TV" component={TVScreen} />
                        <Stack.Screen name="Movie" component={MovieScreen} />
                        <Stack.Screen name="Messages" component={MessageScreen} />
                        <Stack.Screen name="HotelInfo" component={HotelInformationScreen} />
                        <Stack.Screen name="Daily" component={DailyUpdateScreen} />
                        <Stack.Screen name="IVD" component={IVDScreen} />
                        <Stack.Screen name="Shopping" component={ShoppingScreen} />
                        <Stack.Screen name="Weather" component={WeatherScreen} />
                        <Stack.Screen name="Language" component={LanguageSelectionScreen} />
                        <Stack.Screen name="Survey" component={SurveyScreen} />
                        <Stack.Screen name="TVPlayer" component={TVPlayer} />
                        <Stack.Screen name="MoviePlayer" component={MoviePlayer} />
                        <Stack.Screen name="MovieDetail" component={MovieDetailScreen} />

                        <Stack.Screen name="Registration" component={Registration} />
</Stack.Navigator>

HomeScreen.js:

navigations = debounce((screen_name, background_image) => {
        this.props.navigation.push(screen_name, {background: background_image});
    }, 200)

    navigate(screen_name, background_image){
        this.navigations(screen_name, background_image);
    }

<View style={styles.thumbnailContainer}>
                    {
                        this.state.mainMenu.map((e, index) => {
                            return (
                                <CustomIcon
                                    key={index}
                                    source={{uri: baseURL.baseImageURL + '/main-menu/icon/' + e.icon}}
                                    imageStyle={styles.thumbnail}
                                    onPress={()=>this.navigate(e.screen_name, e.background_image)}
                                    textStyle={styles.iconLabel}
                                    // text={e.menu}
                                    selected={index === 0}
                                />
                            )
                        })
                    }
</View>

Sample JSON:

{
  "menu": [
    {
      "id": 1,
      "main_menu_id": 1,
      "lang_id": 1,
      "menu": "Messages",
      "screen_name": "Messages",
      "icon": "7954be68-4abe-419b-9484-a8ce64e6d126.png",
      "background_image": "82fc75a4-17c5-4681-b63a-ec1aac95bfca.png",
      "menu_index": 3,
      "active": 1,
      "created_at": "2020-02-12 05:08:58",
      "updated_at": "2020-02-20 18:04:03",
      "deleted_at": null
    },
    {
      "id": 6,
      "main_menu_id": 2,
      "lang_id": 1,
      "menu": "Movies",
      "screen_name": "Movie",
      "icon": "c06b1b9d-b0e2-405e-94e2-762eac2d77f2.png",
      "background_image": "1153df7f-30c4-4c0e-94c4-4b069c9c6ece.png",
      "menu_index": 2,
      "active": 1,
      "created_at": "2020-02-12 17:39:05",
      "updated_at": "2020-02-20 18:03:46",
      "deleted_at": null
    },

  ]
}

So basically, navigating to home page (when app launches) and from there, if I navigate to TV screen or any other screen, I can press down and play with the home screen icons/menu items although that screen is not visible. I have already tried This Solution which did not work for me. I am developing an application for android TV and that is why I have to use keyboard.


Viewing all articles
Browse latest Browse all 29603

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>