Hello React Native developers,
The code below produces the image in caption. I'm just wondering why the shadow of the first view (with the icon) is diminished compared to the black view. I added visible borders so you can see the difference between the two shadows. The "issue" both applies to Android & iOS platforms.
Is this really an issue or this is just normal behavior ?
<>
<View
style={{
alignSelf: 'center',
marginTop: 50,
width: 50,
height: 50,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 16.0,
borderRadius: 1000,
borderColor: 'red',
borderWidth: 1,
}}>
<Icon name="cog" type="ionicons" color="black" size={50} />
</View>
<View
style={{
alignSelf: 'center',
marginTop: 50,
width: 50,
height: 50,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 16.0,
backgroundColor: '#000',
borderRadius: 1000,
borderColor: 'red',
borderWidth: 1,
}}
/>
</>
Some function in React Native shadow works badly. Try to use https://github.com/SrBrahma/react-native-shadow-2 instead.
import { Shadow } from 'react-native-shadow-2';
<Shadow>
<Text style={{ margin: 20, fontSize: 20 }}>🙂</Text>
</Shadow>
Related
I have a parent element with 2 absolutely positioned children inside. I want one of the children's overflow to be visible and the other's overflow to be hidden. Like so:
Adding overflow: 'hidden to the parent hides the overflow of both the coin image and the 'most popular' sash but I want the coin image overflow to be visible.
container: {
width: 155,
height: 145,
backgroundColor: Colours.white,
borderRadius: 10,
borderColor: Colours.borderTwo,
borderWidth: 1,
alignItems: 'center',
justifyContent: 'flex-end',
margin: 10,
marginBottom: 25,
paddingBottom: 10,
overflow: 'hidden',
},
mostPopularSash: {
position: 'absolute',
top: 2,
right: -30,
backgroundColor: Colours.yellow,
width: 100,
height: 40,
alignItems: 'center',
justifyContent: 'center',
transform: [{rotate: '40deg'}],
},
imageContainer: {
position: 'absolute',
top: -22,
width: 52,
height: 52,
borderRadius: 100,
backgroundColor: Colours.white,
borderColor: Colours.pageColour,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#171717',
shadowOffset: {width: 0, height: 3},
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 5,
},
image: {
width: 40,
height: 40,
},
I've tried adding zIndex: 2 to the image container and then zIndex: 1 to the parents parent but it didn't work..
Can't find much online to solve this problem as most queries related to 'overflow' are requesting the opposite effect.
Any help would be much appreciated!
In iOS you can play with the zIndex
You can create a prop or a state that tells you which one is active.
For instance,
<View style={{zIndex:2}}>
{data.map(item => <CustomComp active={item.active} /> )}
</View>
In customcomp, you can set the parent style such as
style={{ props.active ? 3 : 1 }}
Make sure you have assign the zIndex to the container view
Manage to get the desired effect by wrapping the container that uses overflow: 'hidden' inside an outer container and then moving the imageContainer out of the container and into the outer container giving it zIndex: 1 and keeping it absolutely positioned as well as giving it alignSelf: 'center'
Like so:
outerContainer: {
width: '45%',
margin: 10,
},
container: {
height: 145,
width: '100%',
backgroundColor: Colours.white,
borderRadius: 10,
borderColor: Colours.borderTwo,
borderWidth: 1,
alignItems: 'center',
justifyContent: 'flex-end',
marginBottom: 25,
paddingBottom: 10,
overflow: 'hidden',
},
mostPopularSash: {
position: 'absolute',
top: 2,
right: -30,
backgroundColor: Colours.yellow,
width: 100,
height: 40,
alignItems: 'center',
justifyContent: 'center',
transform: [{rotate: '40deg'}],
},
imageContainer: {
zIndex: 1,
position: 'absolute',
top: -22,
alignSelf: 'center',
width: 52,
height: 52,
borderRadius: 100,
backgroundColor: Colours.white,
borderColor: Colours.pageColour,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#171717',
shadowOffset: {width: 0, height: 3},
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 5,
},
image: {
width: 40,
height: 40,
},
<View style={styles.outerContainer}>
<View style={styles.imageContainer}>
<Image source={image} style={styles.image} />
</View>
<View style={styles.container}>
{mostPopular && (
<View style={styles.mostPopularSash}>
<Text style={styles.mostPopularText}>Most</Text>
<Text style={styles.mostPopularText}>Popular</Text>
</View>
)}
<View style={styles.contentContainer}>
<View style={styles.textContainer}>
<Text style={styles.amountText}>£{amount}</Text>
<Text style={styles.bonusGemsText}>+{gemsBonus} NGems Bonus</Text>
</View>
<Button
text="Deposit"
backgroundColor={Colours.primary}
fontWeight="400"
fontColour={Colours.white}
fontSize={14}
style={{marginBottom: 0, height: 35, marginTop: 10}}
onPress={() => setModalVisible(true)}
/>
</View>
</View>
</View>
Credit to this answer: https://stackoverflow.com/a/67140055/13740590
I tried to add a shadow using the following code:
<View style={{alignItems: 'center'}}>
<View
style={{
width: '95%',
borderWidth: 1,
elevation: 5,
shadowColor: 'black',
shadowRadius: 10,
}}>
<TextInput
style={{
borderColor: colors.primary,
borderWidth: 1,
color: 'black',
fontSize: 18,
height: 64,
}}
onChange={input => this.onChange(input.nativeEvent.text)}
value={this.state.input}
/>
<View>{this.state.results}</View>
</View>
</View>
Somehow, the elevation effects the width and hight of the inner "box":
When I use elevation: 10:
When I use elevation: 0:
How can I set the shadow to be outside the boarder?
After a lot of testing, I figured out the problem was that there's no backgroundColor applied to the View with the shadow.
Now the shadow seems to work as expected
I would like to make a view that is blurred for non-subscribers to my application, with a lock, when we click we are redirected to the subscription page.
For subscribers I want the view to be visible without any filters.
I don't know how to set up a blurry view above my current view.
Can I do it only with CSS?
I saw the Animated package and react-native-blur but I am not sure of the relevance in my case.
I hope my question is clear and that you can help me. In any case, thank you for reading me.
I have this :
<View style={styles.statContainer}>
<ImageBackground
source={require("../../assets/images/stats-background-5.png")}
style={styles.statImage}
>
<Image
source={require("../../assets/images/lock.png")}
style={{
height: 30,
width: 30,
justifyContent: "flex-start",
alignItems: "flex-start",
}}
></Image>
<Text style={styles.statText}>
{i18n.t("stats.action.countries")}
{"\n"}
<AnimateNumber
value={this.state.stats.countries}
countBy={(
this.state.stats.countries / this.state.animateCountBy +
1
).toFixed(0)}
style={styles.statTextData}
/>{" "}
<Text
style={[styles.textimg, styles.measure]}
onLayout={this.handleLayout}
></Text>
</Text>
</ImageBackground>
</View>
Styles :
statContainer: {
flex: 1,
backgroundColor: "transparent",
marginVertical: 15,
justifyContent: "center",
alignItems: "center",
},
statText: {
fontFamily: "FunctionLH",
color: "white",
fontSize: 20,
paddingVertical: 5,
textAlign: "center",
alignItems: "center",
textShadowColor: "rgba(0, 0, 0, 0.90)",
textShadowOffset: { width: -1, height: 1 },
textShadowRadius: 10,
},
statTextData: {
fontSize: 40,
lineHeight: 50,
paddingVertical: 5,
textAlign: "center",
alignItems: "center",
},
statImage: {
height: 100,
width: "100%",
position: "relative", // because it's parent
justifyContent: "center",
alignItems: "center",
},
If i understood you correctly and you want to blur the image, you can use the blurRadius prop for your Image component:
<Image
source={require("../../assets/images/lock.png")}
blurRadius={5}
style={{
height: 30,
width: 30,
justifyContent: "flex-start",
alignItems: "flex-start",
}}
></Image>
I have a component in a website that looks like this:
Regular card
It's basically a div with an image inside it, but the image has a margin-top of -50 so that it overflows off the card.
I would like to accomplish the same thing with react-native and native-base. Here is the relevant code:
render() {
return (
<View style={styles.container}>
<Card>
<CardItem style={{ marginTop: -50, justifyContent: 'center' }}>
<Image style={styles.image} source={{ uri: this.state.band.imageComponent.link }} />
</CardItem>
</Card>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 150
},
image: {
width: 150,
height: 150,
)
And the result looks like this:
React-native card
As you can see, the picture is cutoff at the top. How can I keep the image overflow and have it overlay the card like in my first image?
Overflow is not supported in Android. There are lots of open issues for that. Check some of them here and here.
Here's an npm package that apparently solves that issue that you could try.
Otherwise you can use a workaround for that I found on this medium post.
According to your image you have to wrap your image and the container inside another View as siblings and then position them absolutely.
Here's the code that I tweaked a little bit from that post. You can replace the View according to your Card and CardItem styles.
<View style={styles.container}>
<View style={styles.cardSection1}>
<Image style={styles.image} source={{ uri: 'https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image' }} />
</View>
<View style={styles.cardSection2}>
</View>
</View>
const styles = {
container: {
flex: 1,
backgroundColor: 'grey',
alignItems: 'center'
},
image: {
width: 150,
height: 150,
},
cardSection1: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 50 / 2,
zIndex: 2,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 7,
},
cardSection2: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 25,
width: 300,
height: 150,
borderRadius: 8,
backgroundColor: 'white',
zIndex: 1,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 5,
}
}
This is the output that I got.
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,TextInput,Dimensions,Image } from 'react-native';
import ButtonRoundBorder from '../components/ButtonRoundBorder';
const window = Dimensions.get('window')
// create a component
class Login extends Component {
render() {
return (
<View style={styles.container}>
<Image style={{width:window.width,height:window.height,position:'absolute'}} source={require('../images/bg2.jpeg')}/>
<View style={styles.overlayImageStyle} >
<Image style={{flex:1,borderRadius:80}} resizeMode={'contain'} source={require('../images/profile.jpg')} />
</View>
<View style={styles.cardStyle}>
<View style={styles.insideCard}>
<Text style={{fontWeight:'bold',fontSize:20,alignSelf:'center'}}>Login</Text>
<TextInput style={[styles.textInputStyle,{marginTop:30}]} underlineColorAndroid='#000000' placeholder='Enter Email' />
<TextInput style={[styles.textInputStyle,{marginTop:20}]} underlineColorAndroid='#000000' placeholder='Enter Password' />
<ButtonRoundBorder style={{marginTop:40}} title='Login'/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'center',
backgroundColor: 'transparent',
},
overlayImageStyle:{
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 100/2,
backgroundColor: 'white',
top:50,
shadowColor: '#000',
// position: 'absolute',row
// shadowOpacity: 0.2,
// shadowRadius: 10,
elevation: 7,
},
cardStyle:{
// alignItems: 'center',
// justifyContent: 'center',
// position: 'absolute',
top: 80,
width: window.width - 40,
height: window.height - 200,
borderRadius: 8,
backgroundColor: 'white',
// backgroundColor: '#7E57C2',
shadowColor: '#000',
elevation: 5,
},
insideCard:{
top: 80,
alignContent: 'center',
justifyContent: 'center',
flexDirection:'column',
},
textInputStyle:{
width:300,
height:40,
alignSelf:'center',
}
});
//make this component available to the app
export default Login;
here is the link for screenshot
I am developing one sample application, in this application need to require Arrow card it is used to offer's showing cards.
I tried react-native shapes based , but i didn't get the out put.
Suppose if offered text increased automatically the arrow design shape also incremented
Here this is my Code:
<View style={styles.container}>
<View style={{ flex: 0.1, backgroundColor: "blue" }} />
<View
style={{
flex: 0.9,
backgroundColor: "green",
justifyContent: "center",
alignItems: "center"
}}
>
<View style={styles.baseTop} />
<View style={styles.baseBottom} />
</View>
</View>
baseTop: {
borderBottomWidth: 35,
borderBottomColor: "red",
borderLeftWidth: 50,
borderLeftColor: "transparent",
borderRightWidth: 50,
borderRightColor: "transparent",
height: 0,
width: 0,
left: 0,
top: -35,
position: "absolute"
},
baseBottom: {
backgroundColor: "red",
height: 55,
width: 100
}
This I need like this type of image here this is referenced Image:
That is how I implemented nearly same like as your image.
import React, { Component } from 'react';
import { Text, View,StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={{flex:1}}>
<View
style={styles.wrapper}>
<View style={styles.rectangle}><Text>6</Text> <Text>tens</Text> </View>
<View style={styles.rectangle}><Text>6</Text> <Text>ones</Text> </View>>
<View style={styles.triangle}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
wrapper: {
flexDirection: "row",
justifyContent: "flex-start",
flex: 0.2,
alignItems: "center",
paddingLeft: 29,
paddingTop: 0,
marginTop: 0
},
rectangle: {
width: 50,
backgroundColor: "yellow",
margin: 0,
justifyContent: "center",
alignItems: "center",
height: 52,
borderColor:"black"
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 27,
borderRightWidth: 27,
borderBottomWidth: 43,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor:"yellow",
transform: [
{ rotate: '90deg' }
],
margin: 0,
marginLeft: -6,
borderWidth: 0,
borderColor:"black"
}
});
Expo link https://snack.expo.io/rycpKiAe7
You could make a flex square, rotate it using Transform, and absolute position it to the proper place.
Or you can use react-native-svg and create an SVG, then position it accordingly.