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