How to setup TSDX with an example application for React Native

[nartc]

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]

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

meanwile #374 in progress

[ambroseus]

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

[nartc]

@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]

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]

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

[nartc]

@ambroseus Done

[nartc]

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

[hmbrg]

@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?