How to center an SVG in React Native?

Question

I am struggling to align an SVG in React Native.

So far I have the following, however the SVG renders in the top-left of the component. I've been battling this for an hour or two.

const Like = () => (
  <View
    style={{
      height: 45,
      width: 45,
      flex: 1,
      borderWidth: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Svg width={45} height={45} viewBox="0 0 25 25">
      <Path
        d="M5.5 11a.344.344 0 0 1-.28-.126l-3.823-4.32c-.016 0-.041-.02-.078-.062-.033-.042-.067-.08-.095-.113L.88 5.902c-.143-.2-.28-.435-.407-.704a4.44 4.44 0 0 1-.323-.853C.05 4.01 0 3.675 0 3.34 0 2.303.256 1.482.774.88 1.273.293 1.997 0 2.944 0c.243 0 .5.05.771.15.274.1.517.235.732.403.2.15.393.318.58.502.17.15.328.31.473.477.142-.167.3-.327.47-.477.187-.184.381-.352.583-.502.215-.168.458-.302.73-.402.271-.1.53-.151.773-.151.944 0 1.669.293 2.17.879.515.603.774 1.424.774 2.461 0 1.038-.466 2.118-1.397 3.24l-3.824 4.294A.351.351 0 0 1 5.5 11"
        fill="#f26aa3"
      />
    </Svg>
  </View>
);

Answer 1

You can import your image file directly. Example:

import Image from '../assets/image.svg';

The style for image wrapper is

const styles = StyleSheet.create({
  image: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In Return,

<View style={styles.image}>
  <Image width={100} height={100} />
</View>

Answer 2

Path components do not have an adjustable x and y coordinate property, so you can't just provide these properties to center it. Instead, what we can do is create a definition that contains your Path component. Items declared inside of Defs tags are invisible until "used". Then we can utilize the Use component to use the defined component and provide x and y coordinates either as pixel values or percentages.

So, in your context you would end up with something like this:

import { Svg, Path, Defs, Use } from "react-native-svg";

const Like = () => (
  <View
    style={{
      height: 45,
      width: 45,
      flex: 1,
      borderWidth: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Svg width={45} height={45} viewBox="0 0 25 25">
      <Use href="likeButton" x="50%" y="50%" />

      <Defs>
        <Path
          id="likeIcon"
          d="M5.5 11a.344.344 0 0 1-.28-.126l-3.823-4.32c-.016 0-.041-.02-.078-.062-.033-.042-.067-.08-.095-.113L.88 5.902c-.143-.2-.28-.435-.407-.704a4.44 4.44 0 0 1-.323-.853C.05 4.01 0 3.675 0 3.34 0 2.303.256 1.482.774.88 1.273.293 1.997 0 2.944 0c.243 0 .5.05.771.15.274.1.517.235.732.403.2.15.393.318.58.502.17.15.328.31.473.477.142-.167.3-.327.47-.477.187-.184.381-.352.583-.502.215-.168.458-.302.73-.402.271-.1.53-.151.773-.151.944 0 1.669.293 2.17.879.515.603.774 1.424.774 2.461 0 1.038-.466 2.118-1.397 3.24l-3.824 4.294A.351.351 0 0 1 5.5 11"
          fill="#f26aa3"
        />
      </Defs>
    </Svg>
  </View>
);