I've created bottom navigation with a custom floating button inside. Button/Menu is opening, but elements inside (with a red circle) are not touchable because the gray container is above them probably. This small fragment of the blue add button which is overlapping the gray container is also not touchable.
I was trying to add zIndex/elevation for menu buttons - but it doesn't help.
How to make a whole floating menu above on all containers.
All elements have a position set to absolute.
Code Reference
https://gist.github.com/gtarnowski/3b36deaeed71abee3d5e84567aa37eea
Image Reference
https://i.stack.imgur.com/fGkw0.jpg
I've tested the code you sent me and it seems to be working correctly. It's emitting the logs.
Below is the Snack link I created:
https://snack.expo.dev/#lineuxyz/greg-error
Related
I am trying to make the bottom sheet touch the bottom of the screen rather than the bottom of the tab bar.
screenshot
Attempts to increase the z-index and position it further down are fruitless as the View will not overlap the bottom bar, it will always go behind it.
I tried to wrap it in a Modal component, which fixes the alignment, but then you can not interact with the map.
To create a custom bottom sheet. You can use this package
react-native-actions-sheet
I have used this in many applications. This will resolve all of your issues. As this package is comfortable in iOS and android both.
You can try the bottom sheet libraries which are present in react native. Few of which I have used is:
react-native-raw-bottom-sheet //my choice
react-native-actions-sheet
You can also check this out
I've been trying to implement a rather common UI pattern. I've got a react-navigation MaterialTopTabNavigator that contains a number of ListViews. When the currently active ListView is scrolled down, the header above the Tabs is supposed to be hidden (by translating it up, out of the viewport), the tabs should as well move up.
Like in this picture
The problem I'm facing here is either
a) if i translate the header and the tabs up, i need a paddingTop in the lists to make sure the first item is completely visible. But if i scroll down and the header is hidden and then switch to the next tab (where the list is scrolled to the top) the padding will be visible.
or
b) If i translate the whole thing (header, tabbar, and ListView) the paddingTop is not necessary (I can add a padding at the bottom and hide it via a BottomTabNavigator) but the animation gets jerky on android.
There seems to be a bug in react-native causing this.
But there are apps around for Android that implement this pattern.
I'd be grateful for any ideas or pointers around this.
I watched this presentation and there's a section on how to build an IOS Maps like UI. When dragging from the bottom to top, it drags to the top, and after it reaches the top, it continues scrolling up. Also, when scrolling down, when it reached the top content of the ScrollView, it continues to drag down.
It is suggested that it can be done using ScrollView by adding an empty transparent cell as the first element on the ScrollView. I have tried implementing the same which can be found in this snack. In my case, instead of Maps, I am using another ScrollView.
But the problem is that the first element (transparent element) does not allow to interact with the First ScrollView elements. I have tried with pointerEvents inside the first transparent view and even in its parent ScrollView. But this does not help. Has anyone tried implementing this kind of use case with react-native? All I found was this library, but I think it's not maintained properly.
you need to set the z-index of the transparent view to send it under/behind the interactive content, here is a good resource:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Edit: Actually I could not accomplish it, it seems like everything inside a scrollview will always be behind or in front of other elements, it seems like you can't have part of the scrollview behind something else and another part in front of something else.
How do I get the new toolbar item style of OSX Yosemite?
I created a standard toolbar, but the buttons don't have that button-like look. Do I need to drag actual buttons to the toolbar to get this look?
What I have:
What I want (that round bezel and white background):
There are two types of items in toolbars, image items and view items. It looks like you have an image item. You seem to want a view item where the view is an NSButton configured as a round textured button. So, yes, you should drag actual buttons to the toolbar.
I would not attempt to control the button background. You should use the button as-is to get the default system appearance. Apple recommends using a PDF template image (all black with the alpha channel used to make the image). The button itself would not have a title/label. Rather that would be on the containing toolbar item.
It looks like you may have applied an internal blue "glow" or highlight to your image. Generally, you should not do that. Let the frameworks apply appropriate effects to the template image automatically based on the button state and shows-state-by mode.
Toolbars in the Human Interface Guidelines
Controls which are appropriate to use in the window frame (including the toolbar)
Designing images for toolbar buttons
Works just fine for my Cocoa app under Yosemite -
are you actually setting the template property for your icon images..?
From the NSImage docs:
The 'template' property is metadata that allows clients to be smarter
about image processing. An image should be marked as a template if it
is basic glpyh-like black and white art that is intended to be
processed into derived images for use on screen.
I want to make a dynamic animated slider with symbols that contain clickable actions vs a slider image only approach. I would like to use a "next" button and a "back" button that will scroll multiple background images that contain clickable links. I can produce a basic image slider with the back and next buttons, but this approach is limited. Any help on how I can do this in Edge Animate CC will be very appreciated.
I was looking for a very simple slideshow a while ago. Came up with this here:
http://jquery.malsup.com/cycle/
If you want your Slides to contain any clickable items you will be able to simply add them to the sides div. Just set the picture as a background image in CSS and you are free to develop any clickable items infront.
Here is another tutorial that worked fine for me: http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle
To me this is easy to understand and if you are used to jQuery at least a little bit this here will work out fine for you.