I'm developing an app with React-Native. I want to put an icon on right-bottom corner of an image component, but it always stays on the left-top corner.
Any help? Thank you very much.
<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/>
You can use justifyContent: 'flex-end'
to achieve this:
const withWatermark = (asset, logo) => (
<Image style={{ width: 200, height: 200, justifyContent: 'flex-end' }} source={asset}>
<Image style={{ width: 20, height: 20, alignSelf: 'flex-end' }} source={logo} />
</Image>
);
You can do something like this...
Use this : position: "absolute", bottom: 0, alignSelf: "flex-end"
<ImageBackground
source={require("../assets/homeAssets/3.jpg")}
style={{
height: 140,
width: 140,
resizeMode: "contain",
alignItems: "center"
}}
imageStyle={{ borderRadius: 70 }}
>
<View
style={{
height: 50,
width: 50,
borderRadius: 25,
backgroundColor: "#99AAAB",
alignItems: "center",
justifyContent: "center",
position: "absolute", //Here is the trick
bottom: 0,
alignSelf: "flex-end"
}}
>
<Entypo name="camera" size={25} color="#FFF" />
</View>
</ImageBackground>