Vertically anchor an image to its top in React Native - react-native

Question

I have some code to have an image of random size spread to the full width of a container + vertically center inside the container. But what I need is to anchor it at the top.
In CSS i would use background-position, but it's not supported in React Native. I feel I've tried every combination of resizeMode, absolute positioning, etc - but still haven't been able to figure it out.
<View style={{
flex: 1,
height: 120,
}}>
<Image source={{uri: source}} style={{
flex: 1,
width: '100%',
resizeMode: 'cover'
}}>
</Image>
</View>

Answer 1

It seems crazy that there is still not a standard way of anchoring an image in React Native as there is in regular css (at least if there is, I stall haven't found it). But this lib does the trick for me:
react-native-scalable-image
Hope it helps!

Answer 2

If you can get the height of the image h, then you can show the full image first then hide the bottom part with a view container of static height eg. 250:
<View style={{ height: 250 }}>
<Image source={{ uri: source }} style={{ width: null, height: h }} />
</View>

Answer 3

I have found a trick to do that
You need to wrap the wanted height in a View with a overflow hidden
And set a large height in the image style
const WANTED_HEIGHT = 170
<View style={{ height: WANTED_HEIGHT, overflow: 'hidden' }}>
<Image
source={{ uri }}
style={{
width: '100%',
height: 500,
}}
/>
</View>

Answer 4

return (
<View
style={{
flex: 1,
height: 120,
justifyContent: "center",
alignContent: "center"
}}
>
<TouchableOpacity onPress={() => alert("Hello ")}>
<Text style={{ alignSelf: "center" }}>Anchor Tag</Text>
</TouchableOpacity>
<Image
source={{
uri: "https://shoutem.github.io/img/ui-toolkit/examples/image-3.png"
}}
style={{
width: "100%",
height: 100,
resizeMode: "cover"
}}
/>
</View>