I'm using React Native and trying to create a specific layout.
I have an image, vertically & horizontally centred (within a View) and some Text on top of the image also vertically & horizontally centred. The Text needs to come on top of image/background image therefore I put it inside the image tag.
Now the content of that text can be very long and because it is inside the image tag, it wraps.
How can I make it so the content inside Text won't wrap and still be on top of the Image?
My layout so far:
The layout I'm trying to achieve
My code:
<TouchableHighlight onPress={onPress}>
<View style={styles.categoryContainer}>
<View style={styles.leftContainer}>
<View style={styles.categoryIndexContainer}>
<Text style={styles.categoryIndex}>01</Text>
</View>
</View>
<View style={styles.middleContainer}>
<Image source={img} style={styles.categoryImage}>
<Text style={styles.categoryName}>Some very long title name</Text>
</Image>
</View>
<View style={styles.rightContainer}></View>
</View>
</TouchableHighlight>
const styles = StyleSheet.create({
categoryContainer: {
flexDirection: 'row',
},
leftContainer: {
width: 50,
paddingLeft: 15,
paddingTop: 30,
},
middleContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
flexDirection: 'row',
},
rightContainer: {
width: 50,
},
categoryName: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: 40,
textAlign: 'center',
backgroundColor: 'transparent',
flexWrap: 'nowrap',
},
categoryImage: {
alignItems:'center',
justifyContent:'center',
flexWrap: 'nowrap',
},
})
Thanks
You should specify on categoryName style: position: 'absolute' then set the top, left, right, bottom attributes until you place the Text above the Image.
Related
I am trying to get an image viewer to work with my gallery, The library I use https://github.com/ascoders/react-native-image-viewer gives option to render a react element in the header. I am using this following element in the place of header
<View styles={modalStyles.header}>
<View onPress={props.closeModal} style={modalStyles.leftHeader}>
<Icon name="close" size={20} color="#fff"></Icon>
</View>
<View onPress={() => props.startDownload(props.getShowingImage())} style={modalStyles.rightHeader}>
<Icon name="download" size={30} color="#fff"></Icon>
</View>
</View>
and here is my styles
const modalStyles = StyleSheet.create({
header: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
backgroundColor: "red",
},
leftHeader: {
marginLeft: 20,
padding: 10,
alignSelf: 'flex-start',
backgroundColor: "red",
},
rightHeader: {
marginRight: 20,
padding: 10,
alignSelf: 'flex-end',
backgroundColor: "red",
},
})
and here is how the modal looks like
This is how i get content inline one at left and one at right. Also you have typo in your code .. rename style with styles
<View style={[{flexDirection:'row', alignItems:'center'}]}>
<View style={[{flex:1,flexDirection:'row'}]}>
//... left content
</View>
<View style={[{justifyContent:'space-evenly', marginVertical:10}]}>
// .... right content
</View>
</View>
I'm trying to center two separate texts in their components, I'm using react-native and native-base. I cannot center the text vertically and horizontally within the Text component itself. I have divided into colors to see the problem graphically.
The elements:
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
}}>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
The styles:
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#005f99',
flex: 1,
flexDirection: 'row',
backgroundColor: 'yellow'
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#94cf1c',
flex: 1,
flexDirection: 'row',
backgroundColor: 'green'
},
what you see commented are all the tests I did. certainly, it is stupid but I have not yet solved, do you have any idea? Thanks.
SOLUTION
For those who had the same problem, I enter the code of my correct and clean current situation (without the backgroundColor):
JS
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
Styles
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#005f99',
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#94cf1c',
},
Maybe I didn't understand your problem truly, I guess your problem is inside green and yellow area.
I had same issue and for handling this issue I used line-height: 20 and paddingVertical: 5. the 20 and 5 numbers are sample and for my project design. you put your numbers instead of them.
Setting the line height of the text to be the desired height of the box should work. For example if you want the yellow box to be 50 tall you would set lineHeight: 50 on the text.
Hope that helps.
I'm trying to mimic a stack navigation header like below:
where the title is perfectly centered while there's a return button in the same row on the left.
I have tried to use justifyContent: 'space-between' with an empty View on the right side but the title will be off center to the right a bit. How should I approach this?
my renderHeader function:
_renderHeader = () => {
return (
<View style={styles.headerAbsolute}>
<View style={styles.bar}>
<ButtonBack
text={"Resumes"}
onPress={() => this._onNavBackHandler()}
/>
{true ? (
<Text style={styles.headingFixed}>{this.state.title}</Text>
) : ( null )}
<View/>
</View>
</View>
)
}
These are the styles:
bar: {
height: 55,
flexDirection: "row",
alignItems: 'flex-end',
justifyContent: 'space-between',
paddingHorizontal: 10,
paddingBottom: 5,
},
headingFixed: {
fontSize: TITLE_TERTIARY,
fontWeight: 'bold',
color: COLOR_DARK_SECONDARY,
backgroundColor: 'transparent',
},
I will make use of Flex here.
Please note that i used borderWidth in the below example only for reference to show how it looks.
I will have flexDirection as row and i will give a flex: 1 to all the views inside
App.js
import React, { Component } from 'react';
import {
View,
Text
}
from 'react-native';
class App extends Component{
render(){
return(
<View>
<View style={styles.navBar}>
<View style={styles.itemStyle}>
<Text style={{fontSize: 18, color: 'blue'}}>Resumes</Text>
</View>
<View style={styles.itemStyle}>
<Text style={{fontSize: 20, color: 'blue'}}>Settings</Text>
</View>
<View style={styles.itemStyle}></View>
</View>
</View>
)
}
}
const styles = {
navBar: {
marginTop: 42,
height: 36,
flexDirection: 'row',
alignItems: 'center'
},
itemStyle: {
flex: 1,
height: 36,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1
}
}
export default App;
You can play around in the inside views. Move the buttonBack inside one of the child views.
I can think of two ways to accomplish this, but neither seems quite ideal.
The first way is using a transparent element with fixed width and justifyContent: 'space-between', as you indicated:
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{width: 80}}>left</Text>
<Text>center</Text>
<Text style={{width: 80, color: 'transparent'}}>right</Text>
</View>
Setting a fixed width to the elements on each side will cause the middle element to center horizontally.
An alternative approach is using absolute styling. Using percentages with left and right requires React Native >= 0.42.
<View>
<Text>Left</Text>
<Text style={{position: 'absolute', width: 50, left: '50%', marginLeft: -25}}>Center</Text>
</View>
I am trying to center a text vertically and horizontally on the screen. This is my code
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text> Header </Text>
</View>
<Text style={styles.text}> some text in the middle center of the screen </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'white',
alignItems:'center',
justifyContent:'center'
},
header: {
backgroundColor: 'green',
alignSelf: 'stretch',
alignItems: 'center',
heigth: 80 // this dose not change the header height
},
text:{
//flex: 1,
justifyContent:'center',
}
});
If I add the flex:1 to text, the header will also be centered which is not expected. I don't know if it's related but the I am also not able to modify the header view height. How can I solve this? The problems can be reproduced on this snack.
<div data-snack-id="S1urACbJM" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
This is one way to center text in the screen:
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}}>
<Text style={{backgroundColor: 'red'}}>
Your Text
</Text>
</View>
And you can also try with position:'absolute':
<View style={{
backgroundColor: 'blue',
position: 'absolute',
top: 0, left: 0,
right: 0, bottom: 0,
justifyContent: 'center',
alignItems: 'center'}}>
<Text style={{backgroundColor: 'red'}}> Your Text </Text>
</View>
I suggest setting the header as position:'absolute' , and use flex:1 and justify-content:'center' on the container.
Check the updated style
const styles = StyleSheet.create({
container: {
backgroundColor:'white',
alignItems:'center',
justifyContent:'center',
flex:1,
paddingTop:20 //this amount should be equal to the header height so that any items displayed inside the container will start after the absolute positioned header
},
header: {
backgroundColor: 'green',
alignSelf: 'center',
justifyContent:"flex-start",
alignItems: 'center',
position:"absolute",
top:0
}
});
Regarding the height you just have a typo in the word height
The borderRadius style attribute doesn't change the border of a component correctly.
I would expect to see a green circle on the red background without any white space. Instead, I see this.
class Healthie extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.button} />
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
button: {
backgroundColor: 'green',
borderRadius: 50,
width: 100,
height: 100,
textAlign: 'center'
}
});
react-native version: 0.17.0.
no need to wrap button or text inside views, just put this on your style
overflow: hidden
it works for me
To get what you're looking for, you're going to have to wrap the Text box inside another View. The View will not default to another BG color when the borderRadius is changed:
<View style={styles.container}>
<View style={styles.button}>
<Text style={{ backgroundColor: 'transparent' }}>Text</Text>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
button: {
backgroundColor: 'green',
borderRadius: 50,
width: 100,
height: 100,
textAlign: 'center',
flexDirection:'row',
alignItems:'center',
justifyContent:'center'
}
});
Check out this demo.