React-native conditional render is affecting elements outside the condition - reactjs

Question

I am attempting to conditionally render an icon and some text if the user has connection via wifi or cell data. The icon on the very left with the phone number should only appear if there is a connection. Otherwise, it should not render, and the rest of the icons should fill the space. When I toggle connectivity, the phone number text remains, but the icon disappears and the rest of them fill the space as they should. Can anyone tell me why the text (the phone number) is not changing as desired?
Relevant code for conditional render:
<View style={styles.actionArea}>
{props.isConnected && (
<View style={styles.actionItem}>
<Text>{props.dispatch.call_back_number}</Text>
<MaterialCommunityIcons name={'phone-forward'} size={50} onPress={() => handleClick(`tel:${props.dispatch.call_back_number}`)}/>
</View>
)}
<View style={styles.actionItem}>
<Text>Enter Call Log</Text>
<MaterialCommunityIcons name={'phone'} size={50} onPress={() => props.enterCallLog(true)}/>
</View>
<View style={styles.actionItem}>
<Text>Work Order</Text>
<MaterialCommunityIcons name={'wrench'} size={50}/>
</View>
<View style={styles.actionItem}>
<Text>Contracts</Text>
<MaterialCommunityIcons name={'animation'} size={50}/>
</View>
</View>
The styles code:
actionArea: {
paddingTop: 10,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
actionItem: {
flexDirection: 'column',
alignItems: 'center',
},