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
}
}
});
Related
I am trying to give shadow to my custom card component but the shadow cuts down the view like this:
Here is my code
import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'
const { width } = Dimensions.get('window')
export default function CardCus() {
return (
<View style={{
justifyContent: 'center', alignItems: 'center', padding: 10
}}>
<View style={styles.container}>
<View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
<Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
</View>
<View style={{ margin: 10, padding: 5 }}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: width - 10,
},
title: {
fontWeight: 'bold'
}
}
)
I have tried many different style settings but none of them work. Is there a way to solve this issue? Thanks in advance.
So related to your question, it was hard to understand at first.
I just added the properties zIndex and backgroundColor to the container style and increased the value of the elevation and now it looks better. Also improved the readability.
See the comments in the improved code below:
import React from 'react';
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native';
export default function CardCus() {
const imgUri =
'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940';
return (
<View style={styles.main}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: imgUri }} />
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 10, // changed to a greater value
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: Dimensions.get('window').width - 10,
zIndex: 99, // added zIndex
backgroundColor: 'white', // added a background color
},
title: {
fontWeight: 'bold',
},
imageContainer: {
width: 110,
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
backgroundColor: 'white',
},
image: {
width: '100%',
height: '100%',
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
},
textContainer: {
margin: 10,
padding: 5,
backgroundColor: 'white',
},
main: {
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
});
You can adjust the values to make the shadow darker. And this is how it looks:
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,
}
I have this problem and I have not been able to solve it, how can I make view 1 limited by view 2?
I need view 1 not to leave the edges of view 2, the image is on the outside, it should be cropped limited by view 2, I don't know if I make myself understood
<View style={styles.container}>
<View style={styles.progressBar}>
<Animated.View style={[styles.absoluteFill, { borderRadius: 30, backgroundColor: colors.blue2, width }]} />
</View>
<Text style={styles.progressText}>
{`${progress}%`}
</Text>
</View>
const styles = StyleSheet.create({
absoluteFill: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
progressText: {
position: 'absolute',
color: colors.white,
fontFamily: "OpenSans-Regular"
},
container: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: 30,
borderRadius: 30,
},
progressBar: {
//alignSelf: 'baseline',
height: 30,
width: '100%',
backgroundColor: colors.blue3,
borderRadius: 30
}
})
thank you
You need to add an overflow: hidden at your progressBar style.
progressBar: {
height: 30,
width: '100%',
overflow: 'hidden',
backgroundColor: colors.blue3,
borderRadius: 30
}
I did this live demo for you:
https://codesandbox.io/s/vibrant-fermi-49ztl?file=/src/App.js
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!
I've been trying to add a shadow to an image and display it on an iOS device, but it just not showing up.
Any idea what I'm missing?
Here's the JSX:
<View style={styles.container}>
<Image style={styles.pic} source={pic} />
</View>
And the styles:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
pic: {
width: 200,
height: 200,
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
backgroundColor: '#0000',
},
});
You can view the live demo here.
According to React-native documentation : https://facebook.github.io/react-native/docs/image-style-props
There is no shadow possibilities for an Image style, thus you need to wrap it in a View and add a shadow to this view :
<View style={styles.mainContainer}>
<View style={styles.imageContainer}>
<Image style={styles.pic} source={pic} />
</View>
</View>
And style it like this :
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
imageContainer: {
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
backgroundColor: '#0000',
},
pic: {
width: 150,
height: 150,
},
});