Using require for SVG files in React Native

Question

Im using react-native-svg and I'm fully aware of their way to use local svg files as shown here . What I would like to know is if there is a way to use require for svg file paths. eg

<Svg width={50} height={50} fill={"#CCC"} source={require("./path/to/file.svg")} />

That way I would be able to store the require in a variable and use it like:

const myImage = require("./path/to/file.svg")

<Svg width={50} height={50} fill={"#CCC"} source={myImage} />

Any ideias?

EDIT FOR MORE DETAIL

Im developing a white label app so I have a config.js file with some color values, API endpoints and source images. eg

//config.js
const coBrandConfig = {
  firstapp: {
    Target: {
      BRAND_TARGET: "firstApp"
    },

    Login: {
      LOGIN_BACKGROUND_IMAGE: require("./path/to/file.png"),
      LOGIN_LOGO_IMAGE: require("./path/to/file.png"),

      LOGIN_TITLE_TEXT: "FIRST APP",

      LOGIN_STATUSBAR_CONTENT: "light-content",
      LOGIN_BACKGROUND_COLOR: "#333" ,
      LOGIN_SIMPLE_TEXT_COLOR: "#FFF",
      LOGIN_TEXTINPUT_BACKGROUD_COLOR: "#FFF",
      LOGIN_LOGIN_BUTTON_COLOR: "#009933",
    },
  },
}

module.exports = coBrandConfig["firstapp"]

Then I have a styles.js that gets and applies all of these values, which can change depending on the App variant. eg

import React from 'react'
import { StatusBar, Image } from "react-native"
import styled from 'styled-components/native'
import CoBrandConfig from "./config/config.js"

export function MainStyle () {
  return(
    <>
      <StatusBar barStyle={`${CoBrandConfig.Login.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={CoBrandConfig.Login.LOGIN_BACKGROUND_COLOR} />
      <Image source={CoBrandConfig.Login.LOGIN_LOGO_IMAGE} />
      <Svg width={50} height={50} fill={"#CCC"} source={CoBrandConfig.Login.MY_SVG} /> //HERES WHAT I WANT TO DO
      <TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
    </>
  )
}

Thats why I would like to pass a require("./path/to/file.svg") to a variable.

Answer 1

Try this one

import SvgUri from 'react-native-svg-uri';
import svgExample from './file.svg';

return:

  <SvgUri
    width="250"
    height="250"
    svgXmlData={svgExample}
  />

Answer 2

I'm a bit late, but try adding .default.src after your require:

source={require("./path/to/file.svg").default.src}

Answer 3

I use this library, I hope it will be useful

npm install 'react-native-svg';

then

import { SvgUri } from 'react-native-svg';
<SvgUri
  width="100%"
  height="100%"
  uri="url svg"
  />