I have a react native app with a bottom navigation(using react navigation) the app has 4 screens and it works fine, i want to be add the functionality to navigate between screens on horizontal gestures(swiping right or left) just like instagram does(swiping left from feed will get you to chat screen), i looked all around and found nothing on how to do this !
EDIT: apparently react navigation has that option in creatematerialtoptabnavigator, it'll be a top navigation tab bar with the ability to swipe between screens, you can also change it's position from bottom or top which is what i did.
Did you check out https://github.com/satya164/react-native-tab-view ?
I find it easy to use and the documentation is very good
Related
So i have an app in compose that has startDestination set as a screen with scaffold with bottom nav bar having 3 items and top app bar, i am able to navigate through the 3 bottom navigation tabs. But suppose i want to click on a card in one of the bottom tab screen which should open a details screen without the bottom bar and app bar (Since Navhost is inside the scaffold, bottom and top bars show up on details screen too), what is the right way to do that? Currently i have tried the following ways:-
1. Starting the details screen in a new activity.
2. Using currentDestination route as state to conditionally hide bottom and app bar for details screen route.
Both work but, the problem with first approach is that, it isn't recommended to use multiple activity with jetpack navigation and rather we should stick to a single activity, it also further breaks the navigation if in case i want to move from details to another screen. The problem with second approach is that hiding and showing bottom/top bars create very bad transition between the screens and app doesn't feel smooth.
Hence, i am looking for an appropriate way to handle this as per the guidelines, although i couldn't find any info on this.
Update
I went with showing/hiding the bottom and app bar based on routes, turns out that bad and laggy animation i was facing was because i was running a debug app, with a release app with minifyEnabled true (R8) ,the transitions are very smooth and natural, as i wanted them.
Also it turns out, as per Google's official compose sample app JetSnack , this is the appropriate way of achieving navigation from a bottombar screen to a non-bottombar screen. Thanks to #vitidev for pointing it out in the comments.
You can use a nested Navigation Graph:
one principal graph according to your BottomBar
one nested graph inside each screen you want to go further
https://developer.android.com/jetpack/compose/navigation#nested-nav
I'm using React Navigation Wix for my App and I want to achieve something similar to the below design (Attached image).
Actually the problem with the wix is that we don't have the ability to customize too much things, we can config the text and the icon only.
Note that its hard for me to convert to the react navigation library right now.
Right now there is no way to add a custom component as Bottom Tab Bar in "react-native-navigation" by Wix.
But you can implement the approach briefly described here
disable bottom tabs showing
create your own tabs component
add it to every screen
get fun :-)
But you need to be aware that you will lose the default badge showing behavior (small red circles near the icon) provided by this lib.
I need to move the android Navigation Bar from the bottom of the display to the right side of the display.
The android app I'm working on requires the user to touch the bottom of the screen often, so I'd like to move the navigation bar to the right side of the screen. I believe this is possible, as I've seen it done in several games. The attached image shows what I'd like to achieve; when the user swipes from the bottom or top, the android bars appear at the top and RIGHT side, as opposed to the top and BOTTOM.
I've read through a lot of existing similar posts, and have tried the suggested answers, however they seem to instruct how to move a navigation DRAWER (ie a new "bar" implemented by the app) to the right side, as opposed to the BAR itself; I believe these are two different things.
Further, the information on android developer (https://developer.android.com/training/system-ui/immersive) suggests that the bar cannot be moved, it can only be temporarily hidden. If that's the case though, how are the app's such as the one in the image doing it? Any suggestions?
I have the following problem. I noticed that on Android 4.4.2 (and possibly all 4.4.x) the NavigationDrawer does not work exactly as in lower version. It works fine, when opened via click in the ActionBar icon. But when I tried to open it by swiping from the side around the middle of the screen, only small grey area comes in instead of my NavigationDrawer. It looks like this.
I also noticed, that I am not the only one who has this kind of problems, as both Evernote and Duolingo suffers from the same problem. Is there anyway to make the drawer open correctly by swiping from the side ?
I added the Drawer exactly the way described here.
Edit : When I drag from the top left corner, everything is fine, but when I drag from the left edge somewhere in middle of the screen, something weird shows instead of a drawer. See the first link for the screenshot.
I have a project where the designs require a sliding drawer that comes from the bottom and has essentially three states.
fully collapsed (just the handle at the bottom
half mast (drawer opens from bottom but only halfway up the screen
full mast (drawer opens from bottom and takes up the whole screen minus a top margin of lets say 80dp
I am developing for android 4.0 and higher and obviously sliding drawer is deprecated. But the Navigation drawer only supports left and right (which i already have in use)
So i am wondering if anyone knows a tutorial or even a custom component someone has written that meets the above functionality requirements
In my experience, you probably have to create something yourself, but since you're developing for api lvl 14, check out ObjectAnimator. It allows you to move Views around and still use them (by that I mean that it's the original view that has been moved and not a copy of it)
This will probably be the easiest way.
FYI, using the Navigation Drawer, you can't open the drawer halfway, or you should programmatically invoke touch events...
I think this is what you are looking for.
I have found this library best so far for sliding up menus in Android.
https://github.com/umano/AndroidSlidingUpPanel
You can specify what screen area slide up menu or view will use.
Accept & vote up my answer if it is what you are looking for.