I created a shrink animation with Stack Navigator, on snack, https://snack.expo.io/hvv8URsmp , but I haven't been able to replicate it with createBottomTabNavigator.
I saw some github threads that say it's not supported in the same way Stack Navigator is, with this link showing how to do it manually with Animated https://github.com/brentvatne/animated-bottom-navigation-example/blob/master/createAnimatedBottomTabNavigator.js.
While it seems to work, I would love it if I could separate the animation code out into my navigator file, as shown in the snack, rather than be hardcoded into my screen component like in the second link.
Is there a way to migrate the code that I already have working for the stack navigator into an existing bottomTabNavigator?
Related
I'm into PWA development, and I'd like to use React components to build my UI, but not React-native components (otherwise why write PWAs...).
So I am looking for an equivalent to the top-tab-navigator component found here:
https://reactnavigation.org/docs/material-top-tab-navigator/
but without any React-Native dependency!
Changing pages by swiping would be great, even without a visual effect.
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
Any help will be very appreciated.
Thank you!
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
I'm trying to make a Water Tracker app (I know that already exists, I only want to challenge myself because this is my first project) and I want to use the Stack Navigator (That is already in the app) with the Tab Navigator. I've tried a lot of solution from Medium, Stackoverflow and official React Navigation documentation but none of them works for me. My goal is to have both stack navigator and tab navigator in all the screens. I'm using Expo CLi.
This is the source code:
https://snack.expo.io/XDRjrC7Gf
Can anyone help me with this?
I am currently having an issue where using a StackNavigator (created using createStackNavigator) is messing up the layout of my component.
I have attached images to explain the problem! You can see, on the first run of the app, when I just directly render the view, the component renders fine. Then, when I change it to render my navigator (whose component is the same StartPartyPageView), the layout gets messed up.
Also, when rendering within a navigator, I am unable to scroll my scroll view.
Does anyone know what could be going on here?
This is where it is working:
This is where it is not working:
In my app, I have a main stack navigator that contains all my screens. Some of these screens are part of the login flow, and then once the user authenticates, they go to the main part of the app, which contains a bunch of screens that you can navigate between using a drawer menu.
The way I've implemented this is that in my main stack navigator, I have as navigable components <Welcome/>, <Login/>, and <MainStack/>. In <MainStack/> I have a second stack navigator that contains all the screens in the main part of the app, and that stack navigator is wrapped inside a drawer menu. This way, I code the drawer menu only once. So in the primary stack navigator you can navigate between <Welcome/>, <Login/>, and <MainStack/>, and once you're in <MainStack/>, you can navigate between a bunch of other screens, all of which share the same drawer menu.
This all works fine, but RN is giving me a warning that I shouldn't include more than one stack navigator in an app; that I should include everything in just one stack navigator. Does anyone know if there's a clean way I can accomplish everything I'm doing here with only one stack navigator?
Thanks!
I have a list in a drawer that is docked to the browser screen (desktop) and I want to expand the content of the list item to fill the entire drawer when I click on it just like explained in this demo:
I could find ways of doing it using Android but not using react material-ui V1.0.
Has anyone already done something like it?