I thought this would be simple to produce but I can't seem to get it looking right, I just want an X button - created 2 Views with 45deg rotation but for some reason they dont look equal length.
Header.js
<View style={styles.hamburgerContainer}>
<View style={[styles.hamburgerLine, styles.crossLine1]}></View>
<View style={[styles.hamburgerLine, styles.crossLine2]}></View>
</View>
const styles = StyleSheet.create({
hamburgerContainer: {
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
},
hamburgerLine: {
height: 3,
width: 30,
marginVertical: 3,
backgroundColor: Colors.primary,
},
crossLine1: {
marginVertical: 0,
transform: [{rotate: '45deg'}],
},
crossLine2: {
marginVertical: 0,
transform: [{rotate: '-45deg'}],
},
})
Result:
Appreciate any help here
Make the position absolute for the lines so they start on the same axis and can overlap:
hamburgerLine: {
height: 10,
width: 300,
marginVertical: 3,
backgroundColor: Colors.primary,
position: 'absolute' //add this
},
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 am implementing a tile in reactnative and I have to make the Image right in the tile just like this
What I want (click here)
and this is what I can implement till now
What I get ()
this is my code
<View style={styles.container} >
<Image
style={styles.image}
source={item.image}
resizeMode="cover"
/>
<View style={styles.overlay} />
<View style={styles.textContainer}>
<Text style={styles.subText}>{item.title}</Text>
<Text style={styles.headingText}>{item.message}</Text>
</View>
</View>
and this is style
const styles = StyleSheet.create({
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end',
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
marginTop: 20
},
image: {
width: COURSE_ITEM_WIDTH,
height: 120,
borderRadius: 10
},
textContainer: {
position: 'absolute',
left: 16,
flex: 1,
},
headingText: {
fontSize: 18,
color: '#ffffff',
marginTop: 5
},
subText: {
fontSize: 14,
color: '#ffffff',
},
timeText: {
fontSize: 15,
color: 'white',
textAlign: 'center',
marginTop: 5
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#206c72',
opacity: 0.6,
borderRadius: 10
}
})
Please help me i dont know what i am doing wrong. thanks in advance!
[note: please ignore the content, focus on alignment]
Your image is aligned to the right but there is nothing at the left of it. You should add flexDirection:'row' to the parent container and put an empty View with width : 40px before your image.
You can also remove the alignItems:flex-end and justifyContent:center from the main container
You can add alignSelf property to flex-end for image and image will be on end of the tile.
example 1:
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
alignSelf: "flex-end"
},
for reference i tried a sandbox example check it out here
also noticed you are using alignItems value twice first one is only necessary you can remove 2nd alignItems and position relative value from styles.container then it will align the image to end. you will get the exact result you want
example 2:
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end', // only need this alignItems
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
marginTop: 20
},
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
// no need of alignSelf to flex-end here
},
I have a react native project where I want to orientate a element verticaly and center the text.
Now I want to use percentages so it is centered width wise which would be the height of the parent element. Also the text should wrap it gets to big.
The problem is I can not use percentage because it get always converted to px inside the browser.
Can someone help me out?
I appreciate your help.
The text on the left side should always be centered like it is in this screenshot. It behaves so weird, if the width is changing the text moves around.
type TeamsProps = {
name: string,
}
const TeamCard = (props: TeamsProps) => {
const [showOptions, setShowOptions] = useState<Boolean>(false)
const toggleOptions = () => {
setShowOptions(!showOptions)
}
return (
<View style={[styles.container, { height: (Dimensions.get("window").width - 3 * 15) / 2 }]}>
<TouchableOpacity onLongPress={toggleOptions} style={styles.card}>
<View style={styles.nameFlag}>
<Text style={styles.name}>{props.name}</Text>
</View>
<View style={styles.member}>
</View>
</TouchableOpacity>
{ showOptions ?
<TouchableOpacity onPress={toggleOptions} style={styles.options}>
<TextInput style={styles.input} value="Team Name"></TextInput>
<View style={styles.buttons}>
<TouchableOpacity style={[styles.button, styles.delete]}>
<Delete style={{ fontSize: 20, color: "white", margin: "auto" }} />
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.confirm]}>
<Check style={{ fontSize: 20, color: "white", margin: "auto" }} />
</TouchableOpacity>
</View>
</TouchableOpacity>
: <></>
}
</View>
)
}
const styles = StyleSheet.create({
container: {
flexBasis: "calc(50% - 7.5px)"
},
card: {
backgroundColor: constants.mainColor,
borderRadius: 15,
shadowOpacity: 0.6,
shadowRadius: 10,
flex: 1,
flexDirection: "row",
alignItems: "center"
},
nameFlag: {
backgroundColor: constants.mainColorLight,
height: "calc(100% - 30px)",
width: "15%",
marginVertical: 15,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
justifyContent: "center"
},
name: {
position: "absolute",
// TODO: translateX needs to use -50%, translateY needs to use 50% of parent width
transform: [{ rotate: "-90deg" }, { translateX: -33 }, { translateY: 13 }],
transformOrigin: "left",
width: "max-content",
fontFamily: constants.fontFamilyHeader,
fontSize: constants.fontSizeHeader
},
member: {
backgroundColor: constants.mainColorLight,
height: "calc(100% - 30px)",
width: "calc(85% - 30px)",
margin: 15,
borderRadius: 30,
padding: 15,
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
gap: 15,
justifyContent: "space-around",
alignItems: "center"
},
options: {
backgroundColor: constants.shadowColor,
position: "absolute",
top: 0,
left: 0,
zIndex: 100,
width: "100%",
height: "100%",
borderRadius: 15,
padding: 15,
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 25
},
input: {
backgroundColor: "white",
width: "100%",
borderRadius: 50,
padding: 5,
fontFamily: constants.fontFamilySubheader,
fontSize: constants.fontSizeHeader,
textAlign: "center"
},
buttons: {
flexDirection: "row",
gap: 25
},
button: {
borderRadius: 50,
width: 40,
height: 40
},
delete: {
backgroundColor: constants.alertColor
},
confirm: {
backgroundColor: constants.accentColor
}
})
Return to post
I am looking for some styling guidance for React-Native. I am wanting to create a border that only has a certain amount of the corners colored. Something like this:
I currently have this:
captureSquare: {
height: 450,
width: 450,
borderWidth: 2,
borderColor: '#FFFFFF,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
I am not sure how to break up the borders. Any ideas?
Was able to do this by adding 4 <View />s to the captureSqaure and giving them the following properties:
topLeftEdge: {
position: 'absolute',
top: 0,
left: 0,
height: 25,
width: 25,
borderColor: '#FFFFFF,
borderLeftWidth: 3,
borderTopWidth: 3,
},
I want to write stylesheet to display a loyout like this image:
avatar:
And I write code like this:
<View style={styles.header}></View>
<View style={styles.meInfor}>
<Image style={styles.avatar}
source={require('../../images/cristiano-ronaldo.jpg')} />
</View>
and style:
header:{
width: width,
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
width: width,
backgroundColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
},
avatar: {
marginTop: -50,
width: 100,
height: 100,
borderRadius: 100,
}
I use marginTop: - 50 to pull the avatar to top, but the result like this:
bad result:
How can i do to style this avatar like the first image?
Try this code it run well on my case
Component
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, Dimensions } from 'react-native';
export default class App extends Component {
render() {
const {header, meInfor, avatar, container} = styles;
return (
<View style={container}>
<View style={header}></View>
<View style={meInfor}></View>
<Image style={avatar}
source={{uri: 'http://infosahabat.com/wp-content/uploads/2015/12/Permainan-Bola-Besar.jpg'}}
/>
</View>
);
}
}
And this for the style
Style
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightgray',
},
header:{
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
backgroundColor: '#FFF',
top: 0,
height: 50,
width: (Dimensions.get('window').width),
},
avatar: {
position: 'absolute',
top: 50,
left: (Dimensions.get('window').width / 2) - 50,
alignItems: 'center',
width: 100,
height: 100,
borderColor: 'black',
borderWidth: 1,
borderRadius: 100,
}
});
Change your stylesheet like this
header : {
width: width,
height: 100,
backgroundColor: '#1270BA'
},
meInfor : {
position: 'absolute',
width: width,
alignItems: 'center',
justifyContent: 'center'
},
avatar : {
marginTop: 50,
width: 100,
height: 100,
borderRadius: 100
}