I'm hoping to understand how I can achieve this behavior using Jetpack Compose in Android when displaying a dialog on top of the current Composable view.
Desired State:
Animation when clicking on the Filter button at the bottom. This is from the app Culture Trip on iOS.
I currently have a dialog like below. If you notice, my content is still visible but I would like to have it appear as if it's a page layer that's in the background.
Notice the red arrow in the desired state picture. I can mimic that behavior by having a row and setting the background color with padding but looking for a more elegant solution or wondering if there is standard behavior that I don't know about.
Actual State:
For displaying your dialog above, you need to use Box and call dialog at the very bottom of this Box.
Related
I've recently upgraded to react-navigation v6 for various functionality upgrades but seem to be having some difficulty understanding the recently added presentation prop available on stack navigators.
I'm working exclusively for IOS and what I basically want to achieve is the same drag-to-close behaviour presentation="modal" gives by default but without the asthetic look of the new screen being stacked on top of the previous screen.
I've made a basic example to highlight what it is I mean which will hopefully make more sense than my words.
If you set presentation to modal inside the Routes.js (line 56), on button click the modal will render and the user is able to drag down on the screen to close it. If however I use presention="transparentModal", you lose the dragging functionality.
Is it possible to get this dragging functionality when using this presentation type?
EDIT
Link to minimal example: https://snack.expo.dev/BpTJ1Cu9m
I'm rendering a CommandButton with only an icon inside a container with a dark background with gradient and I have set the background color of the button to be transparent. (Note that it is transparent because the container's background color has a gradient.)
The problem I have is that since the default focus outline for the button is black and it's not visible against the dark background. How can I change this so that the focus outline becomes the invert color of the primary color?
I can always attach a custom CSS to change the outline color, but I'm looking for the correct way supported by the Fluent UI framework. I noticed that the Button component puts a white background color when the primary=true prop is specified. So, there seems to be a way to change the outline color, but I could not really figure out how. I also looked into the source code, and it takes a theme object and generates a class name, but this still did not tell me the full story.
There are sometimes ::after selectors in play with FluentUI focus behavior. The "Chrome version >= 86" portion of this answer shows how to put Chrome in a state that will yet you inspect your components without losing focus in the page when you navigate in DevTools.
When I encounter focus styling that I want to change in Fluent, I can find out what's applying the styles I wish to alter using this method and then override them.
The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.
I did quite some search and documentation reading, so I seem to have the following four options:
Use an Alert window and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area.
Using some promising-looking component which is very beta like react-native-popupwindow is not really an option either.
Use a modal component which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option.
However, some people say that you should rather use Overlay and use Modal only as a last resort.
Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?
Related question(s) here on StackOverflow:
Transparent overlay in React Native
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
I have a form in my app that has a floating bar with buttons that animates into the view at the bottom of the window when the user makes any change to any of the data in the form. I have this bar rendering relative to the height of the window so it knows when the keyboard is open or closed and will attach to wherever the bottom of the view window is at any give time.
The issue I have is the form is wrapped in a KeyboardAvoidingView around the form with a behavior of padding and this all works great, however when I make my change and my floating button bar comes up, because the input is at the bottom of the window the bar now covers up the input I'm typing in.
I haven't been able to find a way to fix this yet. I tried disabling the KeyboardAvoidingView I assume that maybe I need to somehow tell the view about this bar that's covering up part of the view but I'm not sure how I do that.
here is a snapshot of what this looks like for reference...
This is my first mac application. I've written for iOS before and have been able to accomplish this same goal.
I'm trying to change the background color of a custom view. In the photo below, the two views are named view0 and view1.
Here's the code I'm trying to use to accomplish this (in the AppDelegate.m file):
- (IBAction)upPressed:(id)sender {
NSLog(#"upPressed");
self.view0.layer.backgroundColor = CGColorCreateGenericRGB(1, 0, 0, 1);
}
I'd like the color of view0 to turn red upon pressing the up button. The button click registers fine.
When I run the simulator, the views do not even show up.
Upon clicking the up button, nothing changes.
Why is this single line of code inadequate? In iOS, I was able to use a similar method of setting the background color of a view to simply make its color change.
Select the custom view and then select the 'Show View Effects Inspector' in the right pane (looks like 3 pieces of paper on top of each other in Utilities Window). Check the box next to Custom View under Core Animation Layer. This will enable the Core Animation for that view type.