How do I make one <View> take all available space when there is something else on the same row? - react-native

Question

Im trying to make a flatlist with some data and a button on each row.
I have tried to do it in a typical "web" fashion, with nested views and formating the elements relative to their parent, but with no success.
this is the current structure of the list:
<View style={styles.row}>
<View style={styles.rowinfo}>
<View>
<Text style={styles.primaryID}>{item.name ? item.name : item.phoneNumber}</Text>
<Text style={styles.secondaryID}>{item.name ? item.phoneNumber : 'Ukjent innringer'}</Text>
</View>
<View>
<Text style={styles.textalignRight}>Varighet: {item.durationDisplay}</Text>
<Text style={styles.textalignRight}>{item.dateStringTime}</Text>
</View>
</View>
<TouchableOpacity style={styles.rowicon}>
<View style={styles.ban_icon}>
<Icon
name='ban'
type='font-awesome'
color='#FFF'
/>
</View>
</TouchableOpacity>
</View>
And here is my styling:
const styles = StyleSheet.create({
row: {
flex: 1,
marginTop: 1,
paddingVertical: 10,
paddingHorizontal: 15,
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: '#f9f9f9'
},
rowinfo:{
flexDirection: "row",
alignSelf: 'stretch'
},
primaryID: {
fontWeight: 'bold'
},
textalignRight: {
textAlign: 'right'
},
rowbt: {
justifyContent: "center",
alignItems: "center",
backgroundColor: 'red'
},
ban_icon: {
color: '#FFF',
fontWeight: 'bold',
fontSize: 14,
marginHorizontal: 8
}
});
I im trying to make it look like this:
But i keep getting this:

Answer 1

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<View style={styles.rowinfo}>
<View>
<Text style={styles.primaryID}>{'Phone Number'}</Text>
<Text style={styles.secondaryID}>{'Ukjent innringer'}</Text>
</View>
</View>
<View style={{ flexDirection: 'row'}}>
<View>
<Text style={styles.textalignRight}>Varighet: {'1m og 20s'}</Text>
<Text style={styles.textalignRight}>{'13:23:11'}</Text>
</View>
<TouchableOpacity style={styles.ban_icon}>
<View style={styles.ban_icon} />
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
},
row: {
backgroundColor: 'green',
width: '100%',
marginTop: 1,
paddingVertical: 10,
paddingHorizontal: 15,
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: '#f9f9f9'
},
rowinfo:{
flex: 1,
flexDirection: "row",
},
primaryID: {
fontWeight: 'bold'
},
textalignRight: {
textAlign: 'right'
},
ban_icon: {
padding: 10,
backgroundColor: 'red',
marginLeft: 10,
}
});
Check the snack: https://snack.expo.io/#legowtham/43c687

Answer 2

I was able to get my desired result by using absolute positioning.