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
Related
I am trying to space these two bodies together evenly across the device. While implementing it the way I currently am, the space-evenly renders but it spaces it by the words. I would like the space-evenly to base its spacing on the icon instead.
I have provided a demo here as well as the code below.
render() {
return (
<View
style={{
flexDirection: 'row',
top: 75,
justifyContent: 'space-evenly',
}}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="map-marker-radius-outline"
color="black"
size={50}>
</MaterialCommunityIcons>
<Text style={{ fontSize: 15 }}>
WORD
</Text>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="star-outline"
color="black"
size={50}>
</MaterialCommunityIcons>
<Text style={{ fontSize: 15 }}>
WORD WORD
</Text>
</View>
</View>
);
}
}
if I understand your issue right, you need both elements to take the same space across the available width. For that, you have to add flex: 1 to both of your inner views
<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
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 am new to react native. I have idea about FlexBox, As per I understood, We can show elements either left/right/center alignment only. But, I want to show like below
______________________________
Header Header Header
______________________________
Image Text value1 Value2
______________________________
Image Text value1 Value2
______________________________
Image Text value1 Value2
______________________________
Image Text value1 Value2
______________________________
How to show the above layout in Flatlist without taking another flexbox, I have idea about, Using two flexboxes, We can achieve this. But, I want to use only single flexbox. Any suggestions?
<View style={{ flex: 1 }}>
/* this is for the header of the table */
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 2 }}>
<Text style={{ textAlign: 'center'}>Header</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: 'center'}>Header</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: 'center'}>Header</Text>
</View>
</View>
/* this is for the data row of the table */
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 2, flexDirection: 'row' }}>
<Image style={{ flex: 1 }}></Image>
<Text style={{ flex: 1 }}>Text</Text>
</View>
<View style={{ flex: 1 }}>
<Text>Value 1</Text>
</View>
<View style={{ flex: 1 }}>
<Text>Value 2</Text>
</View>
</View>
</View>
You can use a grid like this using flex. If you need you can loop when adding row items to table using a map function easily.
If you need to use Flat list you can use header component(ListHeaderComponent) to render the header row and user renderItem function to render a single row.
Use something like below on your component.
renderHeader() {
return (
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 2 }}>
<Text style={{ textAlign: 'center'}>Header</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: 'center'}>Header</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: 'center'}>Header</Text>
</View>
</View>
)
}
renderItem({ item }) {
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 2, flexDirection: 'row' }}>
<Image style={{ flex: 1 }}>item.image</Image>
<Text style={{ flex: 1 }}>item.text</Text>
</View>
<View style={{ flex: 1 }}>
<Text>item.value_1</Text>
</View>
<View style={{ flex: 1 }}>
<Text>item.value_2</Text>
</View>
</View>
}
render() {
return (
<FlatList
data={[ { text: 'Text', value_1: 'Value 1', value_2: 'Value 2'} ]}
renderItem={this.renderItem}
ListHeaderComponent={this.renderHeader}
contentContainerStyle={{ flex: 1 }}
/>
);
}
I have this simple UI structure:
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
<Text>of any settlement or judgment</Text>
</View>
In a small screen, it would show something like this
As shown in the image above, I expected the text, of any settlement or judgment, to not move to the next line.
The closest solution that I could think of was to chunk each text into individual Text elements.
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
{'of any settlement or judgment'.split(' ').map((chunk, i) => (
<Text key={i.toString()}>{chunk} </Text>
)}
</View>
resulting to something like this:
Question: Is there a better way to achieve what I want? Or is this the only way to solve the problem?
Well you can write it inside a view with a flexDirection:'row' style property or you can wrap it in another Text like this :
<Text>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
<Text>Of any settlement or Judgement</Text>
</Text>
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>