React-native-web: Work with react-native-svg or linear gradient

[AlexBrasileiro]

Do you want to request a feature or report a bug?

I think it's a help o.O

What is the expected behavior?

Install react-native-svg to working with SVG or backgroundColor accepting linear gradient.
Does anyone understand what the correct webpack configuration for can use this module?

// CONFIGS.

1. npm install react-native-svg --save
2. react-native link react-native-svg

3. Component.js

import React, { Component } from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import Svg, { LinearGradient, Path, Rect, Circle } from 'react-native-svg'

class SvgExample extends Component {
    render() {
        return (
            <Svg
                height="100"
                width="100"
            >
                <Circle
                    cx="50"
                    cy="50"
                    r="45"
                    stroke="blue"
                    strokeWidth="2.5"
                    fill="green"
                />
                <Rect
                    x="15"
                    y="15"
                    width="70"
                    height="70"
                    stroke="red"
                    strokeWidth="2"
                    fill="yellow"
                />
            </Svg>
        );
    }
}

4. webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: {
    main: './index.web.js',
  },
  devServer: {
    port: 9090
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
          plugins: ["transform-class-properties"]
        },
      },
      {
        test: /\.woff|.woff2|.ttf|.eot*.*$/,
        loader: 'file-loader',
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'react-native-web-image-loader?name=[hash].[ext]'
      }
    ],
  },
  resolve: {
    alias: {
      'react-native': 'react-native-web',
    },
  },
}

5. package.json

{
  "name": "name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "web": "webpack-dev-server --hot"
  },
  "dependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "file-loader": "^1.1.6",
    "react": "16.2.0",
    "react-dom": "^16.2.0",
    "react-native": "0.53.0",
    "react-native-highcharts": "^1.0.2",
    "react-native-svg": "^6.2.1",
    "react-native-web": "^0.4.0",
    "webpack": "^3.11.0"
  },
  "devDependencies": {
    "babel-jest": "22.2.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.2.2",
    "react-native-web-image-loader": "0.0.5",
    "react-test-renderer": "16.2.0",
    "webpack-dev-server": "^2.11.1"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

# 6. ERROR

ERROR in ./node_modules/react-native-svg/elements/Path.js
Module parse failed: Unexpected token (10:23)
You may need an appropriate loader to handle this file type.
| 
| export default class extends Shape {
|     static displayName = 'Path';
| 
|     static propTypes = {
 @ ./node_modules/react-native-svg/index.js 8:0-35
 @ ./src/components/indexFootStats/index.js
 @ ./src/pages/home.js
 @ ./App.js
 @ ./index.web.js
 @ multi (webpack)-dev-server/client?http://localhost:9090 webpack/hot/dev-server ./index.web.js

Environment (include versions). Did this work in previous versions?

• OS: MacOs 10.13.3
• Device: Macbook Pro
• Browser: Chrome
• React Native for Web (version): ^0.4.0
• React (version): 16.2.0

[necolas]

Please read the docs about compiling uncompiled react native packages

https://github.com/necolas/react-native-web/blob/master/website/guides/getting-started.md#web-packaging-for-existing-react-native-apps

React Native SVG should also add support for Web.

[AlexBrasileiro]

@necolas Thank you! sorry for the inconvenience o/

[necolas]

No worries!

[necolas]

Also check out this thread https://github.com/react-native-community/react-native-svg/issues/155

And this other library https://github.com/godaddy/svgs/blob/master/README.md

[AlexBrasileiro]

@necolas thanks bro!

[Atomox]

Please read the docs about compiling uncompiled react native packages

https://github.com/necolas/react-native-web/blob/master/website/guides/getting-started.md#web-packaging-for-existing-react-native-apps

Broken link. Please update.

[dalcib]

https://github.com/necolas/react-native-web/blob/master/docs/guides/multi-platform-apps.md