As the title saying, how can we set only one side shadow of View in React Native, or hide any side shadow?
What I want is showing the only one side shadow, any solutions?
Use this
const style = {
shadowColor: "#000000",
shadowOffset: { width: 0, height: 2 }, // change this for more shadow
shadowOpacity: 0.4,
shadowRadius: 6,
}
For example:
shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View
shadowOffset: { width: 0, height: -10 } shadows place only in top of View
shadowOffset: { width: 10, height: 0 } shadows place only in right of View
shadowOffset: { width: -10, height: 10 } shadows place only in left of View
I have implemented it by two ways:
1.Using react-native-linear-gradient Plugin:
<LinearGradient start={{ x: 1, y: 0 }} end={{ x: 1, y: 1 }} colors={['#e4e2e4', '#FFF']} style={{height:8}} ></LinearGradient>
2.Without using Plugin:
<View style={{height:1,backgroundColor:'#e9e8e9'}} ></View>
<View style={{height:1,backgroundColor:'#e4e2e4'}} ></View>
<View style={{height:1,backgroundColor:'#efeeef'}} ></View>
<View style={{height:1,backgroundColor:'#f5f5f5'}} ></View>
<View style={{height:1,backgroundColor:'#fafafa'}} ></View>
<View style={{height:1,backgroundColor:'#fdfdfd'}} ></View>
<View style={{height:1,backgroundColor:'#fefefe'}} ></View>
<View style={{height:1,backgroundColor:'#fff'}} ></View>
Yes, You can make your shadow of your own view using like this code:
<View style={{borderTopColor:'#ebebeb',borderTopWidth:1,borderBottomWidth:5,borderRightWidth:2,borderLeftWidth:2,borderColor:'#bcbaba',}}>
</View>
This help me pls use this according your use..
Related
I am trying to create a shadow over the bottom part of an image like in the example I have provided. I was thinking about just overlaying a linear gradient and changing the opacity maybe, I am not even sure how accurately this would portray it but I am assuming there is a better way.
To be clear, I do NOT want to create a shadow on the outside of the image, I want it to overlay the image.
Thank you guys for any insight at all!
Linear Gradient to achieve using expo linear gradient
<View style={{borderBottomLeftRadius: 30, borderBottomRightRadius: 30, overflow: 'hidden', top: 125}}>
<LinearGradient
colors={['transparent', 'rgba(0,0,0,0.4)', ]}
style={{width: 300, height: 100,}}>
</LinearGradient>
</View>
I found a good library here to use, the usage in their example provided exactly what I am looking for with easy to use props.
https://www.npmjs.com/package/react-native-inset-shadow
import React from "react";
import { View, Image, } from "react-native";
const ShadowExample = (props) => {
const imageURL = "https://designpress-10674.kxcdn.com/wp-content/uploads/2012/10/funny-horse-pictures/happy-to-see-you.jpg"
const localStyles = {
withShadowStyle: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.50,
shadowRadius: 4,
elevation: 3,
},
};
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<View style={{ ...localStyles.withShadowStyle, padding: 10, }}>
<Image source={{ uri: imageURL, }} style={{ width: 200, height: 200, }} />
</View>
</View>
)
}
P.S. Check out the React Native shadow generator:
https://ethercreative.github.io/react-native-shadow-generator/
I am using this package to create a Swiper in React Native.
I used static data and it is working, but now I'm fetching data from server and save it in the state as an Array.
The problem is when mapping the data inside the swiper to create dynamic sliders, it is not showing anything, but if I do it outside of the Swiper it is rendering.
How can I solve this problem?
<Swiper
from={0}
minDistanceForAction={0.1}
controlsProps={{
dotsTouchable: true,
prevPos: 'left',
nextPos: 'right',
nextTitle: '',
prevTitle: '',
dotsWrapperStyle: { marginTop: ScaleHelpers.CalcHeight(8), width: ScaleHelpers.CalcWidth(7), height: ScaleHelpers.CalcHeight(7), borderRadius: ScaleHelpers.CalcWidth(7) },
dotActiveStyle: { width: ScaleHelpers.CalcWidth(7), height: ScaleHelpers.CalcHeight(7), borderRadius: ScaleHelpers.CalcWidth(7) },
}}
>
{
this.state.notifications.map((notif, index) => {
return (
<View style={[styless.slideContainer]}>
<Card transparent style={{
flex: 0,
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 1.0,
}}>
<CardItem
style={{ paddingTop: ScaleHelpers.CalcHeight(14), paddingLeft: ScaleHelpers.CalcWidth(14), paddingBottom: ScaleHelpers.CalcHeight(14) }}
>
<Left>
<View style={{
width: ScaleHelpers.CalcWidth(60),
height: ScaleHelpers.CalcHeight(60),
borderRadius: ScaleHelpers.CalcWidth(60) / 2,
margin: 0,
padding: 0,
justifyContent: 'center',
backgroundColor: '#FF004E',
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: ScaleHelpers.CalcHeight(2) },
shadowRadius: 1.0,
}}>
<Image source={bmwerror} style={{ alignSelf: 'center' }} />
</View>
<Body style={{ marginLeft: ScaleHelpers.CalcWidth(23) }}>
<Text style={styles.cardUpperText}>{notif.msg}</Text>
<Text style={styles.cardLowerText}>{notif.axle}{notif.side}</Text>
</Body>
</Left>
</CardItem>
</Card>
</View>
)
})
}
</Swiper>
From the documentation of the module:
Dynamic content
The Swiper will not be re-rendered if slides state or props have changed. Slides must control their condition.
This means that you have to manage state change on your own through your slides and not through Swiper component.
EDIT:
So, you can create a custom Slide module to handle those slides coming from server as:
class Slide extends React.Component {
constructor(props) {
super(props);
// your state for the slide component goes here....
}
render() {
const { msg, axle, side } = this.props.notification; // destructure your notification prop being passed from the map method of parent component
return (
<View style={[styless.slideContainer]}>
<Card transparent style={{
flex: 0,
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 1.0,
}}>
<CardItem
style={{ paddingTop: ScaleHelpers.CalcHeight(14), paddingLeft: ScaleHelpers.CalcWidth(14), paddingBottom: ScaleHelpers.CalcHeight(14) }}
>
<Left>
<View style={{
width: ScaleHelpers.CalcWidth(60),
height: ScaleHelpers.CalcHeight(60),
borderRadius: ScaleHelpers.CalcWidth(60) / 2,
margin: 0,
padding: 0,
justifyContent: 'center',
backgroundColor: '#FF004E',
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: ScaleHelpers.CalcHeight(2) },
shadowRadius: 1.0,
}}>
<Image source={bmwerror} style={{ alignSelf: 'center' }} />
</View>
<Body style={{ marginLeft: ScaleHelpers.CalcWidth(23) }}>
{/* use your destructure constants where required */}
<Text style={styles.cardUpperText}>{msg}</Text>
<Text style={styles.cardLowerText}>{axle}{side}</Text>
</Body>
</Left>
</CardItem>
</Card>
</View>
);
}
}export default Slide;
I have mentioned in comments how you can take the required information out of the notifications object.
Now comes the sending part, in your map function just call your newly created Slide component and pass the notification object as a prop like this:
<Slide notification={notif}/>
Notice here, in notification={notif} notification would serve as the name of the prop in Slide component and there you have to extract information from this.props.notification object as mentioned earlier.
I would like to know how to apply shadow only to the main outer view. Here on applying shadow, it's getting applied to all the inner elements
The trick to make the shadow props of parent don't inherit to children element, is to set a background color to the component on which you set the shadow. For example that would be:
<View
style={{ backgroundColor: '#fff' }}
shadowOffset={{height: 10}}
shadowColor='black'
shadowOpacity={0.5}
>
<Text>{title}</Text>
</View>
Unfortunately this only works with colored backgrounds – when setting a transparent background with RGBA or 'transparent' is doesn't help.
I cannot really answer based on a simple image, but from my previous experience, setting shadow offset to the required height and width should do the trick for the iOS.
Read more about it here: Shadow Offset
Here's a picture of what my card looks like with the following style used:
marginLeft: 10,
backgroundColor: 'white',
shadowColor: 'blue',
alignItems: 'center',
shadowOffset: {width: 3, height: 3 },
shadowOpacity: 1.0,
borderRadius: 10,
My card View
Hope it works out well for you.
Display custom shadow color >= 28 or >= P for above Sdk level 28
Code
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View
style={{
shadowColor: 'purple',
height: 150,
width: '90%',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
//android specific
elevation: 10,
//ios specific
shadowOffset: { width: 1, height: 1 },
shadowRadius: 3,
shadowOpacity: 0.5,
}}>
<Text style={{ color: 'rgba(128,0,128,0.5)' }}>
Welcome to React Native
</Text>
</View>
</View>
In android we can adjust shadow by elevation property
In iOS we can adjust shadow by shadowOffset, shadowRadius,shadowOpacity property
Output android
Output iOS
Available library for further usage
react-native-shadow-2
react-native-drop-shadow
Create a Shadow.js
export const Shadow = (elevation) => { // Receive elevation as a prop
return {
elevation,
shadowColor: 'black',
shadowOffset: { width: 0, height: 0.5 * elevation },
shadowOpacity: 0.3,
shadowRadius: 0.8 * elevation,
};
};
import Shadow.js to the page where you want to apply
import Shadow from './Shadow' //path to Shadow.js
<View style={{Shadow(5)}}> // pass elevation as a prop to Shadow.js
</View>
if you want to use in styles
import Shadow from './Shadow' //path to Shadow.js
<View style={styles.shadow}>
</View>
const styles = StyleSheet.create({
shadow:{
...Shadow(5) //use spread operator
}
});
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}/>
I'm using following style for the loading view(Last child).
overlay: {
flex: 1,
zIndex:2,
position: 'absolute',
height:HEIGHT,//(HEIGHT & WIDTH obtained from Dimensions)
width:WIDTH,
backgroundColor: 'black',
opacity: 0.5,
alignItems:'center',
justifyContent:'center',
}
This view should cover whole screen. But at bottom some margin is there.
How to remove it?
SOLUTION: Actually problem with KeyboardAwareScrollView. I solved it by giving contentContainerStyle={{flex:1}}
<KeyboardAwareScrollView
style={styles.scrollView}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={{flex:1}}
scrollEnabled={true}>
//All children
<LoadingView style={styles.overlay}/>
</KeyboardAwareScrollView>