CODEWITHSUNDEEP
react-native
ChuChuwi
ChuChuwi

Reputation: 1050

React Native - Repeat SVG Background using react-native-svg-transformer

I would like to know how to create a repeating background (like background-repeat: repeat-y; property in css) from a SVG file that I downloaded from https://www.svgbackgrounds.com/

I'm using react-native-svg and react-native-svg-transformer in order to display SVG.

Here is my code.

import Background from "../assets/images/background.svg";


return (
<Background />
)

Upvotes: 0

Views: 2083

Answers (2)

Трин Зотофф
Трин Зотофф

Reputation: 192

u can use <Pattern> element from react-native-svg, https://github.com/react-native-svg/react-native-svg#pattern.
first flatlist element have svg repeated background.

enter image description here

Upvotes: 1

Prince
Prince

Reputation: 851

I don't see any support from react-native-svg and react-native-svg-transformer packages for your requirement.

Instead of using SVG image you can achieve this by using a png or jpeg image. like this

      <Image
        style={{ flex: 1, width: undefined, height: undefined }}
        source={require('./test.png')}
        resizeMode="repeat"
      />

if you need to display a particular svg image, then you can download the svg image from here https://www.svgbackgrounds.com/, and then you can convert that svg image in png or jpeg online like https://www.svgbackgrounds.com/ and then use the png image in react-native.

example:

enter image description here

Upvotes: 1

Related Questions