Skip to content

What is the best way to share components between different solutions in react native? #17926

Closed
@MPiwowarski

Description

@MPiwowarski

I must build a mobile app which has a function of scanning barcodes. This app needs to be able to scan barcodes using laser scanner or camera, depends on the device.

The second case with camera is quite simple because I’ve used Expo framework which provides a library, very handy to use
https://docs.expo.io/versions/latest/sdk/bar-code-scanner.html

In the first case, I need to use Zebra device with android 4.0 Kitkat to scan barcodes using laser scanner and the implementation is more complex. I need to use react-native-datawedge-intents library:
https://www.npmjs.com/package/react-native-datawedge-intents

In this case, I can’t use Expo and I had to do eject to be able to link the library.
To run the application on a TC75/Zebra device you will have to first build a bundle that can be deployed independently
Note that you will lose access to the live reload functionality in React Native
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Then upload the app on the device (I’m using yarn)
yarn run android
Deployment for Zebra device takes much more time then for device with camera (Expo is just more powerful)
In both cases, the app will look the same. The only difference will be the way how you can scan the barcodes.
My first idea was to create the structure of projects as follows:

  • mobile-development
    • zebra-device
    • camera-device
    • shared

In the shared project, I would store common components like LoginScreen, PasswordResetScreen, styles etc. but I see some minuses in such solution. The first problem is a dependency between modules in shared folder and node_modules.
I've tried to link some Sample component from a shared folder in camera-device project just to check if it works and the error appears:
Unable to resolve ../shared/Sample" from "./D:\\react-native\\lynx-mobile\\camera-device\\App.js: The module ../shared/Sample could not be found"`

Till now I was working on two separate projects. Because 90% of the code in both projects is almost the same there is a lot of redundancy. It’s annoying to do the implementation of one thing twice.
Want to ask you guys what do you think is the best solution for the described case above?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions