React Native Flex Styling Issue

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