Im trying to render an object in a row but one of my images doesn't play nice with the others using flexDirection:row - react-native

Question

Im trying to make this view with a bubble image in the margin between the left of the screen and the larger square images like the picture below
but my bubble will not stay in line with the view and
I get this
`
const Recipe = ({ name, durationLabel, numberOfServings, handlePress, handlePush }) => (
<View styles={{flexDirection: 'row'}}>
<TouchableHighlight onPress={handlePush}>
<View syle={{ justifyContent:'center'}}>
<Image
source={require("app/assets/icons/bubbleOff.png")}
style={{justifyContent:'center'}}
/>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={handlePress}>
<View style={styles.recipeTile}>
<Image
source={require("app/assets/cheesecake.png")}
style={styles.recipeImage}
/>
<View style={styles.recipeInfo}>
<View style={styles.recipeNameRow}>
<Text style={styles.recipeName}>{name}</Text>
<Image
style={{ marginRight: 10 }}
source={require("app/assets/icons/heart.png")}
/>
</View>
<View style={styles.recipeStatsRow}>
<Text style={styles.recipeStats}>
{durationLabel}
{' '}
| Serves
{' '}
{numberOfServings}
</Text>
</View>
</View>
</View>
</TouchableHighlight>
</View>
);`
my styles
`
recipeTile: {
flexDirection: "row",
flex: 1,
margin: 10,
backgroundColor: "white",
marginLeft:60,
},
recipeImage: {
width: 100,
height: 100
},`

Answer 1

Use justifyContent: 'center' and alignItems: 'center' to align the image center.
const Recipe = ({
name,
durationLabel,
numberOfServings,
handlePress,
handlePush,
}) => (
<TouchableHighlight onPress={handlePush}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0, justifyContent: 'center', alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
<Image
source={require('assets/bubbleOff.png')}
style={{ height: 20, width: 20 }}
/>
</View>
<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#FFF' }}>
<View style={{ flex: 0 }}>
<Image
source={require('assets/cheesecake.png')}
style={styles.recipeImage}
/>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.recipeName}>{name}</Text>
<Text style={styles.recipeStats}>
{durationLabel} | Serves {numberOfServings}
</Text>
</View>
<Image
style={{
marginRight: 10,
height: 20,
width: 20,
position: 'absolute',
right: -20,
top: 30,
}}
source={require('assets/heart.png')}
/>
</View>
</View>
</TouchableHighlight>
);
Working demo