Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to setup TSDX with an example application for React Native #388

Closed
nartc opened this issue Dec 21, 2019 · 8 comments
Closed

How to setup TSDX with an example application for React Native #388

nartc opened this issue Dec 21, 2019 · 8 comments

Comments

@nartc
Copy link

nartc commented Dec 21, 2019

Current Behavior

Hi guys,

I'm currently working on a React Native library (@nartc/react-native-barcode-mask) and tsdx has been working great for me. However, I found it pretty frustrated to test out new features/bug fixes without an example application.

I've been trying to setup an example application that lives outside of the src directory of the lib and trying to link the library source (or dist) to use as a local dependency inside of the example application, but it hasn't been good. I've tried:

  1. yarn link
  2. @nartc/react-native-barcode-mask: "file:./../" or "link:./../" inside example/package.json
  3. module-resolver to resolve the module with the path to ../dist

Desired Behavior

A clear guide/documentations on how to setup an example application (with live reload if possible) for React Native library.

Again, here's the repo of the library: @nartc/react-native-barcode-mask
Any help, at all, is much appreciated. TIA!

PS: Great work on tsdx.

@ambroseus
Copy link
Contributor

@nartc you can setup babel-plugin-module-resolver manually
#374 (comment)

meanwile #374 in progress

@ambroseus
Copy link
Contributor

BTW example from current template react-storybook also do not work

@nartc
Copy link
Author

nartc commented Dec 21, 2019

@ambroseus Thanks. I've tried setting up module-resolver and probably didn't know what I was doing so it didn't work. There's one weird problem was:

  1. If I setup "properly" for the paths of the library from the example/babel.config.js. Then the Metro Bundler would load 100% of the bundle, but as soon as the app's about to start, I got: Module AppRegistry is not a registered callback... error.
  2. All the other cases were: Unable to resolve.

@nartc
Copy link
Author

nartc commented Dec 21, 2019

After spending hours to get this setup properly without success, I've currently settled with a hack. Override tsdx with tsdx.config.js to have the build output directly to example/{package_name} which results in the output of the library is just like another module in the example application.

Pros: Setup is easy. Setup a script dev: tsdx watch --localDev. localDev will be available as options.localDev in tsdx.config.js. Use this flag to override config.output.file

Cons: Without further config needed, this hack requires the example app to be in JavaScript instead of TypeScript.

@ambroseus
Copy link
Contributor

@nartc cool)) can you please add your solution to #379

@nartc
Copy link
Author

nartc commented Dec 21, 2019

@ambroseus Done

@nartc nartc closed this as completed Dec 29, 2019
@nartc
Copy link
Author

nartc commented Dec 29, 2019

Closed as the "hack-around" is sufficient for my use-case enough.

@hmbrg
Copy link

hmbrg commented Feb 26, 2021

@nartc How would I make this solution work with a React Native Typescript project?
Using this solution I get the following error: Could not find a declaration file for module...

Any pointers on how to solve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants