Upgrade to react-native-render-html@6.0.0-beta.8 #4047

jsamr · 2021-07-14T20:01:20Z

Details

Upgrade react-native-render-html from 6.0.0-alpha.10 to version 6.0.0-beta.8 and adapt code to API changes. Great care was given on manually testing each platform. A visual comparision (before, after) for each platform is available in the Screenshots section.

Fixed Issues

#3951

Tests

Do npm ci to sync your node_modules
Start metro server and make sure to reset cache npm run start -- --resetCache
Run the native app
Open a discussion
Verify that all tags are displayed equally before and after patch (inline code, code fences, blockquote, italic, bold, anchors, edit tags and images)
Test manually if the image thumbnail button works as expected

QA Steps

Follow steps 4 to 6 from the previous section.

Tested On

I could not run dev on dekstop, there seems to be a file missing in the dist folder (could reproduce prior and after patch):

[Renderer] [Error: ENOENT: no such file or directory, open '/Users/jsamr/Programmation/Expensify.cash/dist/version.json'] {
[Renderer]   errno: -2,
[Renderer]   code: 'ENOENT',
[Renderer]   syscall: 'open',
[Renderer]   path: '/Users/jsamr/Programmation/Expensify.cash/dist/version.json'
[Renderer] }
[Renderer] webpack-dev-server --config config/webpack/webpack.dev.js --port 8080 --platform desktop exited with code 1
--> Sending SIGTERM to other processes..

Screenshots

Web

Before patch	After patch

Mobile Web

Before patch	After patch

Desktop

N/A

iOS

Before patch	After patch

Android

Note that the inline code issue is being tracked here: #4005

Before patch	After patch

marcaaron · 2021-07-15T03:39:09Z

Sorry for the delay @jsamr. I'll give this a look tomorrow!

jsamr · 2021-07-15T12:40:19Z

@marcaaron No worries :-)

marcaaron · 2021-07-15T19:41:28Z

It looks like there is a very minor styling difference where hyperlinks now have a line underneath them. But I'm not sure if this is at all a blocker. Going to double check with @Expensify/design just in case there are strong opinions :)

Edit: Actually looks like this only happens on mobile web. I'm not sure if this is already like this but probably is and isn't a blocker.

Code looks good, but will do some testing locally before merging.

megankelso · 2021-07-15T20:08:57Z

I think the underlined hyperlink is super common and don't have any issues with it

michelle-thompson · 2021-07-15T20:14:11Z

Hmm, what if we didn't underline the hyperlink unless you're hovering over it? GH, for example, does this (I'm hovering over first link):

marcaaron

Not sure if I'm holding something wrong, but if I upload an attachment on iOS simulator I end up seeing this error message:

Once there I cannot make it go away and the attachment I uploaded will not display.

marcaaron · 2021-07-15T23:44:58Z

Issue also present on web

jsamr · 2021-07-15T23:51:50Z

@marcaaron did you run npm ci and cleared the cache? Those warnings look alpha-ish to me

jsamr · 2021-07-15T23:55:35Z

@marcaaron I'll take a look at why there is suddenly underline for web (but not web mobile, did I get the screenshot wrong?) tomorrow morning and post my findings here. If you'd like a hover rule as suggested by @michelle-thompson, I have to say IDK how to achieve that with react-native-web!

marcaaron · 2021-07-16T00:10:36Z

I deleted node modules and re-installed everything + cleared the metro cache

jsamr · 2021-07-16T00:16:12Z

@marcaaron That's really weird; cloning the branch in a tmp to start with a pure state, and I'll let you know if I can reproduce. In the meantime (cloning is slow!), if you npm why react-native-render-html, can you confirm it outputs the beta-8?

EDIT npm why is available in npm 7, might not be your case...

marcaaron · 2021-07-16T00:25:09Z

Ok, let me know how it goes. We are using node v14.16.0 & npm 6.14.11.

jsamr · 2021-07-16T00:28:10Z

@marcaaron
Unfortunately I could not reproduce from a fresh clone / install. Here is a screen recording for attaching an image

expensify-test.mp4

Most likely a cache issue... sorry those are so annoying! Could you try a clean state with

git clone git@github.com:jsamr/Expensify.cash.git --branch=rnrh-next

EDIT my recording tool (Peek) added frames from the end in the beginning... weird bug

marcaaron · 2021-07-16T01:21:43Z

So, running in the cloned repo seems to have worked and is testing well. But breaks stuff when pulling this branch from my main project folder. Maybe it's a gremlin - but I just want to verify this isn't going to cause issues for everyone who merges the main branch in after we merge this. Will do a bit more testing.

marcaaron · 2021-07-16T01:25:58Z

Ok all resolved on my end ::oh-nothing:: !
LGTM just need to fix the conflicts 👍

marcaaron · 2021-07-16T01:41:02Z

I think npm ci maybe did something. but react native community cli is suddenly not working 😭

➜  Expensify.cash git:(f8f663aec) ✗ react-native run-ios --verbose
error Option "--scheme" is missing
Error: Option "--scheme" is missing
    at /Users/marcaaron/Expensidev/Expensify.cash/node_modules/@react-native-community/cli/build/tools/assertRequiredOptions.js:51:13
    at Array.forEach (<anonymous>)
    at assertRequiredOptions (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/@react-native-community/cli/build/tools/assertRequiredOptions.js:40:11)
    at Command.handleAction (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/@react-native-community/cli/build/index.js:181:42)
    at Command.listener (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:315:20)
    at Command.parseArgs (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/commander/index.js:651:12)
    at Command.parse (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/commander/index.js:474:21)
    at setupAndRun (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/@react-native-community/cli/build/index.js:267:24)
    at run (/Users/marcaaron/Expensidev/Expensify.cash/node_modules/@react-native-community/cli/build/index.js:206:11)

building from x code worked fine

jsamr · 2021-07-16T01:58:34Z

Oh jeez; npm nutery! ; AFAIK ci stricly matches npm lockfile while install allows more recent dependencies versions... perhaps try upgrade cli... sorry for this nightmare, I can take a look tomorrow morning and test on my Mac...

jsamr · 2021-07-17T12:13:30Z

@marcaaron So I tried on main branch on my mac, commit 329dc18

First, with npm install followed by cd ios; pod install:

Error: Option "--scheme" is missing

Then with npm ci followed by cd ios; pod install:

Error: Option "--scheme" is missing

So I believe the issue is not related to my commit. I guess it didn't occur to me when I tested because I built and run from XCode directly.

parasharrajat

Look Good. One Question why aren't we upgrading to 6.0.2? Asking just for curiosity?

Also, one question about dangerouslyDisableWhitespaceCollapsing={false}.
If we set it to true, What would be the major change in the output apart from the spaces that will not collapse. Will it break the layout?

Thanks for your time.

jsamr · 2021-07-19T10:55:12Z

Look Good. One Question why aren't we upgrading to 6.0.2? Asking just for curiosity?

6.0.2 was not released at the time of writing this PR. But there are no functional differences between 6.0.0-beta.8 and 6.0.2.

If we set it to true, What would be the major change in the output apart from the spaces that will not collapse. Will it break the layout?

It shouldn't break the layout. Basically, would be equivalent to setting whiteSpace: "pre" in baseStyle

marcaaron · 2021-07-19T18:37:48Z

So I believe the issue is not related to my commit. I guess it didn't occur to me when I tested because I built and run from XCode directly.

Got it, I think perhaps related to including expo unimodules but unsure. App builds fine in Xcode and Android Studio.

We still need to fix the conflicts here then I can merge :)

fix Expensify#3951

jsamr · 2021-07-23T19:49:17Z

@marcaaron Sorry I was unsure if you needed me to do the resolution; but I just realized that you were probably waiting for me to do it. So I just did it!

OSBotify · 2021-07-23T22:19:16Z

🚀 Deployed to staging in version: 1.0.79-6🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2021-07-28T21:07:44Z

🚀 Deployed to production in version: 1.0.80-2🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

jsamr changed the title ~~Upgrade to react-native-render-html@6.0.0-beta.8~~ WIP Upgrade to react-native-render-html@6.0.0-beta.8 Jul 14, 2021

jsamr marked this pull request as ready for review July 14, 2021 20:50

jsamr requested a review from a team as a code owner July 14, 2021 20:50

MelvinBot requested review from marcaaron and removed request for a team July 14, 2021 20:50

jsamr changed the title ~~WIP Upgrade to react-native-render-html@6.0.0-beta.8~~ Upgrade to react-native-render-html@6.0.0-beta.8 Jul 14, 2021

marcaaron assigned jsamr Jul 15, 2021

marcaaron reviewed Jul 15, 2021

View reviewed changes

parasharrajat previously approved these changes Jul 18, 2021

View reviewed changes

parasharrajat mentioned this pull request Jul 18, 2021

Spaces are not displayed after sending the message #3859

Closed

refactor: upgrade to react-native-render-html@6.0.0-beta.8

e981927

fix Expensify#3951

jsamr dismissed parasharrajat’s stale review via e981927 July 23, 2021 19:46

jsamr force-pushed the rnrh-next branch from f8f663a to e981927 Compare July 23, 2021 19:46

marcaaron approved these changes Jul 23, 2021

View reviewed changes

marcaaron merged commit cc14da2 into Expensify:main Jul 23, 2021

OSBotify mentioned this pull request Jul 23, 2021

Deploy Checklist: Expensify.cash 2021-07-23 #4198

Closed

60 tasks

iwiznia mentioned this pull request Aug 18, 2021

Android/iOS - Code blocks are overflowing the app border #4733

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to react-native-render-html@6.0.0-beta.8 #4047

Upgrade to react-native-render-html@6.0.0-beta.8 #4047

jsamr commented Jul 14, 2021 •

edited by marcaaron

marcaaron commented Jul 15, 2021

jsamr commented Jul 15, 2021

marcaaron commented Jul 15, 2021 •

edited

megankelso commented Jul 15, 2021

michelle-thompson commented Jul 15, 2021

marcaaron left a comment

marcaaron commented Jul 15, 2021

jsamr commented Jul 15, 2021 •

edited

jsamr commented Jul 15, 2021

marcaaron commented Jul 16, 2021

jsamr commented Jul 16, 2021 •

edited

marcaaron commented Jul 16, 2021

jsamr commented Jul 16, 2021 •

edited

marcaaron commented Jul 16, 2021

marcaaron commented Jul 16, 2021

marcaaron commented Jul 16, 2021

jsamr commented Jul 16, 2021

jsamr commented Jul 17, 2021 •

edited

parasharrajat left a comment

jsamr commented Jul 19, 2021

marcaaron commented Jul 19, 2021

jsamr commented Jul 23, 2021

OSBotify commented Jul 23, 2021

OSBotify commented Jul 28, 2021

Upgrade to react-native-render-html@6.0.0-beta.8 #4047

Upgrade to react-native-render-html@6.0.0-beta.8 #4047

Conversation

jsamr commented Jul 14, 2021 • edited by marcaaron

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

marcaaron commented Jul 15, 2021

jsamr commented Jul 15, 2021

marcaaron commented Jul 15, 2021 • edited

megankelso commented Jul 15, 2021

michelle-thompson commented Jul 15, 2021

marcaaron left a comment

Choose a reason for hiding this comment

marcaaron commented Jul 15, 2021

jsamr commented Jul 15, 2021 • edited

jsamr commented Jul 15, 2021

marcaaron commented Jul 16, 2021

jsamr commented Jul 16, 2021 • edited

marcaaron commented Jul 16, 2021

jsamr commented Jul 16, 2021 • edited

marcaaron commented Jul 16, 2021

marcaaron commented Jul 16, 2021

marcaaron commented Jul 16, 2021

jsamr commented Jul 16, 2021

jsamr commented Jul 17, 2021 • edited

parasharrajat left a comment

Choose a reason for hiding this comment

jsamr commented Jul 19, 2021

marcaaron commented Jul 19, 2021

jsamr commented Jul 23, 2021

OSBotify commented Jul 23, 2021

OSBotify commented Jul 28, 2021

jsamr commented Jul 14, 2021 •

edited by marcaaron

marcaaron commented Jul 15, 2021 •

edited

jsamr commented Jul 15, 2021 •

edited

jsamr commented Jul 16, 2021 •

edited

jsamr commented Jul 16, 2021 •

edited

jsamr commented Jul 17, 2021 •

edited