How to render an svg image in the front of background image on react native? - image

Question

I want to render an svg image on the 'front layer' of an background image.
When the view loads, only the background image appears, and i don't get any erros. Is the image even loading (at the background of the background)?
Here is what i've done so far:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image,
} from 'react-native';
import SVGImage from 'react-native-svg-image';
export default class ShowScreen extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={require('../img/image.jpg')}
style={styles.backgroundImage}
blurRadius={1}>
<View style={styles.content}>
<SVGImage
style={{ width: 80, height: 80 }}
source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}/>
</View>
</Image>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
flex: 1,
alignSelf: 'stretch',
width: null,
justifyContent: 'center',
},
content: {
alignItems: 'center',
}
});
Why the image is not appearing? I am using react-native.

Answer 1

I have my own component to do so:
import React from 'react';
import { View, Image } from 'react-native';
const BackgroundImage = (props) => {
const { container, image } = styles;
return (
<View style={container}>
<Image
style={[image,
{ resizeMode: props.resizeMode,
opacity: props.opacity}
]}
source={props.source}***strong text***
/>
</View>
)
};
const styles = {
container: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
image: {
flex: 1,
}
};
export {BackgroundImage};
that component will fill your container with any image you wish ;)
import React from 'react';
import { View, Image } from 'react-native';
class List extends Component {
render() {
let source = {uri: 'http://via.placeholder.com/350x150'};
return (
<View style = {{backgroundColor: 'black'}>
<BackgroundImage
resizeMode="cover"
opacity={0.6}
source={source}
/>
<View style={styles.content}>
<SVGImage
style={{ width: 80, height: 80 }}
source={{uri:'https://fluent-
panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}/>
</View>
</View>
)
}
export default List;

Answer 2

Had a similar problem with adding text over map components and it was solved by adding z-index: -1 to the back element (in this case, the map)