React native web stylesheet.create styles not working correctly

Question

I was trying to create a layout with an embedded react SVG aligned at the center, however, it is not aligning the items, as shown below.

import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';

import { UseAuth } from '../hooks/useAuth';
import { SvgXml } from '@cantoo/rn-svg';
import { enterPINSVG } from '../assets/svgs/enterPIN';

export default function SplashScreen({
  navigation,
  useAuthInstance,
}: {
  navigation: StackScreenProps<any>;
  useAuthInstance: UseAuth;
}) {
  return (
    <View style={styles.container}>
      <View style={styles.logoWrapper}> <===== alignItems here doesnot work
        <SvgXml
          xml={enterPINSVG}
          style={{
            display: 'flex',
            backgroundColor: 'pink',
          }}
        />
      </View>

      <View style={styles.welcomeTextWrapper}>
        <Text style={styles.welcomeText}>Welcome to</Text>
        <Text style={styles.companyText}>ChapChap</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#DD1521',
  },
  logoWrapper: {
    flex: 3,
    backgroundColor: 'maroon',
    alignItems: 'center',
    justifyContent: 'center',
  },
  welcomeTextWrapper: {
    flex: 1,
    backgroundColor: '#DD1521',
    alignItems: 'center',
    display: 'flex',
  },
  welcomeText: {
    color: '#fff',
    fontSize: 22,
    fontWeight: '600',
  },
});

The SVG is exported from an assets js files as below

export const enterPINSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="56.483" height="62.973" viewBox="0 0 56.483 62.973">
  <g id="Component_166_2" data-name="Component 166 – 2" transform="translate(0.539 0.673)">
    <path id="Icon_map-sheild" data-name="Icon map-sheild" d="M53.844,21.757A26.591,26.591,0,0,1,57.825,9.67L48.977,1.08a16.183,16.183,0,0,1-9.585,3.858A16.932,16.932,0,0,1,30,3.106a18.133,18.133,0,0,1-9.4,1.832,17.326,17.326,0,0,1-9.123-3.5l-8.87,8.587A26.031,26.031,0,0,1,6.245,21.757c.113,1.88-.439,4.471-1.681,7.816q-.845,2.37-1.476,4.809a23.573,23.573,0,0,0-.569,3.235,15.508,15.508,0,0,0,3.1,9.647,36,36,0,0,0,8.157,6.921,53.762,53.762,0,0,0,9.581,3.936l1.861.841c.585.27,1.211.537,1.864.825A7.746,7.746,0,0,1,30,62.415a8.434,8.434,0,0,1,3-2.628q1.21-.5,2.4-1.056l1.4-.609c.48-.229,1.106-.494,1.868-.787q1.414-.544,2.843-1.048a23.875,23.875,0,0,0,4.787-2.1,41.2,41.2,0,0,0,8.057-6.823,15.281,15.281,0,0,0,3.2-9.742,34.163,34.163,0,0,0-2.131-7.783c-1.227-3.459-1.77-6.143-1.592-8.08Z" transform="translate(-2.519 -1.08)" fill="none" stroke="#000" stroke-width="1"/>
    <path id="Icon_ionic-ios-lock" data-name="Icon ionic-ios-lock" d="M24.376,12.44H22.865V9.5a6.043,6.043,0,1,0-12.086-.082V12.44H9.268A2.525,2.525,0,0,0,6.75,14.958V27.044a2.525,2.525,0,0,0,2.518,2.518H24.376a2.525,2.525,0,0,0,2.518-2.518V14.958A2.525,2.525,0,0,0,24.376,12.44ZM17.7,20.3v4.331a.9.9,0,0,1-.837.906.882.882,0,0,1-.925-.881V20.3a2.014,2.014,0,1,1,1.763,0Zm3.4-7.856H12.541V9.418a4.281,4.281,0,0,1,8.561,0Z" transform="translate(11.25 13.626)" fill="none" stroke="#000" stroke-width="1"/>
  </g>
</svg>`

However when I use an inline style like below it works,

import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';

import { UseAuth } from '../hooks/useAuth';
import { SvgXml } from '@cantoo/rn-svg';
import { enterPINSVG } from '../assets/svgs/enterPIN';

export default function SplashScreen({
  navigation,
  useAuthInstance,
}: {
  navigation: StackScreenProps<any>;
  useAuthInstance: UseAuth;
}) {
  return (
    <View style={styles.container}>
      <View
        style={{                           <=======inline style works
          flex: 3,
          backgroundColor: 'maroon',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <SvgXml
          xml={enterPINSVG}
          style={{
            display: 'flex',
            backgroundColor: 'pink',
          }}
        />
      </View>

      <View style={styles.welcomeTextWrapper}>
        <Text style={styles.welcomeText}>Welcome to</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#DD1521',
  },
  logoWrapper: {},
  welcomeTextWrapper: {
    flex: 1,
    backgroundColor: '#DD1521',
    alignItems: 'center',
    display: 'flex',
  },
  welcomeText: {
    color: '#fff',
    fontSize: 22,
    fontWeight: '600',
  },
});

Could someone explain why inline styles are working and styles via styles.create aren't?

Answer 1

To work with svg, add react-native-svg-transformer in your project, Example Code :

import Logo from "./logo.svg";
<Logo width={120} height={40} />

Don't forget to configure the module with respect to expo or react native cli. Checkout the docs for more details.