I want to open a menu on click of option button in header of a StackNavigator
snack link https://snack.expo.io/#abdulbsit/vengeful-macaroni-and-cheese
and here is the visual of screen https://drive.google.com/file/d/1mR3fL7KtF-BTp8OY9jlZlWvn3y_DGNhF/view?usp=sharing
Note: I don't want to use drawerNavigator, i want to make menu like this https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F0B8wSqcLwbhFuSGtLYzhXYWpRdk0%2Fbehavior-menu-multiple-position.mp4
you can do the above using making another component of menu using https://www.npmjs.com/package/react-native-material-menu
and import in your stack's Header button directly and to access navigation props in the menu component use withNavigation - https://reactnavigation.org/docs/en/connecting-navigation-prop.html
Related
Is there a way to close the mobile hamburger menu when you click on a menu link? We have a menu link that launches a modal window, but the menu is still showing behind it when I close the modal.
The state of the hamburger menu is kept in HamburgerMenuService. You can inject this service in your modal for example you can call the toggle(false) method in this component's onInit hook.
This way when the modal initializes the menu will close.
Thanks for the pointers. This is how I achieved the task:
Inject the HamburgerMenuService into the component:
import { HamburgerMenuService } from ‘#spartacus/storefront’;
Add my constructor:
constructor(private hamburger: HamburgerMenuService) {}
Access the toggle method in my modal function:
this.hamburger.toggle(true); // force close
I am building an app in react native with the use of react-navigation. On one screen I need to display a simple dialog to make sure user really wants to exit that screen.
I've tried to add BackHandler listener but that does not apply when the user clicks on the back arrow in the header. Is there any way, how I can prevent transition back before user click on the alert button?
implement "headerLeft" of Screen Navigation Options, like
headerLeft=()=>{
return <Button onPress={}>
}
then you can do anything you want in onPress callback
My react component hierarchy looks like
StackNavigation
- MainScreen
- List
- Row
- Button
My usecase involves go to a new screen on click of the button. My main screen receives react-navigation's navigation props. How do I pass it down to my button in a sane manner.
You'd better pass a callback to your button through all the hierarchy and call it when button is pressed. Afterwards when you know which button is pressed (on which row) you can navigate to necessary screen from your MainScreen.
I couldn't figure out a way to scroll swiper when a button pressed inside a drawer.
To be exact: One component has a full screen swiper. When user clicks on hamburger button, drawer shows up with an array of swiper datasource items. I would like to navigate to clicked datasource item inside my component. Swiper already has a scrollBy function for this. I just need to know how can I possibly trigger my swiper to scroll x indexes.
I'm using Redux model in my application. I've tried to pass the reference of swiper via reducers but it just seemed wrong.
I have a component mxml in which I have a save button, on click of the save button I need to display another component which will be in a tab navigator, for this I am using the view stack. My problem is, on click of save I need to display the second tab instead of the first tab, but by default the first tab will be displayed.
How could this be accomplished?
I'll put a sample code piece on what my requirement was and how I did it.
In my main mxml i have a view stack
<mx:ViewStack id="loginViewStack" width="100%" height="100%">
<mx:ViewStack id="navigationViewStack" width="100%" height="100%">
<components:login id="id_login" label="Login"/>
<components:offering id="id_screen1" label="Screen1" />
</mx:ViewStack>
</mx:ViewStack>
Now say I completed successful login. I need to be taken to screen one, My screen (which is a component mxml). My screen contains a tab navigator and the requirement is I need to be taken to the second tab. So what I do is in the creation complete of my screen1 component I set the selectedIndex of my tab navigator to 1. and hurray! this solves the problem.
private function ():void
{
id_tabNavigator.selectedIndex = 1;
}