daniloster / react-native-sass-classname

Babel plugin to make react web app more reusable as react-native apps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple problems

mvdam opened this issue · comments

First of all; I really like the idea behind this plugin. Thanks for your work so far!
We tried to integrate it into our React Native project but encountered to many problems.

First of all we use TypeScript and thus TSX files. The className property is not supported on React Native Components so you have to adjust the type definition files to support it.

Second the example in the readme looks incorrect. I have to use the following to get the plugin started;

{
  ...
  "plugins": [
    ["react-native-sass-classname", {
      ...
    }]
  ],
  ...
}

When trying to build it also complains about missing dependencies like node-sass, react-native-css.
Also getting errors with resolving files. I.e.: I got this error: no such file or directory, open ' ... /dist/components/navigation/Header.native.'". While having a 'Header.css' and 'Header.native.css' in there.

Or am I doing something wrong here?

Using React Native v0.46.1, React v16.0.0-alpha.12, TypeScript v2.2.2.

Sorry, I was on holidays! I am on it now.

Being honest, I did not test with TypeScript. So, if you are willing to help, I would appreciate that. Put your PR.
I am putting a fix to add babel-runtime, node-sass and react-native-css as peer dependencies, not as dev dependencies.

@mvdam changes made in it. I have tested with my personal project. It seems grand.

As peer dependencies, you will need to define them as dependencies to your project.

"peerDependencies": {
    "babel-runtime": "^6.3.19",
    "node-sass": "^4.5.3",
    "react-native-css": "^2.0.5"
  }

Also, putting a fix to solve the config:

{
  ...
  "plugins": [
    "react-native-sass-classname"
  ],
  ...
}

Here is the PR reference: #2

@mvdam Let me know if it helped you... This package really needs to be improved. It has only been created to satisfy a PoC. As I mentioned before, feel free to contribute adding tests and more robust treatments. Thanks for the feedback.

I'm having the same problem with relative paths =(

ENOENT: no such file or directory, open '/app/src/styles.native.'

When my import is correct

import styles from '../../assets/sass/styles.sass';