I have a green background green buttons with icons, so the buttons are "invisible" and only the icons appear:
I would like to set elevation to the icons, but of course when I set it creates the elevation around the button:
Is there a way to make the elevation around the icon itself? Maybe blur it somehow? For iOS I'm just using:
shadowColor: '#000000',
shadowOffset: { height: 1 },
shadowOpacity: 0.15,
shadowRadius: 4,
Related
I'm using framer-motion to animate an Icon component when hovered as follow :
<Icon
initial={{ scale: 1, color: "#B9BBBE" }}
whileHover={{
scale: 1.15,
color: "#FFCC4D",
}}
transition={{ type: "spring", stiffness: 500 }}
>
<Emoji />
</Icon>
The Icon contains a simple SVG Emoji with a grey color #B9BBBE, and I also use this color in the initial prop.
I need the transition to go from that to the yellow #FFCC4D, but when I move out of the icon, it transitions back from the yellow to a shade of blue and then the initial grey color.
I can't figure out how to transition from yellow directly to the grey, without any weird colors in between.
I also tried to pass an array as follow, but still got the same result :
whileHover={{
scale: 1.15,
color: ["#B9BBBE", "#FFCC4D"],
}}
I guess stiffness creates this color "bounce":
A spring’s Stiffness determines the spring's velocity and how many times the spring will bounce before the spring settles and the animation ends.
So you need apply spring and stiffness only for scale property for bounce effect, and leave color as is:
<motion.div
style={{ height: 100, width: 100 }}
initial={{ scale: 1, backgroundColor: '#B9BBBE' }}
whileHover={{
scale: 1.15,
backgroundColor: '#FFCC4D'
}}
transition={{ scale: { type: 'spring', stiffness: 500 } }}
></motion.div>
Codesandbox
I am running into an issue in my react native app that uses react-native-autocomplete-input. The issue only occurs in android, which, according to the react-native-autocomplete-input has known issues:
Android does not support overflows (#20), for that reason it is
necessary to wrap the autocomplete into a absolute positioned view on
Android. This will allow the suggestion list to overlap other views
inside your component.
I am wrapping the autocomplete in an absolute positioned view, as suggested. And this solves some issues.
However, what's still happening is, if I have two autocomplete fields - one appearing higher on the screen than another, when the first field has the suggestion box open up, overlaying on the screen, if a user clicks on a suggestion that happens to line up with the input field immediately "under" that suggestion, the cursor suddenly jumps to that input field. So this is obviously some kind of zIndex issue.
The thing is, I have tried setting various zIndex values, so that the text field and its container has a lower value than the autocomplete suggestion box, but this is not preventing the behavior I described above from happening.
I have read about elevation in android. Is this something I can use, and if so, how? Any suggestions would be appreciated. Here is the relevant android styling for react-native-autcomplete-input. And list refers to the autocomplete suggestions box that overlays on the screen:
const androidStyles = {
container: {
flex: 1,
position: 'relative',
},
inputContainer: {
marginBottom: 0,
zIndex: -1,
left: 40,
},
input: {
zIndex: -1,
flex: 1,
flexDirection: 'row',
alignSelf: 'flex-start',
justifyContent: 'flex-end',
maxHeight: 200,
fontSize: 15,
borderWidth: 0,
textAlign: 'right',
},
list: {
...border,
backgroundColor: 'white',
borderTopWidth: 1,
margin: 10,
marginTop: 1,
zIndex: 99999,
borderRadius: 15,
width: '65%',
zIndex: 99999,
},
listContainer: {
zIndex: 99999,
}
};
I am trying to make a background using two View to look , but I am falling to set the "start" of the radius on the left size.
The result I get using :
borderBottomLeftRadius: '20%',
borderBottomRightRadius: '40%',
Is this:
But I want this:
I want the "radius" start more vertically
Any tips how I get this effect?
Thank you
Exact shaping like this through radius is probably not possible, I achieved this by use of transform: [{ scale }]
Here is the code
const { width } = useWindowDimensions();
<View
style={{
backgroundColor: '#00ffff',
borderBottomLeftRadius: width / 3,
borderBottomRightRadius: width / 2,
borderWidth: 2,
borderColor: 'black',
height: width / 2,
width: width,
transform: [{ scale: 1.4 }],
}}
/>
Here what it looks like, is this workable for you?
you can tweak the values a little bit to meet your requirement.
image inside the button appears blue. I cant figure out how to fix it.
Button(action: {self.count += 1}) {
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color("linkAccount1"), Color("linkAccount2")]), startPoint: UnitPoint(x: 0, y: 0.2), endPoint: UnitPoint(x: 1, y: 1)))
.frame(width: 80, height: 80)
.shadow(color: Color("shadowColor1"), radius: 7, y: 7)
.overlay(
//issue with image backgroud or foregroundColor
Image("linkAccount")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60))
}
Solution:
Image("linkAcount").renderingMode(.original)
As per my comment above, the issue is caused by the rendering mode of the Image.
You can overcome the tinting problem by using the .renderingMode() modifier, and setting the mode to be .original. This tells the image to ignore the tint.
Image("linkAcount").renderingMode(.original)
Images and Text contained within a button get rendred in accent colour, which by default is blue, just apply:
.accentColor(.white)
to your Button to have the image drawn in white.
I am using Highmaps in one of my web based application. Until now it was easy to modify it according to my use case but now i need to changes the border color of the region and i am unable to do it.
Code i have tried but failed:
chart: {
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
}
See attached image what i want to achieve
Want to change the outline color to white
http://jsfiddle.net/qLen614m/
You can use the stroke attribute of the path element:
path {
stroke: white;
}
There is an options to set border color for map series. It is borderColor and it should be set in series.
series : [{
borderColor: 'white',
...
API link
Example: http://jsfiddle.net/qLen614m/1/
You should use borderWidth property for series.
The border width of each map area.
series: [{
borderWidth: 2
}]
Here is the official demo.