I have a DrawerNavigator as the basic block of my app. The reason is that it should be accessible from all screens. As such, it's also the target for all deep links and will only display some of the items in the actual drawer.
The main page consists of a bottom navigator of stacks, and more entries are also stacks themselves.
The problem is that navigating in the drawer doesn't show any back button as navigating in the stacks would. And it would be nice to have these, just like the back gesture on Android works.
Is this something that exists and if yes, how should it be tackled?
You'll need your own header component in each screen which has a back button. You can use a custom one or one from a component library such as react native paper.
function Home({ navigation }) {
return (
<React.Fragment>
<MyCustomHeader title="Home" onBackPress={navigation.goBack} />
{{
/* screen content */
}}
</React.Fragment>
);
}
Make sure you pass backBehavior: 'history' to createDrawerNavigator.
Related
Currently in my application I have a screen that is connected to the deep links through react navigation. When I open this screen, background the application and then try to open a deep-link, react navigation opens the existing screen on the navigation stack.
I want the linking options to trigger a completely new page on top of the existing one and put it in the stack, is this possible?
You can do this by specifying a getId function:
<Stack.Screen
name="Profile"
component={ProfileScreen}
getId={({ params }) => params.userId}
/>
The getId function should return a unique ID to identify the screen - usually, the ID of the item shown in the screen, React Navigation will only reuse the screen if the ID is the same.
https://reactnavigation.org/docs/screen/#getid
I need to implement the routing functionality in Xamarin.Forms application using the ReactiveUI framework.
The following transitions map needs to be implemented:

Above the black arrows show forward transitions (e.g. I go from the Menu to the Order page by clicking on the menu item button), while the red arrows are for Go Back functionality. Please note that Go back should work for both: (a) the "Go back" link in the top navigation bar (b) the hardware «Back» button on the Android devices.
How do I implement the transitions between sibling pages like these:
Menu - Order - Map - Back to the Menu
Menu - Order - Order details - Pin details page - Back to the Map - Back to the Menu
?
P.S. Here is the guide https://www.reactiveui.net/docs/handbook/routing/ I followed recently, so I used GoNext/GoBack commands to implement more simple transitions like Menu - Order - Order details - Back to the Order - Back to the Menu. It does not work well for the described case, as the Back buttons make transitions back to the previous page instead of their parent page in the navigation map.
The NavigateBack command implementation is quite simple in ReactiveUI's RoutingState, it just removes the last element from the RoutingState.NavigationStack, RoutingState.NavigationStack is an instance of ObservableCollection<IRoutableViewModel>.
So in your particular case, you could write your own NavigateBack command implementation that mutates the navigation stack as required by your application domain. You could use a switch block to figure out what page is currently shown in the screen, and then map that page into another page, either newly created or stored in a field or in a Locator.Current. Probably your command will require a more complex canExecute implementation as well.
ReactiveCommand<Unit, IRoutableViewModel> navigateBackDomainAware =
ReactiveCommand.CreateFromObservable(() => {
var currentViewModel = NavigationStack[NavigationStack.Count - 1];
if (currentViewModel is PinDetailsViewModel) {
var mapViewModel = GetMapViewModel();
NavigationStack.Add(mapViewModel); // The navigation.
return Observable.Return(mapViewModel);
} else {
// Handle other pages. You can also put some domain-specific code
// describing the navigation mappings in your application here.
}
});
I'm trying to make a simple app with Playground (https://play.nativescript.org/). I'm using "RadSideDrawer" as a side menu. I'm satisfied. BUT ... every time I use "RadSideDrawer" and I move from one page to another, inside the "ActionBar" a button appears whose function is to bring back to the left page (please have a look at this page https://www.attivitacollaterali.it/appdata/services/apps/RadSideDrawer.html). I don't need and want this button. How can I make it not appear? Thank you.
Or, if not, at least update "RadSideDrawer". I mean that if the button goes back, for example to the "Search" page from the "Home" page, it should highlight/select "Search" in the "RadSideDrawer" menu and not leave "Home". Thanks again.
I think you're looking for the "clearHistory" option while navigating. When navigating to another page, you must do this:
this.router.navigate([url], { clearHistory: true });
Just make sure you're injecting RouterExtensions in your constructor:
constructor(private router: RouterExtensions) {}
That should clear the navigation stack when navigating, thus removing the button to go back to the previous page.
EDIT: If you want to retain the navigation stack, I believe you can also edit your action bar like this:
<ActionBar>
<NavigationButton visibility="collapsed"/>
</ActionBar>
I am attempting to use navigateTo() within a modal in my NativeScript Vue application.
My modal components is wrapped in a <Frame>, which I understand is how to allow it to be a navigation controller. However, when I attempt to navigate to the sub-component of the modal, it actually opens behind the modal in the main frame.
You can see this behavior here: https://play.nativescript.org/?template=play-vue&id=azowAE&v=3
Click the "Open Modal" button and then click the "Show subpage" button. Seemingly nothing happens, but if you then click the "Close" button, you'll see the sub page opened behind the modal.
In order to navigate to a frame that is used in a modal, you should utilize the second argument to the $navigateTo method. This can reference a frame by reference or id. The easiest way I found was to give the frame in the modal an id:
<Frame id="modal-frame">...</Frame>
Then you can navigate inside the modal as as example
this.$navigateTo(OtherComponent, {frame: 'modal-frame'});
Note, you do not put a # in front of the ID like a CSS selector. Only the id value.
See for code reference: https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48
Another cause for this same issue is when the sub-component that the modal is navigating to isn't wrapped in a <Page> tag.
When you add a catch to your navigate code then it gives the following errors, depending on whether you use the ref or id.
this.$navigateTo(NewModal, {
frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));
"frame-ref" throws TypeError: Cannot read property 'id' of undefined
"frame-id" throws TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function
I am trying to make a single page application in which I have 3 components : Index, BluePage and GreenPage
I'm trying to use React and React router to switch through them. The layout is as follows:
This view is supposed to be like a sliding page and can be better visualized like this following diagram:
In order to do these transitions, I am currently using ReactCSSTransitionGroup and CSS classes, however it is becoming difficult as the direction the page must animate depends on the page that was being viewed before.
For example, if the BluePage was in view, and the user pressed the "back", button, the Index should move into view from the right.
On the other hand, if GreenPage was originally in view, the Index should move into view from the left.
The Question
How can I use React Router to send the existing path to the next component, so I can animate the components properly?
Should I continue to use ReactCSSTransitionGroup or should I handle animations in the componentWillMount and componentWillUnmount callbacks?
If so, how does adding CSS classes to objects after initial rendering work?
I apologize if these questions seem somewhat novice - I am still a beginner to ReactJS. Thanks for all the help!
If any clarification is necessary, let me know.
I would recommend you to check react-swipeable-views.
In this component, you just need to add all of your views (components) as children of the SwipeableView component. The currently active view is defined by index prop of the SwipeableView. You switch the view with buttons, you simply need to create a state in the main component (App, for example) and update this state in onClick handler. It would look like this:
class MainComponent extends Component {
state = {
index: 0,
}
onBlueButtonClick() {
this.setState({ index: 1 });
}
render() {
return (
<div>
<div onClick={() => this.onBlueButtonClick()}>Click me!<div />
<SwipeableView index={this.state.index}>
<BlueView />
<GreenView />
<RedView />
<SwipeableView />
</div>
);
}
}
Hope it helps! ;)
EDIT: I have added a button in the example to explain how to use this component when there is no swipe effect. This is a React component and not a React Native, so it was made to work on a website, therefore without a swipe. I use it in one of my projects. Here's a GIF of it.
What I would suggest you is tu use swiper.js. Why?
performant (desktop, mobile)
no jquery needed
huge api, with very usefull features for your use case
change slide programmatically: swiper.slideTo(2) or swiper.nextSlide())
Hash/History Navigation: sync between hash and slides
you can disable touch gestures
etc..
Setup
npm install swiper --save
Import
const Swiper = require('swiper');
or
import Swiper from 'swiper';
Usage
see demos with example