Как заставить один <View> занять все доступное пространство, когда в той же строке есть что-то еще?

Я пытаюсь сделать плоский список с некоторыми данными и кнопкой в ​​каждой строке. Я попытался сделать это в типичном «сетевом» стиле, с вложенными представлениями и форматированием элементов относительно их родителя, но безуспешно.

это текущая структура списка:

<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>

А вот и мой стиль:

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
}
});

Я пытаюсь сделать так, чтобы это выглядело так:

Но я продолжаю получать это: