question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-native-web support

See original GitHub issue

Hi @kristerkari,

Thank you for your plugin it is working great for React native projects,

We are trying to share our codebase across react-native and web(using react-native-web), our codebase is originally developed for React native CLI project, now we would like to add web support and using CRA with CRA-rewired but we are facing a problem:

According to CRA docs if you want to import SVG as react component you should use: import { ReactComponent as Logo } from './logo.svg';

but SVGR is making only export default SvgComponent so we cannot use this approach, to fix this we could add a small fix here which should not break anything:

var jsCode = svgr.sync(src, svgrConfig) + '\nexport const ReactComponent = SvgComponent;';

which gives us needed support to work in react-native and web projects(also definitions.d.ts should be updated accordingly).

Maybe we could make a PR for this, or what do you think?

Here is a quick fix for postinstall npm/yarn script:

"postinstall": "sed -e \"s:var jsCode = svgr.sync(src, svgrConfig);:var jsCode = svgr.sync(src, svgrConfig) + 'export const ReactComponent = SvgComponent;';:g\" -i.bak ./node_modules/react-native-svg-transformer/index.js"

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:3
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
vomchikcommented, Feb 6, 2020

@vitalyiegorov You can set a custom template for SVGR.

// svgr.config.js

const isExportNamedDeclaration = item => item.type === "ExportNamedDeclaration";

const hasExportNamedDeclaration = (items) => {
  if (items === null) {
    return false;
  }

  if (items instanceof Array) {
    return !!(items && items.find(isExportNamedDeclaration))
  }

  return isExportNamedDeclaration(items) 
}

const getName = (component) => {
  if (component instanceof Object) {
    return component.name;
  }

  return component;
}

const customTemplate = (
  { template },
  opts,
  { imports, componentName, props, jsx, exports },
) => {
  const ReactComponent = hasExportNamedDeclaration(exports) 
    ? ''
    : 'export const ReactComponent = ' + getName(componentName);

  return template.ast`
    ${imports}
    function ${componentName}(${props}) {
      return ${jsx};
    }
    ${ReactComponent}
    ${exports}
  `
}

module.exports = {
  template: customTemplate
}

@kristerkari Maybe it will be useful, so let’s add it to the README file.

1reaction
janlatcommented, Feb 4, 2022

Since SVGR v6.0.0, switching to named exports is just a matter of adding exportType: 'named' to your svgrrc file

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introduction to React Native for Web
React Native for Web is a compatibility layer between React DOM and React Native. It can be used in new and existing apps,...
Read more >
The complete guide to React Native for Web - LogRocket Blog
Yes! With React Native for Web, developers can write a single React Native application that can run natively on Android and iOS, as...
Read more >
React Native · Learn once, write anywhere
React Native lets you create truly native apps and doesn't compromise your users' experiences. It provides a core set of platform agnostic native...
Read more >
necolas/react-native-web: Cross-platform React UI packages
This is the development monorepo for "React Native for Web" and related projects. Structure .github. Contains workflows used by GitHub Actions. Contains issue ......
Read more >
react-native-web - npm
"React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation. The documentation ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found