React-native-web: can i use `victory-native` with `react-native-web` ?

[geminiyellow]

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

FEATURE

What is the current behavior?

• i use victory-native in my app, it working
• i try to wrap my app by react-native-web
• but i got this error

ERROR in ./App/node_modules/react-native-svg/lib/SvgTouchableMixin.js
Module not found: Error: Can't resolve 'react-native/Libraries/Components/Touchable/Touchable' in '/Users/Dev/Documents/Sources/hello-react-native-web/App/node_modules/react-native-svg/lib

What is the expected behavior?

can i use victory-native with react-native-web ?

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

• OS: macos
• Browser: chrome
• React Native for Web (version): ↓
• React (version): ↓

    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-native": "0.53.3",
    "react-native-web": "^0.5.1"

[geminiyellow]

and i found this ISSUE: https://github.com/necolas/react-native-web/issues/531#issuecomment-309819564

by @peggyrayzis ,

we launched our first site w/ RNW into prod. Everything on the schedule page is built with universal components + several RN libs (react-native-calendars, react-native-svg, victory-native, react-native-vector-icons)

[necolas]

Install the Babel plugin as mentioned in the docs. That will alias the packages

[geminiyellow]

@necolas

babel-plugin-react-native-web right ? yep, installed. but not working.

and i config .babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    "react-native-web"
  ]
}

[necolas]

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

[geminiyellow]

oh @necolas thank you sir. but why i create this issues is because i follow ↑ that doc and cannot start.

[geminiyellow]

what i do is

1. create a react-native app by react-native init
2. add react-native-svg and victory-native into that app
3. create a webpack.config.js follow Web packaging for existing React Native apps

what i try is:

Add every directory that react-native-svg and victory-native to be compiled by Babel during the build.

[necolas]

Looks like a problem in react-native-svg with a bad import that reaches into React Native package internals

https://github.com/react-native-community/react-native-svg/blob/master/lib/SvgTouchableMixin.js

That first import should be

import { Touchable } from 'react-native'

[geminiyellow]

@necolas

hmm... react-native-svg love import from internal.
so, we should create a PR to react-native-svg or create a patch?

and i found it has some reason have to import createReactNativeComponentClass
from internal.

and, ref: https://github.com/react-native-community/react-native-svg/issues/608

[RangerMauve]

Instead of trying to get victory-native to compile for web,
you can alias victory-native to victory when building for the web.
The two modules are API-compativble

[geminiyellow]

@RangerMauve thank you, that is a really good solution.