Align 3 dynamic views in one row - react-native

Question

i want to align 3 Views in a row:
|Icon| |Title| |Buttons|
The Title can be more than one line. The buttons are 0-3 Buttons, so their width is unknown to me.
Now the problem is, if I got more than one line in the title the buttons are cut off. How can i solve this and make sure the buttons are always on the screen and the title just has the space that is left?
On this screenshot 2 listitems are visible. Both should have 3 buttons on the right, but with the long title in the second row, the buttons are cut off
render() {
return (
<TouchableHighlight style={styles.view} underlayColor={'#eee'} onPress={this.props.navigateToDetails}>
<View style={{flex: 1}}>
<View style={styles.header}>
<View style={styles.headerTitle}>
<MaterialIcons style={styles.icon} name={"worker"}/>
<MentionsText style={styles.title}
>
{this.props.siteVisitNote.title}
</MentionsText>
</View>
<View style={styles.buttons}>
<FontAwesomeIcons style={styles.icon} name="tag"/>
{Utils.objectExists(this.props.siteVisitNote.attachments) || true ?
<FontAwesomeIcons style={styles.icon} name="paperclip"/> : null}
{Utils.objectExists(this.props.siteVisitNote.images) || true ?
<FontAwesomeIcons style={styles.icon} name="picture-o"/> : null}
</View>
</View>
<MentionsText style={styles.text}
>{this.getText()}</MentionsText>
</View>
</TouchableHighlight>
)
}
}
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
justifyContent: "space-between",
},
headerTitle: {
flexDirection: 'row'
},
view: {
flex: 1,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#efeff4',
padding: 8,
minHeight: 40,
},
buttons: {
flexDirection: "row",
alignSelf: 'flex-end',
},
icon: {
fontSize: 20,
paddingRight: 5,
color: "#333333",
padding: 8
},
title: {
color: "#333333",
fontSize: 14,
fontWeight: 'bold',
padding: 8,
},
text: {
color: "#333333",
fontSize: 14,
padding: 8
}
});
Thanks!

Answer 1

Add flex: 1 to headerTitle, and title.
If that doesn't work see my working example of this layout here which you can compare.
https://gist.github.com/WilliamIPark/2ad3ecf47c5c1e559086e4b10d0cf018
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
export default class App extends Component {
render() {
return (
<ScrollView
style={{ backgroundColor: '#edf2f9'}}
contentContainerStyle={styles.container}
>
<View style={styles.card}>
<View style={styles.header}>
<View style={styles.iconTitle}>
<View style={styles.icon} />
<Text>Hello world</Text>
</View>
<View style={styles.buttonWrap}>
<View style={styles.button} />
<View style={styles.button} />
<View style={styles.button} />
</View>
</View>
<View>
<Text>
Some other content...
</Text>
</View>
</View>
<View style={styles.card}>
<View style={styles.header}>
<View style={styles.iconTitle}>
<View style={styles.icon} />
<Text style={styles.title}>
Hello world this is some really long title right here, that
goes on and on and on. And then some!
</Text>
</View>
<View style={styles.buttonWrap}>
<View style={styles.button} />
<View style={styles.button} />
<View style={styles.button} />
</View>
</View>
<View>
<Text>
Some other content...
</Text>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#edf2f9',
},
card: {
backgroundColor: 'white',
height: 200,
width: 320,
shadowColor: 'black',
shadowOpacity: 0.25,
shadowOffset: {x: 10, y: 10},
padding: 10,
marginTop: 10,
},
header: {
borderBottomWidth: 0.5,
borderBottomColor: 'lightgrey',
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between',
},
iconTitle:{
flexDirection: 'row',
flex: 1,
marginBottom: 10,
},
icon: {
height: 24,
width: 24,
backgroundColor: 'black',
marginRight: 5,
},
title: {
flex: 1,
},
buttonWrap: {
flexDirection: 'row',
},
button: {
height: 24,
width: 24,
backgroundColor: 'red',
marginLeft: 5,
}
});