I'm using native-base's Content to scroll and i want a fixed button on bottom when scrolling. How can i show the shadow of fixed button over scroll view Items like this.
But what i achieve is this
My Code
<Container>
<Content>
...
</Content>
<View style={styles.footer}>
<Button style={styles.footerBtn}>
<Text>{strings('consultant_profile.book_an_appointment')}</Text>
</Button>
</View>
</Container>
//Css
footer: {
padding: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
},
It is hard to implement such gradient effect in react-native because of the limitation of it on shadow. For Android API 27 or below, you cannot even change the color of elevation in Android by using shadowColor.
For your situation, I would recommend you to use react-native-linear-gradient.
After installed the package simply place the below component at the top of your button, it might do the trick.
<LinearGradient colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']} {...otherGradientProps} />
Try to add to following style to the button styles:
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4
If it's not working then please share more of the your component code so it will be easier to try help you out.
You can animate items opacity to get something similar look.
Related
I need to add a blur effect on a text.
If I were using React, I would use the filter css property.
But I can't find the equivalent syntax to use it in a React native stylesheet.
How do i need to write it ?
you can install react-native-blur / expo-blur
If it's not working for you, this is a workaround/hack that clones the look of blurry text. You can adjust the values to your liking.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
I'm trying to create this button into my React Native project.
The problem is with that blue shadow. I've already tried packages like react-native-neomorph-shadows. I also tried with:
shadowColor: COLORS.primary,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
About this, the problem is that the shadow isn't powerful enough.
Do you have any ideas how can I do this? Thank you!
EDIT: Maybe this helps... In the design file that effect is made by blurring a blue button and positioning it behind the real button. I've tried this also by using react-native-blur package but the result is also bad.
On IOS you won't need any packages you can just use react-native's shadow props described here: https://reactnative.dev/docs/shadow-props
There is also the elevation property for android, but you won't be able to change the color:
https://reactnative.dev/docs/view-style-props#elevation
Here's an IOS example view with a similar shadow effect:
<View style={{
backgroundColor: '#22A7F0',
height: 48,
width: 240,
borderRadius: 10,
shadowOpacity: 1,
shadowRadius: 10,
shadowOffset: { width: 0, height: 0 },
shadowColor: '#22A7F0',
}}/>
It is noteworthy that the sample you provided combines both a shadow effect and a LinearGradient, so you may want to look into that as well.
The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.
The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".
How can we blur a Text component in React Native?
Info: I just want to make an app where the user does not see the answer directly (via blurring).
If you don't want to install react-native-blur / expo-blur or it's not working for you, this is a workaround/hack that mimics the look of blurred text in a View. The values can be adjusted as necessary.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
Install react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...
You can simply use css to do it, feel free you change the amount of opacity, offset, color, radius as your requirement
<Text
style={{
color: "#fff0",
textShadowColor: "rgba(255,255,255,0.8)",
textShadowOffset: {
width: 0,
height: 0,
},
textShadowRadius: 10,
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
}}
>
Blurred
</Text>
I am new to react native and I want to create a show of a view. I am
attaching the image below:-
For the solution I just thought that I would append a Image similar to the shadow, but is there any other way to create this by using any stylesheet?
My view code with css I am giving here
.
<View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15,flex:1}}>
<View style={{flex:2,backgroundColor:"#388E3C"}}></View>
<View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
</View>
My full screen is here:-
if you want to create a shadow of the view you should use:
const shadowStyle = {
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6.27,
elevation: 10,
}
<View style={shadowStyle}/>
Is there a way to apply a shadow AND a borderRadius to a View component, with the shadow following the rounded corners ?
Currently you have to set overflow: 'hidden' for borderRadius to work, but doing so removes the shadows.
It apparently is an old and known issue in React Native, likely not going to be fixed in the near future. A workaround was proposed in this issue, of superposing two Views but no code sample was given.
Can anybody give a code example of this proposed solution ? Will it follow the rounded corners (I doubt it) ?
Is there a package with some native binding voodoo doing the trick ?
Is there another solution ?
I already tried the solution from this question but it did not work for a View, the borderRadius prop does not work and triggers a warning advising to nest it in a style prop.
You can make use of this tool to generate parameters to shadows for both android and iOS.
And the trick is to make two Views, one for shadow with transparent background, other for the Content itself, both of them with the same borderRadius so a basic card will look like this:
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default () => {
return (
<View style={styles.cardShadow}>
<View style={styles.cardContainer}>
<Text> Card Content </Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
cardShadow: {
borderRadius: 16,
backgroundColor: 'transparent',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
cardContainer: {
backgroundColor: '#fff',
borderRadius: 16,
overflow: 'hidden',
},
});
In essence this is what you need to make a View with shadow and rounded corners, you could add also some margin/padding and flexbox to make a nice floating card.
Yeah this is what they meant by that:
const shadowsStyling = {
width: 100,
height: 100,
borderRadius: 10,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
<View styles={shadowsStyling}>
<View styles={{width: '100%', height: '100%', borderRadius: 10, overflow: 'hidden'}} />
</View>