I have following component:
<TouchableOpacity style={styles.event} onPress={onPress}>
<View style={styles.dateContainer}>
<Text style={styles.eventDate}>Sent at : {event.sentAt}</Text>
</View>
<View style={styles.eventTextContainer}>
<Text style={styles.eventText}>{event.text}</Text>
</View>
</TouchableOpacity>
then in my styles:
event: {
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
...Platform.select({
android: {
elevation: 5,
},
}),
eventTextContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
eventText: {
fontSize: 20,
fontWeight: '700',
}
The shadow is being applied to the text, which I dont want, only want it applied to the touchable opacity, what am I doing wrong?
This is similar to another stackoverflow question, the key to avoid this problem is applying a background color to the container with the shadow styles, in your case is the event style.
event: {
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
...Platform.select({
android: {
elevation: 5,
},
backgroundColor: "#FFF",
}),
Related
I'm creating a list with ScrollView and trying to use touchable opacity on all of the rendered items. There is only 6 items in the list but I can only get touchableOpacity to work on the last 2 items.
I'm using touchableOpacity in a components folder and then importing it into a ScrollView on another screen. Any idea what I'm doing wrong or how I can fix the issue?
component code below
const FlatBench = (props) => {
return (
<View>
<ImageBackground
style={Styles.secondaryImages}
source={require("../assets/images/FlatBenchPress.png")}
>
<TouchableOpacity style={Styles.textContainer}>
<Text style={Styles.text}>Flat Bench</Text>
</TouchableOpacity>
</ImageBackground>
</View>
);
};
const Styles = StyleSheet.create({
secondaryImages: {
width: "90%",
height: "80%",
marginTop: 200,
shadowColor: "black",
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
},
textContainer: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "black",
},
text: {
color: "#F5EDED",
fontSize: 20,
textAlign: "center",
},
});`
Screen ScrollView Code Below
const StatsScreen = (props) => {
return (
<View style={Styles.container}>
<View style={Styles.head}>
<BodyPartsImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Body Parts" />
</View>
</View>
<ScrollView style={Styles.scrollContainer}>
<View style={Styles.bottom}>
<View style={Styles.topItem}>
<TouchableOpacity>
<FlatBench />
</TouchableOpacity>
</View>
<View style={Styles.topItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
</View>
</ScrollView>
</View>
);
};
const Styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {},
top: {
flex: 1,
height: "1%",
alignItems: "center",
justifyContent: "center",
},
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
marginTop: -100,
},
bottomItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
marginTop: -30,
},
buttonA: {
marginTop: -70,
marginLeft: "12%",
borderWidth: 5,
borderColor: "#d72323",
alignItems: "center",
justifyContent: "center",
width: 120,
height: 40,
backgroundColor: "#00000000",
borderRadius: 10,
},
head: {
paddingBottom: -100,
},
});
You need to refactor your spacings and find a better combination:
you have fixed height for every FlatBench but you are putting them in a fluid height container and doing negative margins.
So the FlatBench height and its (very big) margin are covering each other.
If you remove the following lines you can achieve your layout with positive margins on (bottom, bottomItem, topItem)
FlatBench style fix:
secondaryImages: {
// width: '90%',
// height: '80%',
// marginTop: 200,
shadowColor: 'black',
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
}
StatsScreen styles fix:
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
// marginTop: -100,
},
bottomItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
// marginTop: -30,
}
As I know shadowOffset, Opacity, Radius is used for IOS, not Android, but i still added.
For Android, shadowColor should be enough i guess, if not, then I added elevation for it to work.
I try to give some shadow to some fields. I defined by style={styles.tracking}where i want to give some shadow.
I added these codes there: but it doesnt work, neither it gives an error.
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
here is styles.tracking
tracking:{
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
flexDirection:"row",
alignItems:"center",
justifyContent:"space-between",
marginVertical:20,
},
How can I show the shadow in this code?
<View style={styles.tracking}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Deliver style={styles.leftIcon} height={30} width={30} fill={"#008000"} />
<View style={styles.adressMargin}>
<Text style={styles.trackingId}>CKR90825567</Text>
<Text style={styles.trackingAdress}>Jakarta - Surabaya</Text>
</View>
</View>
<View style={styles.rightIcon}>
<Circle style={styles.rightMargin} height={8} width={8} fill={"#008000"} />
<Text style={styles.delivered}>Delivered</Text>
</View>
</View>
tracking:{
flexDirection:"row",
alignItems:"center",
justifyContent:"space-between",
marginVertical:20,
},
delivered: {
fontWeight: "bold",
fontSize: 17,
color: "green",
marginRight: 20,
},
leftIcon:{
marginLeft:30,
},
rightIcon: {
flexDirection:"row",
alignItems:"center",
},
adressMargin: {
marginLeft:30,
},
trackingId: {
fontSize:20,
fontWeight:"bold",
},
trackingAdress:{
color:"grey",
},
the screenshot
Shadow does not work in Android. You can use a View as background to apply shadow. Example
<View
style={{
padding: 10,
width: 200,
height: 100,
backgroundColor: 'grey',
borderRadius: 7,
zIndex: 2,
elevation: 40,
}}>
<Text
style={{
textAlign: 'center',
color: 'white',
}}>
Button
</Text>
</View>
<View
style={{
backgroundColor: '#d3d3d3',
marginLeft: 25,
marginTop: -100,
borderRadius: 7,
width: 195,
height: 108,
}}></View>
End Result
I am designing custom button in react native through TouchableOpacity. So far I have tried different styling approaches but didn't get like required design. below mentioned is my attempt to solve.
<TouchableOpacity style={styles.numericButton}>
<View>
<Text style={styles.numericButtonText}>1</Text>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
numericButton: {
margin:10,
padding:10,
backgroundColor:'#D3D3D3',
borderColor:'#000',
borderWidth:2,
borderRadius:5,
elevation:10,
shadowOffset: { width: 5, height: 5 },
shadowColor: "black",
shadowOpacity: 1,
shadowRadius: 5,
},
numericButtonText:{
fontSize:24,
fontWeight:'bold',
fontFamily:'Cochin'
}
});
result:
I want to style my react native button like this
We can achieve same type of button with react-native-linear-gradient
👆🏽was achieved with:
<TouchableOpacity>
<LinearGradient
// start={{x: 0.5, y: .5}} end={{x: 1, y: 1.0}}
style={styles.button}
locations={[0.3, 0, 0]}
colors={['#A8AFB5', 'white', 'white']}
>
<Text style={styles.buttonText}>{props.data}</Text>
</LinearGradient>
</TouchableOpacity>
const styles = StyleSheet.create({
button: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: null, height: 81,marginTop:5, borderWidth: 1 },
buttonText: {
//textAlign:'center',
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Cochin',
color: 'black'
}
});
Use following style and use more gradient to set the colors matching the design and check the reflected changes
numericButton: {
alignItems: 'center',
margin: 10,
padding: 10,
backgroundColor: '#D3D3D3',
borderColor: '#000',
borderWidth: 2,
//borderRadius:5,
elevation: 5,
shadowOffset: { width: 5, height: 5 },
shadowColor: 'grey',
shadowOpacity: 1,
shadowRadius: 5,
},
numericButtonText: {
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Cochin',
},
You're good to go!
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'
I wanna achieve button with shadow in react native with no border and spread, I have tried something like this,
{
shadowColor: 'black',
shadowOpacity: 0.8,
elevation: 6,
backgroundColor : "#0000",
shadowRadius: 15 ,
shadowOffset : { width: 56, height: 13},
borderWidth:0,
borderRadius:0,
}
But the shadow is not spreading and offset is not also working as expected. I want to achieve something like this,
Codepen
Tried adding it directly on Button but no luck. You can try this way by using TouchableOpacity.
import React, { Component } from 'react';
import { View, StyleSheet, Button, TouchableOpacity } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Button title="Submit" />
</TouchableOpacity>
<TouchableOpacity style={styles.buttonHover}>
<Button title="Submit" />
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
button: {
borderRadius:25,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 50,
paddingRight: 50,
backgroundColor: '#FFFFFF',
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowOpacity: 0.8,
elevation: 6,
shadowRadius: 15 ,
shadowOffset : { width: 1, height: 13},
},
buttonHover: {
marginTop: 10,
borderRadius:25,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 50,
paddingRight: 50,
shadowColor: 'rgba(46, 229, 157, 0.4)',
shadowOpacity: 1.5,
elevation: 8,
shadowRadius: 20 ,
shadowOffset : { width: 1, height: 13},
backgroundColor: '#2EE59D',
color: '#FFFFFF'
}
});