Conditional rendering of svg files in react native

Question

I have an app for buying and selling dogs. In my app each dog breed has its own svg file stored in my assets folder (around 150 svg files). When fetching post data from the backend, I get different information about a the post, including the dogBreed, e.g. {dogBreed: golden-retriver}. I want to render the corresponding svg to each post of dogs, but I am unsure about what the best way to deal with this is. Should my app import all svg files? Should I convert all the svg files into JSX files? I have done this in other parts of the application. If i'm going for the JSX solution, should I render the JSX conditionally based on the name like: <${dogBreed}/> (if it is possible), or should I have one component take in the dog breed as a prop and have logic within for conditional rendering? . This would create a huge file, and I'm not sure if 150 if else/switch statements is the way to go. I feel really stuck here.

First, if they are vector graphics, they should be small. Second, you can import them dynamically/lazily/asynchronously if you're using Webpack (which you are already using if you made your app using Create React App). Third, since you mention you're using a backend, why not just make the static vector files available for HTTP retrieval and just render an `` with `src` attribute pointing to the vector file? — Codebling, Dec 13 '21 at 23:54
There are already solutions on stackoverflow that can help you. See https://stackoverflow.com/questions/61339259/how-to-dynamically-import-svg-and-render-it-inline — ArrowHead, Dec 14 '21 at 00:03

score 1 · Accepted Answer · answered Dec 14 '21 at 02:09

1

First of all, converting all of your svg file to react native JSX files.

Then you can lazy load the svg based on name (I assume) Something like

const breedName = data.dogBreed;    
const component = React.lazy(() => import(`./assets/${breedName}.jsx`));

answered Dec 14 '21 at 02:09

Mengnan

62
3

Thank you, much appreciated. This solved the problem. The lazy load was the thing I was missing. Could also drop the JSX conversion by using react-native-svg-transformer as suggested by others. – Haakon Jacobsen Dec 18 '21 at 02:36

score 0 · Answer 2 · answered Dec 14 '21 at 08:51

I recommend you to use react-native-svg-transformer library.

Here's the link to the library: https://github.com/kristerkari/react-native-svg-transformer This library allows you to import the svg files without converting them.

After the configuration you can do similar to this.

...
import LogoA from "./logo_a.svg";
import LogoB from "./logo_b.svg";
...

return cond ? <LogoA width={120} height={40} /> : <LogoB width={120} height={40} />

...

score 0 · Answer 3 · answered Dec 17 '21 at 04:58

Try using this library https://github.com/stowball/react-native-svg-icon. Convert all the svgs to JSX in one file.

Create an component as a bridge between react-native-svg-icon's which imports the above SVGs

you can directly use this as component.

import Icon from './components/Icon';

// Inside some view component
render() {
  return (
    <Fragment>
      <Icon name="SortArrows" height="20" width="20" />
      <Icon name="Tick" fill="#0f0" viewBox="0 0 200 200" />
      <Icon name="Star" fill="transparent" stroke="#fff" strokeWidth="5" 
  />
    </Fragment>
 );
}

you can place name as dynamic to render dynamic svg icon. Just give it a try.

Conditional rendering of svg files in react native

3 Answers3