I use the following style on a component:
const styles = {
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',//About the shadow setting
shadowOffset: { width: 0, height: 2 },//About the shadow setting
shadowOpacity: 0.2,//About the shadow setting
},
textStyle: {
fontSize: 20
}
};
The shadow doesn't get rendered.
Can someone tell me why?
As A. Goodale said, shadow props are only for iOS. With Android, you can use elevation in your View style.
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
elevation: 4,
},
According to this page, the shadow props are only implemented on iOS.
Related
In react native sign in button I am trying to put icon as horizontally left and vertically at the center and the text at the center both horizontally and vertically. With the below code as soon as I do alignSelf as 'center' on the Icon it looses its vertical position. As per the documentation alignSelf should only ovverride the property in cross-axis and not main axis. Here the icon is SVG icon.
const GoogleSignInBtn = ({style, onPress, children}) => {
const {buttonStyles, textStyle, iconStyle} = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyles}>
<GoogleIcon style={iconStyle} />
<Text style={textStyle}>{children}</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10,
},
buttonStyles: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 5,
flex: 1,
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5,
},
iconStyle: {
height: 20,
width: 20,
alignSelf: 'flex-start',
},
[Screen Shot of output][1]};
Try
const styles = StyleSheet.create({
textStyle: {
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10,
marginHorizontal: 'auto',
},
buttonStyles: {
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 5,
flex: 1,
flexDirection: 'row',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5,
},
iconStyle: {
height: 20,
width: 20,
alignSelf: 'center',
},
});
You are indeed overriding alignItems, however it seems for whatever reason your flexDirection is implicitly set to 'column', so the icon is being set to the top of the flexbox.
Changing flexDirection to 'row' allows the items to be oriented horizontally, and thus alignSelf works as desired.
Additionally, I used marginHoritonal: auto to center the text.
See In CSS Flexbox, why are there no “justify-items” and “justify-self” properties? for more information on this.
I'm having a hard time setting some shadow only for the left and right part of a view like this: imgur
I've been trying to work out the properties on react-native-shadow-generator website but to no success. Anyone knows how / if this is possible to be achieved in react-native?
You can do like this:
return (
<View style={styles.mainContainer}>
<View elevation={5} style={styles.boxStyle}>
<Text>Box 1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: '#ebebeb',
padding: 10,
height : height
},
boxStyle: {
backgroundColor: '#fff',
alignItem: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginLeft: 30,
marginTop: 15,
width: 120,
height: 120,
padding: 12,
borderRadius: 8,
shadowColor: "00000",
shadowOpacity: 0.9,
shadowRadius: 4,
shadowOffset: {
height: 2,
width: 2
}
}
});
How can I drop shadow for rounded View.
I'm setting borderRadius to a value for round corners. But elevation property makes it square again. And without elevation it won't drop a shadow.
The code I'm using is
<View style={styles.container}>
<View style={styles.box}></View>
</View>
And for styles
const styles = StyleSheet.create({
container: {
padding: 20,
paddingTop: 60,
flex: 1,
backgroundColor: "#efefef",
alignItems: "center",
justifyContent: "flex-start",
flexDirection: "column"
},
box: {
width: "95%",
height: 250,
elevation: 1,
padding: 10,
borderRadius: 10,
shadowOpacity: 0.5,
backgroundColor: "#FFFFFF",
alignItems: "center",
justifyContent: "center"
},
});
You have to set the shadow radius with shadowRadius, example:
const styles = StyleSheet.create({
container: {
elevation: 8,
shadowColor: 'black',
shadowOpacity: 0.3,
shadowOffset: {
width: 2,
height: 2
},
shadowRadius: 5, // <- Radius of the shadow
borderRadius: 5,
padding: 16,
margin: 8,
},
})
Check out the ShadowProps documentation in React Native docs:
https://reactnative.dev/docs/shadow-props
const stile = StyleSheet.create({
loginButtonn: {
backgroundColor: "#fff",
borderRadius: 30,
height: 44,
marginTop: 30,
width: 326,
justifyContent: 'center',
alignItems: 'center'
},
});
This isn't very well written question, but I can try to answer it.
There are multiple ways of trying to achieve what you are trying to do. My favorite way is to use flexbox, which it looks like you tried to do. You can take a look at the link but here's what you're missing; (Basically just a parent element with display of flex)
const style = StyleSheet.create({
loginButton: {
backgroundColor: "#fff",
borderRadius: 30,
height: 44,
marginTop: 30,
width: 326,
justifyContent: 'center',
alignItems: 'center'
},
container: {
display: 'flex',
width: '100%',
height: '100%'
}
});
In render function (something like):
<div className={style.container}>
<button className={style.loginButton} />
</div>
My shadow is not working on iOS.
What am I doing wrong?
const styles = StyleSheet.create({
container: {
backgroundColor:'#F8F8F8',
alignItems:'center',
justifyContent:'center',
height:60,
paddingTop: 20,
borderBottomWidth:0,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 5
},
shadowRadius: 10,
shadowOpacity: 0.5,
elevation:3,
position:'relative',
},
});
You can use this to generate shadows for both iOS and Android
React native shadow generator
In fact, I tried it and it works fine on my already created TouchableOpacity Text:
<TouchableOpacity style={styles.TestView} onPress={()=> { this.doAction; }}
>
<Text style={[styles.normalText, styles.headerText, { color: colors.lighterPrimaryColor }]}>
TEST
</Text>
</TouchableOpacity>
And in style:
privateMessagesView: {
flexDirection: 'row',
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60,
paddingTop: 20,
borderBottomWidth: 0,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 5 },
shadowRadius: 10,
shadowOpacity: 0.5,
elevation: 3,
position: 'relative',
},
And here's the results on my android device:
If you want better results you can use react-native-cardview or you can use a card from a UI components library like native-base, react-native-material-design ..etc If you're using one.
Shadow in react native
import {Platform} from "react-native";
add below styles to View
{
backgroundColor: '#fff',
...Platform.select({
android: {
elevation: 2,
},
ios: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
},
}),
}
Try this (working for me):
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: "row",
marginTop: 15,
height: 35,
width: 170,
marginHorizontal: 20,
marginBottom : 10,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 5,
elevation: 1.5,
borderColor: '#e6e6e6'