[HOLD for payment 2025-01-22] [$250] Update react-native-qrcode-svg to not use text-decoding

[gedu]

Background

react-native-qrcode-svg relies on the text-encoding library to provide TextDecoder and TextEncoder functionality, which is essential for encoding and decoding text data. However, starting with React Native 0.75, these functionalities are natively supported, making the inclusion of text-encoding redundant for modern environments.
Despite this, the library currently includes text-encoding in all builds, regardless of the React Native version. This results in an unnecessary increase in app bundle size, particularly for developers using React Native 0.75 or higher, where native support for TextDecoder and TextEncoder is already available. This behavior impacts performance and resource usage, especially for applications targeting modern devices.
Reference the relevant issue and commit:
• Issue: Expensify/react-native-qrcode-svg#199
• Commit: 53f1c5f

Problem

The react-native-qrcode-svg library always includes the text-encoding library, adding approximately 600KB to the app bundle size. This is unnecessary for React Native 0.75+ environments, where TextDecoder and TextEncoder are natively supported, leading to inefficiencies in modern applications.

Solution

Update react-native-qrcode-svg to conditionally include the text-encoding library based on the React Native version or the availability of native TextDecoder and TextEncoder. This can be achieved through the following steps:
Version Check:
○ Add conditional logic to detect if the app is running on React Native 0.75 or higher.
○ Exclude the text-encoding library from the bundle if native support for TextDecoder and TextEncoder is available.
Metro Serializer Optimization:
○ Use tools like Metro Serializer Esbuild to further optimize the bundle and ensure unused dependencies like text-encoding are excluded.

Slack: https://expensify.slack.com/archives/C05LX9D6E07/p1734018386310029

Note: Given that we are on 0.75, we can remove text-encoding lib

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021869155133024534590
• Upwork Job ID: 1869155133024534590
• Last Price Increase: 2024-12-17

Issue Owner

Current Issue Owner: @isabelastisser

[gedu]

Hey @mountiny, Edu from Callstack, I will be working on this one

[gedu]

Tasks

• Remove text-decoding from react-native-qrcode-svg
• Update Exfy app to use the new react-native-qrcode-svg version

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021869155133024534590

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[gedu]

I confirmed that removing the line:

global.TextEncoder = require("text-encoding").TextEncoder;

our app will tree shake that lib and won't be on the final bundle. Now I'm looking into a way to adding that line for old RN versions

[AbdulrhmnGhanem]

Hi @gedu, I see you are working on the issue already, I saw it yesterday and wanted to experiment with it before commenting. Feel free to continue on with my PR!

[melvin-bot]

📣 @AbdulrhmnGhanem! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[gedu]

@AbdulrhmnGhanem Hey, thanks for your PR. The main idea of the issue is to remove the text-encoder to reduce the bundle size, your approach always keeps the lib into the bundle. So it won't work.

[AbdulrhmnGhanem]

It doesn't get bundled unless the library users install it. I am curious though if there's a solution that doesn't require modifying metro config for each app.

…

On Thu, Dec 19, 2024, 10:00 PM edug ***@***.***> wrote: @AbdulrhmnGhanem <https://github.com/AbdulrhmnGhanem> Hey, thanks for your PR. The main idea of the issue is to remove the text-encoder to reduce the bundle size, your approach always keeps the lib into the bundle. So it won't work. — Reply to this email directly, view it on GitHub <#54096 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3OMSO7HIPSBPW7MGJLIQD2GMQWNAVCNFSM6AAAAABTRQ27ZOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJVGY3DSMRQHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[gedu]

@mountiny I created a PR using the metro solution, on Exfy app the only thing we have to do is increase the version and that's all.

[isabelastisser]

FYI, I will be OOO from Dec 23 to Jan 6, so please reassign the issue to another team member for urgency, IF needed.

[mountiny]

@gedu can you link the pr here please?

[gedu]

I'm looking into a possible Example App issue, and will continue updating the version @mountiny I still see that the last version is 6.3.12, shouldn't it be 6.3.13?

[mountiny]

Fixing the publishing flow that seems broken

[melvin-bot]

@gedu @parasharrajat @isabelastisser @mountiny this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[gedu]

PR created: #55080

[mountiny]

@gedu anything else left to do here?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.85-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Bump react-native-qrcode-svg version #55080

If no regressions arise, payment will be issued on 2025-01-22. 🎊

For reference, here are some details about the assignees on this issue:

• @gedu does not require payment (Contractor)
• @parasharrajat requires payment through NewDot Manual Requests

[melvin-bot]

@parasharrajat @isabelastisser @parasharrajat The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[gedu]

All good here

[mountiny]

So only payments to @parasharrajat

[parasharrajat]

This is a new feature not bug. Let's fix the labels.

[parasharrajat]

Regression Test Steps

1. Open a Workspace
2. Click the top bar to get into the Workspace's Profile
3. Click on Share button
4. The QRcode should show up

Do you agree 👍 or 👎 ?

[mountiny]

I think we should already have tests like this

[melvin-bot]

Current assignee @isabelastisser is eligible for the NewFeature assigner, not assigning anyone new.

[isabelastisser]

Payment summary:

@parasharrajat requires payment through NewDot Manual Requests $250 for C+ review

[parasharrajat]

Payment requested as per #54096 (comment)