chore: upgrade docusaurus to 2.3.1 & react 18.2

[blakef]

Upgrade these dependencies, so we can support deep-linking in Tabs.

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	b57521b
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6411e2eb454977000891daa8
😎 Deploy Preview	https://deploy-preview-3618--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Simek]

Thanks for looking at Docusaurus upgrade! 👍

There are few things which need to be done, besides bumping the packages versions in package.json:

• we need to regenerate swizzled components, and re-apply our custom modifications, files are located in https://github.com/facebook/react-native-website/tree/main/website/src/theme, and there is a guide how to do this - https://docusaurus.io/docs/next/swizzling
• we need to verify if custom classes used in our SCSS files still exist, there is no other way than going through various pages and looking for regressions in comparison to the currently deployed PROD instance

Broken things I have spotted on quick check:

• loading showcase page crashes Docusuarus - https://deploy-preview-3618--react-native.netlify.app/showcase
• announcement bar (at top) looks unstyled now

[blakef]

Push for the Showcase issue coming soon.

I wrote some visual diff tooling to give me a better chance of catching these things.

[blakef]

@Simek I think this LGTM now. When you have a moment would you mind looking over it again. I've incorporated the swizzle changes and fixed the issue with showcase.

[Simek]

Thank you for all the work put into the upgrade! 🙏 Besides the comment about Showcase issue, this LGTM! 👍

Also, it looks like we have broken content container on versions page - https://deploy-preview-3618--react-native.netlify.app/versions - but surprisingly, this already seems to be an issue for PROD deployment, so we can address this in a separate PR.

[blakef]

I'm spamming netifly atm because the issue doesn't reproduce on my locally hosted version. Apologies for the noise.

[blakef]

Separated the hooks in here from the Showcase component made it simpler to call hooks consistently in Showcase (otherwise we'd get invariant errors).

[Simek]

Showcase looks good, glad you figure it out! To fix the announcement bar styling we will need to change CSS selectors in this section:

react-native-website/website/src/css/customTheme.scss

Lines 1214 to 1259 in 30f9e3a

	/* Announcement banner */
	:root {
	--docusaurus-announcement-bar-height: auto !important;
	}
	div[class^="announcementBar"][role="banner"] {
	border-bottom-color: var(--deepdark);
	button.close {
	svg {
	fill: white;
	}
	}
	}
	div[class^="announcementBarContent"] {
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	padding: 8px 30px;
	a {
	text-decoration: underline;
	display: inline-block;
	color: var(--brand) !important;
	&:hover {
	color: var(--ifm-color-primary) !important;
	}
	}
	}
	@media only screen and (max-width: 768px) {
	div[class^="announcementBarContent"] {
	font-size: 18px;
	}
	}
	@media only screen and (max-width: 500px) {
	div[class^="announcementBarContent"] {
	font-size: 15px;
	line-height: 22px;
	padding: 6px 30px;
	}
	}

Since the class names changed between versions, now we need to use div[class*= (includes) instead of div[class^= (startsWith), which should bring the correct styling back. It is really needed only for announcementBarContent, but we can apply this change to the rest of announce bar classes to be a bit more future-proof.

[Simek]

Thank you for all the updates and great comments on the process, LGTM! 🚀