I'm new at react native development, I want to make a card with a semi circle like this:
I tried something with :
borderRadius:'45%',
bottom:10,
right:10,
And get that this result, but isn't what I need
You can do this works
<View style={{
width: '90%',
height: 160,
backgroundColor: 'white',
elevation: 4,
borderRadius: 40,
overflow: 'hidden',
alignSelf: 'center'
}}>
<View style={{
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 80,
borderTopRightRadius: 80,
backgroundColor: '#f29a50',
elevation: 4,
}}>
{/* Your Icon */}
</View>
</View>
[1]: https://i.stack.imgur.com/4tcEh.png
Putting overflow: "hidden" on the parent View solved the overlay issue.
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 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>
Is it possible to make the <View /> having the same height? I am fetching a data from server side and some content are short and some are long. So when I display them in a box form, the height of the box aren't same. If I fix the height or minimum height the long text will exceed the height of the box.
EDIT : Sample code
DisplayEguides(){
var winsWidth = Dimensions.get('window').width;
if(this.state.eguides != null){
var eguides = this.state.eguides.map((data, i)=>(
<View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
<View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
<Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
<AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
</View>
</View>
</TouchableOpacity>
</View>
))
return (
<View style={{ paddingHorizontal: 15 }}>
<AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
</View>
);
}
}
Seems like Flexbox in react native is doing the job but need to place at the right element. Setting the view to flex: 1 will auto adjust all content inside it to have the same height. In my case, I have to set flex: 1 at TouchableOpacity since my box style is in this element.
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
{ /* The rest of code goes here */ }
</TouchableOpacity>
i have tries so many times but when usting different component in scroll body it just not adjust on to the content therefor some content are not included in scrollView. it has cut as shown as in the image..any sugession for fix..?
sample code i used
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
some code in the class
<ScrollView>
<View style={styles.middleview}>
<TextInput
style={styles.textinputs}
placeholder="Location"
placeholderTextColor='grey'
/>
<TouchableOpacity>
<Text style={{fontSize:20}}>
Post Ad
</Text>
</TouchableOpacity>
</view>
</scrollView>
styles used
textinputs: {
backgroundColor: 'white',
paddingTop: '2%',
paddingBottom: '2%',
paddingLeft: '4%',
paddingRight: '4%',
width: '90%',
borderRadius: 50,
margin: '3%',
color: 'grey',
height: '8%',
borderColor: 'white',
borderWidth: .8,
elevation: 10,
middleview:{
backgroundColor: 'lightblue',
flex: 1,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
alignItems: 'center',
justifyContent: 'center'
}
here is the image below its cut the component scroll view is ended in the middle of components..
Add style to the scrollview using "contentContainerStyle"
Working eg: https://snack.expo.io/#msbot01/rebellious-cookie
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