React Native code for Columns with Icons on the side? - react-native

Question

I am trying to write a custom component for this "table" type Figma design doc. Should be an icon on the left that takes .25 of the row and .75 of the row is text.
And I should be able to duplicate that right under it.
Below is the code that I've tried, but the image and text actually overflow the page, and I suspect I'm using too many "flex"'s incorrectly or there might be a much simpler way to do. Any ideas? Thanks!
export function TwoColumnIconLeft (props){
const title = props.title;
const subtitle = props.subtitle;
const body = props.body;
return (
<View
style={{
flex: 1,
flexDirection: "column",
padding: 20
}}>
<View
style={{
flex: .5,
flexDirection: "row",
}}
>
<Image style={{flex: .25}} source={require("./../Assets/watermelon.png")}/>
{/* <Text style={[{ backgroundColor: "red", flex: .25 }, styles.subTitle]}>{subtitle}</Text> */}
<Text style={[{ backgroundColor: "blue", flex: .75}, styles.title]}>{title}</Text>
</View>
<View
style={{
flex: .5,
flexDirection: "row",
}}
>
<Text style={[{ backgroundColor: "red", flex: .25 }, styles.subTitle]}>{subtitle}</Text>
<Text style={[{ backgroundColor: "blue", flex: .75}, styles.title]}>{title}</Text>
</View>
</View>
);
};[enter image description here][1]

Answer 1

This should do the trick for you:
<View style={{flex:1, flexDirection: 'row'}}>
<View style={{flex: .25, flexDirection: 'column'}} >
<Image source={require("./../Assets/watermelon.png")}/>
<Text style={styles.subTitle}>{subtitle}</Text>
</View>
<View style={{flex:0.75, flexDirection: 'column'}}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.title}>{title}</Text>
</View>
Hope this helps.