Search code examples
reactjsreact-nativejsxreact-native-svg

Svg is not showing in React Native

I am currently trying to develop a react Native app. My goal is to add two axis in the background using an svg vertcial line and an svg horizontal line. Here you can see the mockup : enter image description here

I was able to add the horizontal line by using an svg to jsx convertor : HorizonzalLine.js :

    return (
        <Svg
          xmlns="http://www.w3.org/2000/svg"
          width="2675"
          height="2"
          fill="none"
          viewBox="0 0 2675 2"
        >
          <Path
            stroke="#000"
            strokeLinecap="round"
            strokeWidth="2"
            d="M2674 1L1 1"
          ></Path>
        </Svg>

And this is how it is in my home.js :

      <View style={{zIndex: -100}}>
        <HorizontalLine/>
        {/* <VerticalLine/> */}
      </View>

So basically I am doing exactly the same to add a vertical line but it is not showing Screenshot of my app after this code :

        <HorizontalLine/>
        <View style={{position: 'absolute'}}>
          <VerticalLine/>
        </View>

(I put absolute because otherwise it's pushing everything to the top) And the screenshot where the vertical Line is not showing :

enter image description here

Here is VerticalLine.js

    return (
        <Svg
          width={2}
          height={844}
          viewBox="0 0 2 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <Path
            stroke="#000"
            strokeWidth={2}
            strokeLinecap="round"
            d="M1 843L1.00007 1"
          />
        </Svg>
      )
Solution

  • Okay I just solved it by adding

    ´alignItems: 'center', justifyContent: 'center'´

    to the view