React Native Flex Styling Issue - css

Question

Having trouble getting the text and image to line up side by side in this setup:
https://snack.expo.io/XZef1XEje
Does adding width to topHomeTextContainer actually help line up the elements? I tried adding an extra <View />, but that didn't do anything.
If the link doesn't work:
import React, { useState } from "react"
import { StyleSheet, Image, Text, TouchableOpacity, View } from "react-native"
const App = () => {
return (
<View stye={styles.topHomeContainer}>
<View style={styles.topHomeTextContainer}>
<Text style={styles.topHomeText}>Find Things</Text>
</View>
{/* <View style={styles.topHomeImageContainer}> */}
<TouchableOpacity
style={styles.topHomeImage}
>
<Image
style={styles.arrowIcon}
source={{uri:"https://i.pinimg.com/originals/4d/4d/b9/4d4db9216358ec06d74d20507ed75c49.png"}}
/>
</TouchableOpacity>
{/* </View> */}
</View>
)
}
const styles = StyleSheet.create({
topHomeContainer: {
flex: 1,
flexDirection: `row`,
alignItems: `stretch`,
justifyContent: `center`,
height: 100,
marginBottom: 15,
},
topHomeTextContainer: {
//width: `65%`,
},
topHomeText: {
color: `rgb(0,0,0)`,
fontFamily: "GothamMedium",
fontSize: 20,
fontWeight: `500`,
letterSpacing: 0,
},
// topHomeImageContainer: {
// width: scaleHelper.w(32),
// },
//topHomeImage: { width: 32 },
arrowIcon: {
width: 32,
height: 32
},
})
export default App
UPDATE 1: added width and height to image.

Answer 1

You should give width and height style to Image style - arrowIcon. Also no need to give width to topHomeImage style.
// topHomeImage: {
// width: 32
// },
arrowIcon: {
width: 32,
height: 32
},
Update
Also, I found a typo stye on your code.
Change
<View stye={styles.topHomeContainer}>
to
<View style={styles.topHomeContainer}>