I have to create a ListView having Rows which contains an Icon on the left and two text elements like so:
But what i get is this:
How to archieve this?
This is my render method for the row:
return (
<TouchableHighlight underlayColor='#dddddd'>
<View style={styles.container}>
<Icon
name='fontawesome|phone'
size={30}
color='gray'
style={styles.contactIcon}
/>
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
And these are my styles:
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 15,
},
details: {
fontSize: 14,
marginBottom: 8
},
headline: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
flex: 1
},
I tried to play with a width-statement for each text-element making it as wide as possible, nothing helped.
You have to wrap your both text-nodes in a parent-textnode giving style "flex=1" :
check this out:
<View style={{ flex: 1 }} >
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
As an alternate solution, you could surround the two text elements with a view and then set its flex direction to column
<View style={{flex: 1, flexDirection: 'column'}}>
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
Related
I'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it
Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.
Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.
This will do the calculation for width depends on the device width.
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.
Cheers!
I have two rows, 1st one contains image and second one text. So when I use flexDirection: 'row' the text overflow the width and ellipsis not showing. Please have a look into my code.
<View style={styles.boxContainer}>
<View style={{marginRight: 10}}>
<Text style={{textAlign: 'left'}}>
<Image
style={styles.eventImg}
source={{uri: item.image}}
/>
</Text>
</View>
<View>
<Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
<Text style={{fontSize: 12, color: '#878787'}}>{item.formatted_date}</Text>
<Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}</Text>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity
onPress={() =>
this.onPressReadMore(item.id)
}
>
<Text style={{fontSize: 12, padding: 5, backgroundColor: '#76ac42', color: '#ffffff', borderRadius: 3, textAlign: 'center', marginTop: 10, width: 80}}>Read More</Text>
</TouchableOpacity>
<Text style={{alignSelf: 'center', textAlign: 'right'}}>Registered</Text>
</View>
</View>
</View>
styles
const styles = StyleSheet.create({
container: {
backgroundColor: '#ffffff'
},
tabContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
tabSingle: {
flex: 1,
marginBottom: 5
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'left',
paddingTop: 20,
paddingLeft: 20,
paddingRight: 20
},
boxContainer: {
backgroundColor: '#f6f6f6',
padding: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
flexDirection: 'row',
borderRadius: 5
},
eventImg: {
width: 80,
height: 80,
resizeMode: 'cover',
borderRadius: 5
}
});
Where am going wrong. I have tried many article and none of them seems working. Is there any way to fix this. Please have a look into the design,
Try this code:
<View style={{flexDirection:'row'}}>
<Text style={{fontSize: 10, flex: 1, flexWrap: 'wrap', flexShrink: 1}} ellipsizeMode='tail'>
{item.descr}
</Text>
</View>
Set the horizontal value in View, which contains the ellipsis.
<View style={{width: 200}} >
....
<Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}
</Text>
Here's an example of a word-for-word abbreviation I've simplified.
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 have a list of products and want to display the text "ITEM UNIT" at the right end of my infobox. It is however affected by the position of the text above it.
How do I solve this and put "ITEM UNIT" to the right end of the display?
<TouchableOpacity
onPress={() => this.props.onItemClicked(this.props.item)}
style={{ marginRight: 130 }}
>
<View style={styles.itemContent}>
<View>
<FadeIn>
<Image
resizeMode="contain"
style={{
height: 100,
width: 100,
marginTop: 10,
marginLeft: 10
}}
source={{ uri: url }}
/>
</FadeIn>
</View>
<View style={{ justifyContent: "space-around" }}>
<Text style={{ fontSize: 16, fontFamily: "System" }}>
{articleName}
</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-between"
}}
>
<View style={{ flexDirection: "row" }}>
<Text style={styles.itemPrice}>{originalprice} </Text>
<Text style={styles.itemPriceReduced}>{specialprice}€</Text>
</View>
<View>
<Text>ITEMUNIT</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>;
I crated a small demo for you. Please check it here:
https://snack.expo.io/#tarikfojnica/layout (Click Tap To Play on the right side)
Here are the code parts you should check:
<TouchableOpacity style={styles.container} onPress={() => this.props.onItemClicked(this.props.item)}>
<View style={styles.itemContent}>
<View style={styles.iconContainer}>
<Image source={Icon} style={styles.icon} />
</View>
<View style={styles.textContainer}>
<Text>This is the title </Text>
<View style={styles.downText}>
<View style={styles.priceText}>
<Text style={{marginRight: 10}}>$99.9</Text>
<Text>$99.9</Text>
</View>
<View style={styles.label}>
<Text>Label</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
container: {
marginTop: 24,
},
itemContent: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: 'e5e5e5'
},
iconContainer: {
padding: 10,
flex: 1,
},
icon: {
width: 40,
heigth: 40
},
textContainer: {
backgroundColor: 'whitesmoke',
flex: 7,
padding: 5
},
downText: {
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
priceText: {
flexDirection: 'row',
},
label: {
textAlign: 'right',
backgroundColor: 'yellow',
padding: 3
}
});
For a reference, here is how it looks like:
PS: I would avoid writing inline styles.
I'm having a bit of trouble getting what i though to be an easy layout to achieve in react-native.
Basically i need two views, on a row, with their parent having justifyContent: 'space-between'.
On the first view there are two text components and one of them has to have an ellipsis when it grows.
What i expected:
What i instead get is overflowing of that text component:
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>AVATAR</Text>
<View style={{ marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
A sandbox to play around with an example:
https://snack.expo.io/HkeFQbyvf
If you add flex: 1 to the inner <View style={{ marginHorizontal: 15 }}> it will work
Updated code sample
<View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>AVATAR</Text>
<View style={{ flex: 1, marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
Updated based on a comment
And the main reason is because the inner <View style={{ marginHorizontal: 15 }}> is a flex row item, and as such flexes horizontally and need a width, which flex: 1 provide.
If to use the default column direction, it would work w/o, e.g. like this:
<View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1 }}>
<View style={{ marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
Try adding flexShrink: 1 to the style of the first inner view