I need some help regarding react-native images side by side. I am unable to get it done in the right way. I want these images to display side by side, in two columns and 2 rows. Here is my code
<View style={{ flexDirection: "row" }}>
<Text>Sample</Text>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() =>
Linking.openURL(
"#"
)
}
>
<Image
source={transport}
style={{ width: 150, height: 120, padding: 50 }}
/>
</TouchableOpacity>
<Text>Sample</Text>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() =>
Linking.openURL(
"#"
)
}
>
<Image
source={entertainment}
style={{ width: 150, height: 120, padding: 50 }}
/>
</TouchableOpacity>
<Text>Sample</Text>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() =>
Linking.openURL(
"#"
)
}
>
<Image
source={doorkay}
style={{ width: 150, height: 120, padding: 50 }}
/>
</TouchableOpacity>
<Text>Sample</Text>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() =>
Linking.openURL(
"#"
)
}
>
<Image
source={blood}
style={{ width: 150, height: 120, padding: 50 }}
/>
</TouchableOpacity>
</View>