In my app there are five tabs, each has there owned back buttons. I want to navigate back to the previous tab on the click of back button, without knowing that from which tab it has navigated.
Here is my code:
goBackPreviousTab = () => {
this.props.navigation.goBack()
}
Right now it doesn't work for tabs but it works fine for normal navigations. What can I try?
Related
Hello guys I am trying to create integration test with mock server.
What I am trying to do is changing navigation to other screen.
Tab to move to other screen and then click on a button to go other screen.
Changing tab works fine but triggering on press does not work so I added useIsFocused to see if it is focused. However, it changes focus state right away before I can get any element.
if I execute below test.
console.log('test1')
await fireEvent.press(await component.findByTestId('tab-name'))
console.log('test2')
fireEvent(
await component.findByA11yHint('Routes to the screen'),
'press')
It logs out something like this
test1
focused true
focused false
test2
Component fires on press event only if i add to beforeEach
await new Promise(r => setTimeout(r, 50))
Is there any way to make this work?
So this is the case. I have let's say login screen which is tab-based, one tab is login and other one is register. I also have a "Forgot password" button. So when I press forgot password button I want to go to a "forgot Password" screen which is inside tab navigation and has that "back" button in its header.
how can I do that ?
here is a photo
I need to change the current screen white bottom tab still is shown but the top tab is not going to show until I press the back button
in second photo what I need to happen is shown by green arrow and what I get is shown by the red one. (look at the bottom tab in two different results)
I solved it using this document:
https://reactnavigation.org/docs/4.x/tab-based-navigation/#a-stack-navigator-for-each-tab in A stack navigator for each tab paragraph
and this the implementation :
const ProfilePostStackNavigator = createStackNavigator({
Profile: {screen: Profile},
PostsDetails: {screen: ProfilePosts}
},{
initialRouteName: 'Profile',
headerMode: 'none'
});
Profile screen is a bottom-tab containing 5 different tabs and postsDetails in a single screen
then when I navigated to PostsDetails
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
I am working with Xamarin Forms and I am using MasterDetailPage and NavigationPage and everything is working. Now, I need to configure the page button (three bars on the left) to be visible on all views.
I have a MasterDetailPage with a menu and the user clicks a menu its navigate to other pages. First page (homepage) look like that:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<home:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
When the user clicks in menu inside masterdetailpage or other menus outside masterdetailpage it performs a navigation:
The three bars page button is visible only on the first view, when I navigate to others views, that button disapears.
But, I want something like that:
The page back button showns automatically when i navigate to other pages and it's fine.
How to let the three bars page button visible to all views and maintain the back page button?
I am using the following code to navigate between views:
await Navigation.PushAsync(MyNewPage());
Thanks!
Your master detail page has to handle the navigation to the detail pages for it to work correctly.
Connect the menu listview:
ListView.ItemSelected += OnItemSelected;
In the OnItemSelected event.
{MasterDetailPage}.Detail.Navigation.PushAsync(new MyNewPage());
Here is an example of master detail navigation:
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null)
{
NavigationPage nextDetailPage = null;
await Task.Run(() =>
{
nextDetailPage = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
});
Detail = nextDetailPage;
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
This is not possible, as you can't have two buttons on the left side. And as many applications I have seen, no app supports this kind of UI. Unless you write custom navigation bar and put it on top of every page.
You can create a stack of detail pages in your main MasterDetailPage. So whenever you want to push a new page, instead you can just set page as Detail and put old Detail in your own stack.
For Android you can wrap back button event to pop page from stack, but on iOS there is no back button, so you will have to create some sort of back button in detail page's toolbar.
I think that you will have to write a Custom Renderer to achieve what you want.
But if you want only to keep the hamburger button, without the back button, you can navigate to your pages using this code:
Detail = new NavigationPage(new MyNewPage());
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;
}