SVG around a PNG in ReactNative

[TurtleWolf1]

AppHammer

I’m trying to reconstruct my React portfolio in ReactNative code. I replaced the spinning React logo with a circle of text using a transparent SVG and have that spinning around a transparent png as a background. When I try to copy that pattern in ReactNative it looks fine when rendered for the web, but the outer circle of text is disappearing when viewed with phone emulators. I’m not sure what else I should be trying differently, especially since it lines up for Web, even if I used some conditional rendering or media query, I’m not sure how I’d render it any differtly…

Live Demo, fork to alter and experiment

SVG logo:

Hammer PNG:

Open the AssetExample.js file to start writing some code. You can preview the changes directly on your phone or tablet by clicking the Run button or use the simulator by clicking Tap to Play. When you’re done, click Save and share the link!

AssetExample.js

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';
import { Image, ImageBackground } from 'react-native';
import crcLogo from '../assets/logo.svg';
import bkhammer from '../assets/script-n-hammerSM.png';
export default function AssetExample() {
  return (
    <View style={styles.container}>
      <ImageBackground source={bkhammer} style={styles.container}>
      <Image style={styles.logo} source={crcLogo} />
          </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#000',
    // flex: 1,
    resizeMode: "cover",
    // shadowColor: "black",
    // shadowOffset: {width: 7,height: 7},
    // shadowRadius: 7,
    // elevation: 7,
    // height: 250,
    // width: 250,
    shadowOpacity: 0.9,
  },
  // paragraph: {
  //   margin: 24,
  //   marginTop: 0,
  //   fontSize: 14,
  //   color: 'white',
  //   fontWeight: 'bold',
  //   textAlign: 'center',
  // },
  logo: {
    height: 250,
    width: 250,
  }
});