0

Any idea how to use image sheets in react native? For instance, if I have an image sheet like this, is there a way that I can define the frame dimensions and reuse one single image to display multiple icons?

enter image description here

similar question: How can I use my spritesheet of icons in react native?

Found an approach of using ImageBackground: crop an image of icons

Exploring other options.

Dion George
  • 35
  • 1
  • 6

1 Answers1

0

As a solution:

You can convert your image (jpg/png/jpeg) to an SVG file then use this SVG to create a react component to use on your React Native application.

Explanation

First step convert your image to SVG using converter tools. you can also use online websites like pngtosvg

Second step convert the SVG to the valid component using online tools like react-svgr or svg2jsx

Third step Assume you get the below component:

import * as React from "react"
import Svg, { Path } from "react-native-svg"

function SvgComponent(props) {
  return (
    <Svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
      <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
    </Svg>
  )
}

export default SvgComponent

Now, import it as a regular component in your application.

nima
  • 7,796
  • 12
  • 36
  • 53