Using lottie-react-native and react-native-svg in a package built with react-native-builder-bob

[mikevieira99]

I'm currently developing an internal package that aims to share components between similar React Native projects.
One of the components is a Spinner which is built with lottie-react-native, and loads the animation from a JSON file, and I also have a Icon component which is an abstraction that uses react-native-svg to return different icons based on a name prop, with these icons being loaded from SVG files.
The issue that I'm facing is that neither of these components work correctly, with the Spinner simply not showing and the Icon throwing an Invalid element type error. My guess is that it has something to do with the JSON and SVG files, because other components work just fine.
I've placed both of these packages in the peer dependencies as the documentation states, and included the assets folder in the src, so it's being included in the build, but still doesn't work.
Am I missing any step?
Any help would be appreciated!

[atlj]

If you installed the package on another project, you could check the node_modules to see if everything is bundled correctly. You can look for SVG and JSON files. Other than that, please check your imports and exports.

[satya164]

If you're using react-native-svg-transformer then it's not gonna work like that. It's a metro transformer, and metro runs for the app, so consumers would need to add it to their metro config. You likely had to update metro config in the example app for this - which means that consumers would also need to make that change. Ideally you wouldn't change the example app's config with something if you don't want consumers to have to do something.

If you want to make it work without additional work on consumer's side then you'd need to change how you convert those SVGs into components. Instead of using a metro transformer, use a different CLI that converts the SVGs to components. The converted components should then be in the final package. To do that, the easiest way would be to run that command to convert the SVGs and then commit the components.

[gradaom]

There are a few things you can check to troubleshoot the issues you're facing with the Spinner and Icon components.

1. Verify the file paths: Double-check that the file paths to the JSON and SVG files are correct in your components. Ensure that the relative paths match the structure of your package and that the files are correctly located in the assets folder.

2. Check the import statements: Make sure that you are importing the JSON and SVG files correctly in your Spinner and Icon components. For example, if you are using ES6 import syntax, verify that you are importing the files with the appropriate relative paths. Also, confirm that you are using the correct import statement for lottie-react-native and react-native-svg.

3. Asset bundling: Verify that your build process is including the assets in the bundle correctly. Some bundlers require additional configuration to handle static assets like JSON and SVG files. In React Native, you may need to configure metro.config.js or react-native.config.js (depending on the version) to specify the assets folder. Consult the documentation of your bundler (e.g., Metro Bundler) and ensure that the assets are being processed and included in the build output.

4. Verify peer dependencies: Ensure that you have properly included the peer dependencies (lottie-react-native and react-native-svg) in your project's package.json file. The correct versions should be specified for these dependencies, matching the requirements of your internally developed package.

5. Test in a sample project: To isolate the issue, create a separate test project where you install and use your internal package independently. This will help determine if the problem is specific to your package or if it is related to the integration of your package into another React Native project.

6. Follow the documentation: Cross-check your implementation against the documentation of lottie-react-native and react-native-svg. Ensure that you are using these libraries correctly, including any required setup steps or configuration options.

If you have followed these steps and the issues with the Spinner and Icon components persist, it may be helpful to provide additional information such as code snippets or error messages for further analysis.