I have a Scaffold which contains BottomNavigation with 4 menus/items and each item has it's specific screen which displays when we click on the bottom navigation item. On the third screen/menu I have to show a BottomSheet that covers the bottomNavigation also. Right now I am using ModalBottomSheetLayout but with it bottom navigation doesn't get hidden.
Related
I am trying to create a mobile app using react native. I am using react navigation 4. I wanted to create a top bar navigation in a screen. That's why i used createMaterialTopTabNavigator. the top bas has two tab Ongoing and Finished. Now the top bar tab placed to the top of the app. But I want to place it underneath the left drawer navigator and the screen title. Please see this image. https://sarderitworld.com/demo/toptab.png
I am not getting any option for do this.
const deleveriesBottomTabWIthTopTabs = createMaterialTopTabNavigator({
OnGoing : DeleveriesOnGoingStackNavigator,
Finished : DeleveriesFinishedStackNavigator
})
const boottomTabNavigator = createBottomTabNavigator({
Deleveries : deleveriesBottomTabWIthTopTabs,
Request: RequestAsSenderStackNavigator
})
I want to place the top tab bar underneath after the left drawer menu and screen title.
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
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;
}