Clean install

[nikoden-io]

FIrst of all thanks for your work on this library.

My goal is to achieve a component library, which can be used independantly but also tested through Storybook.
I follow your suggested pattern, creating components in main "src" directory and installing Storybook and stories related to theses components inside the "example" app.

At the start it was working as intended but I than face the following issues:

• "tsc" not found when running bob build, but "tsc" works when running it directly
• "can't be used as JSX component" TypeScript error in main "src" folder for "View", "Text" and all React Native base components
• Linting is a bit strange as it informs me of errors but not automatically fix on save (which is configured and work on other projects)

My main question is: Am I right trying to achieve my goal like this ? Is there common pitfalls that gets me to theses errors ?
Any advice is warmly welcome.

[satya164]

My main question is: Am I right trying to achieve my goal like this ? Is there common pitfalls that gets me to theses errors ?

It depends on what changes you made to the project. Often it's easier to run into issues in repos containing multiple packages (e.g. root package and example).

"tsc" not found when running bob build, but "tsc" works when running it directly

Is TypeScript installed under node_modules and is in the root package.json's devDependencies?

"can't be used as JSX component" TypeScript error in main "src" folder for "View", "Text" and all React Native base components

You have multiple versions of @types/react installed. Run yarn why @types/react or npm ls @types/react under both example and root to check why and ensure that you have a single version.

Linting is a bit strange as it informs me of errors but not automatically fix on save (which is configured and work on other projects)

Automatically fixing lint errors on save depends on your editor config. e.g.:

"eslint.validate": [
  {
    "language": "javascript",
    "autoFix": true
  },
  {
    "language": "javascriptreact",
    "autoFix": true
  },
  {
    "language": "typescript",
    "autoFix": true
  },
  {
    "language": "typescriptreact",
    "autoFix": true
  }
],

Your other projects may already include this in the repo if it works there.

[nikoden-io]

Thanks for your anwser !

• I checked and align @types/react and this fix the problem indeed
• I don't have issue with "tsc" when using "yarn prepack" script, but I have it when using "bob build" directly, I will use the script so even if it's look like the same command is triggered
• For the linting, my IDE (WebStorm) accept "automatic configuration" '(which I don't use) and "manual configuration" but I the need an .eslintrc file which I don't have in the library by default, can I override your boilerplate whith a new eslint init or is this will brake the setup you've nicely made ?

[satya164]

I don't have issue with "tsc" when using "yarn prepack" script, but I have it when using "bob build" directly, I will use the script so even if it's look like the same command is triggered

You shouldn't run bob build directly. Seems like you're running bob globally so it's looking for globally installed tsc. You also never need to run bob build/yarn prepack manually - it's automatically run on publish. But if you do need to run it for some reason, you can run with yarn prepack or yarn bob build.

For the linting, my IDE (WebStorm) accept "automatic configuration" '(which I don't use) and "manual configuration" but I the need an .eslintrc file which I don't have in the library by default, can I override your boilerplate whith a new eslint init or is this will brake the setup you've nicely made ?

I don't use Webstorm so not sure - there's already eslintConfig in package.json. If you really need .eslintrc then you can movethat content.

[nikoden-io]

Perfect setup is almost there now, thanks to your advice !

I have a last issue: I'm using styled-components and styled-system inside the library, I find a way to make the "ThemeProvider" available for the library user, but I'm missing a piece to load correctly custom fonts (Montserrat).

EDIT: I have paste the .ttf file in "./src/assets/fonts" as the "src" folder is already loaded by your setup, but unfortunately the problem is stil there.

I need to run somewhere a Fonts.loadAsync or something like that to enable the font in the ThemeProvider and so for the library user. Is this a bad practise or do you know a way to import and make a .ttf file available in a library like the one created by your package ?
Maybe the font needs to be loaded on project-side with an import coming from the library, but this seems not to be the right way.