Layout trouble in React Native-CodePudding

I'm having a terrible time with layout in one spot. I'd like the View with the buttons to get a consistent amount of space, and then the rest of the space goes to the box with ingredient names on the left.

Here's a screenshot, using Expo Go on iPhone.

Screenshot with problem layout.

I wanted the left box (nameView, red outline) to take all the space not needed by the buttons, but I'm failing miserably. The top row is too small, the second row is too wide and is pushing the buttons off the screen!

Here's the (slightly simplified) return:

<View style={styles.rowView} key={oneitem\[0\]}> 
   <TouchableOpacity > 
      <View style={\[styles.nameView, { backgroundColor: oneitem\[1\].sku?'white': 'red'}\]}> 
         <Text style={styles.itemtext}>{oneitem\[0\]}</Text> <Text>{oneitem\[1\].sku}</Text> 
      </View>
    </TouchableOpacity> 
<View style={styles.buttonView}> 
    <Button style={styles.smallButton} >
        <Image source={Images.trash} style={styles.trashButton}/></Button> 
    <Button style={styles.smallButton} ><Text style={styles.smallbuttonText}>-</Text></Button>
    <Text style={styles.quantitytext}>{oneitem\[1\].quantity}</Text> 
    <Button style={styles.smallButton} > <Text style={styles.smallbuttonText}> </Text></Button>
</View> 
</View>

And here's the relevant styling:

rowView: {
marginBottom: 4,
flexDirection: 'row',
borderWidth: 2,
borderColor: 'yellow',
width: '100%',
maxWidth: '100%',
flex: 1 ,
justifyContent: 'space-between'
},

nameView: {
flex: 1,
flexDirection: 'column',
alignSelf: 'center',
marginLeft: 4,
borderWidth: 1,
borderColor: 'red',
flexGrow: 2,
},

buttonView: {
flexDirection: 'row',
alignContent: 'space-around',
alignItems: 'center',
borderWidth: 1,
width: 125,
flexShrink: 125,
},

UPDATE: I found my issue. I needed to apply the nameView styling to the TouchableOpacity. Next problem: how to get the rows to expand vertically when the text wraps.

Second attempt

CodePudding user response：

The left view should have flex: 1 style! and the left view should have fix width

CodePudding user response：

I found my issue - I needed to apply the nameView style to the TouchableOpacity also. That gets the text to wrap, although now the rows are too short.