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

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

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