I am trying to recreate the following, where a menu is brought up from bottom when a button is pressed, but lost as to where to start. How can I go about doing so?
Any guidance or insight would be greatly appreciated.
It looks like this is the best so far. Works on Android and iOS.
https://github.com/prscX/react-native-bottom-action-sheet
Note: it requires native modules so it won't work on Expo.
Alternatively, you use this component from NativeBase:
https://docs.nativebase.io/Components.html#actionsheet-def-headref
FYI: I haven't tested react-native-bottom-action-sheet
You can use a module like this for an example. IMO this can be done in two ways:
Slide a View with animation like in the library linked above.
Use a Modal component that will slide from the bottom (it's actually a default behaviour of this component). Remember to add a margin on top of the content to don't slide it to the top of the screen).
Related
I guess, it is better if I show you what I tried.
So, I am working to build a weather app in order to learn https://material-ui.com/.
I am trying to prototyping the animation how I see it in Google flights as
I tried to do this using Grid, Fade available in material-ui (I used latest 3.9.3).
However, in my version, even though I use Grid, when I hide the AppBar and the Form content, the grid beneath it, does not slide up. My version looks like
As you might see, what I mean. So, how do I slide the content up?
I have shared my code at https://codesandbox.io/s/13q4mmm36q?fontsize=14
Can someone please help me understand what I am missing?
Fade will simply just change the opacity. It doesn't inherently set its height to 0 or become display: none after fading out.
Just use material-ui Collapse component on the Header.
Code:
https://codesandbox.io/s/ooyxn96mo9
Documentation:
https://material-ui.com/api/collapse/
I'm looking for a way to add a menu to my app. However, this has a different behavior than the existing <ion-menu type = "push">.
Do you know a possibility to create your own type or to change an existing type?
Here is a picture of what is very similar to my goal. The menu opens with a push across the screen. The existing screen will also be smaller. A Click or swipe on the current page (on the right) will close the menu. It seems like the menu is fix behind the current page.
The menu should be a component or something similar.
Optional it would be nice to have a drag and drop like movement like Material Design recommend it for a Backdrop Component (https://material.io/design/components/backdrop.html#usage)
Am I on the right track with the ion menu or can you name a better one?
Since your animation is very complex for the default ion-menu, you should better build your own component.
Here are some resources to help you : a codedrop demo to help you build the menu and a tutoriel to encapsulate it in your own custom ionic component.
Good luck in building this !
I need to do vertical slide View from bottom to top as in the screenshot below, I need to pull View, but I don't know how to do it. Maybe there is some kind of library?
you can use react-native-sliding-up-down-panel for this..
here is git link:-- https://github.com/Abhijeet-Ashapure/react-native-sliding-up-down-panel
or if you want some custom animation panel go for animation api or you may check react native PanResponder to make custom touch responding view.
To get your image like effect
you can check react-native-modalize library..
As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.