feat: 0.64 release (facebook#2538)

* Feat: release article * Add version 0.64.0 * fix: update title * update version in docs * fix: broken links * fix: wrong url * Fixing some typos * Rewording the MLH fellowship intro. * fix links in blog post, fix Pods code block highlight * fix version cut docs and add v2 command * prettier docusaurus config * fix blog post links again * fix whitespaces * add Hermes website link Co-authored-by: Eli White <[email protected]> Co-authored-by: Bartosz Kaszubowski <[email protected]>
2haein · Mar 12, 2021 · 67f71d9 · 67f71d9
1 parent 0b67fbd
commit 67f71d9
Show file tree

Hide file tree

Showing 167 changed files with 36,161 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -99,7 +99,7 @@ Docusaurus keeps track of the list of versions for the site in the `website/vers
 
 1.  `cd react-native-website` to go into the project root.
 1.  `cd website` to go into the website portion of the project.
-1.  Run `yarn run version <newVersion>` where `<newVersion>` is the new version being released.
+1.  Run `yarn version:cut <newVersion>` where `<newVersion>` is the new version being released.
 
 ## 🔧 Website configuration
 

diff --git a/.../blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md b/.../blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md
@@ -82,7 +82,7 @@ They say a picture is worth 1,000 words. How many words is an interactive visual
 
 Alrighty. Now that we know what we are building and how the animation works, we can get down to the code — the reason you are really here.
 
-The main piece of this puzzle is [MaskedViewIOS](/docs/maskedviewios), a core React Native component.
+The main piece of this puzzle is [MaskedViewIOS](/docs/0.63/maskedviewios), a core React Native component.
 
 ```jsx
 import { MaskedViewIOS } from 'react-native';

diff --git a/website/blog/2018-08-27-wkwebview.md b/website/blog/2018-08-27-wkwebview.md
@@ -10,7 +10,7 @@ For a long time now, Apple has discouraged using UIWebViews in favor of WKWebVie
 
 The tail end of these changes were landed in [this commit](https://github.com/facebook/react-native/commit/33b353c97c31190439a22febbd3d2a9ead49d3c9), and will become available in the 0.57 release.
 
-To opt into this new implementation, please use the [`useWebKit`](/docs/webview#usewebkit) prop:
+To opt into this new implementation, please use the [`useWebKit`](/docs/0.63/webview#usewebkit) prop:
 
 ```js
 <WebView

diff --git a/website/blog/2021-03-11-version-0.64.md b/website/blog/2021-03-11-version-0.64.md
@@ -0,0 +1,92 @@
+---
+title: Announcing React Native 0.64 with Hermes on iOS
+author: Mike Grabowski
+authorTitle: CTO and Co-Founder at Callstack
+authorURL: 'https://twitter.com/grabbou'
+authorImageURL: 'https://avatars0.githubusercontent.com/u/2464966?s=460&v=4'
+authorTwitter: grabbou
+tags: [announcement, release]
+---
+
+Today we’re releasing React Native 0.64 that ships with support for Hermes on iOS.
+
+## Hermes opt-in on iOS
+
+[Hermes](https://hermesengine.dev) is an open source JavaScript engine optimized for running React Native. It improves performance by decreasing memory utilization, reducing download size and decreasing the time it takes for the app to become usable or “time to interactive” (TTI).
+
+Since Hermes' release on Android last year, it became a required feature for those seeking superior performance from their React Native applications.
+
+With this release, we are happy to announce that you can now use Hermes to build on iOS as well. To enable Hermes on iOS, set `hermes_enabled` to `true` in your `Podfile` and run `pod install`.
+
+```ruby
+use_react_native!(
+   :path => config[:reactNativePath],
+   # to enable hermes on iOS, change `false` to `true` and then install pods
+   :hermes_enabled => true
+)
+```
+
+All the necessary changes will be done automatically for you.
+
+Please keep in mind that Hermes support on iOS is still early stage. We are keeping it as an opt-in as we are running further benchmarking. We encourage you to try it on your own applications and let us know how it is working out for you!
+
+## Inline Requires enabled by default
+
+Inline Requires is a Metro configuration option that improves startup time by delaying execution of JavaScript modules until they are used, instead of at startup.
+
+This feature has existed and been recommended for a few years as an opt-in configuration option, listed in the [Performance section of our documentation](/docs/performance). We are now enabling this option by default for new applications to help people have fast React Native applications without extra configuration.
+
+Inline Requires is a Babel transform that takes module imports and converts them to be inline. As an example, Inline Requires transforms this module import call from being at the top of the file to where it is used.
+
+**Before:**
+
+```jsx
+import { MyFunction } from 'my-module';
+
+const MyComponent = (props) => {
+  const result = myFunction();
+
+  return (<Text>{result}</Text>);
+};
+```
+
+**After:**
+
+```jsx
+const MyComponent = (props) => {
+  const result = require('my-module').MyFunction;
+
+  return (<Text>{result}</Text>);
+};
+```
+
+More information about Inline Requires is available in the [Performance documentation](/docs/ram-bundles-inline-requires#inline-requires).
+
+## View Hermes traces with Chrome
+
+Over the last year Facebook has sponsored the [Major League Hacking fellowship](https://fellowship.mlh.io/), supporting contributions to React Native. [Jessie Nguyen](https://twitter.com/jessie_anh_ng) and [Saphal Patro](https://twitter.com/saphalinsaan) added the ability to use the Performance tab on Chrome Devtools to visualize the execution of your application when it is using Hermes.
+
+For more information, check out the [new documentation page](/docs/profile-hermes#record-a-hermes-sampling-profile).
+
+## Hermes with Proxy Support
+
+We have added Proxy support to Hermes, enabling compatibility with popular community projects like react-native-firebase and mobx. If you have been using these packages you can now migrate to Hermes for your project.
+
+We plan to make Hermes the default JavaScript engine for Android in a coming release so we are working to resolve the remaining issues people have when using Hermes. Please open an issue on the [Hermes GitHub repo](https://github.com/facebook/hermes) if there are remaining issues holding back your app from adopting Hermes.
+
+## React 17
+
+React 17 does not include new developer-facing features or major breaking changes. For React Native applications, the main change is a [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) enabling files to no longer need to import React to be able to use JSX.
+
+More information about React 17 is available [on the React blog](https://reactjs.org/blog/2020/10/20/react-v17.html).
+
+## Major Dependency Version Changes
+
+- Dropped Android API levels 16-20. The Facebook app consistently drops support for Android versions with sufficiently low usage. As the Facebook app no longer supports these versions and is React Native’s main testing surface, React Native is dropping support as well.
+- Xcode 12 and CocoaPods 1.10 are required
+- Minimum Node support bumped from 10 to Node 12
+- Flipper bumped to 0.75.1
+
+## Thanks
+
+Thank you to the hundreds of contributors that helped make 0.64 possible! The [0.64 changelog](https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0640) includes all of the changes included in this release.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -123,7 +123,14 @@ module.exports = {
     prism: {
       defaultLanguage: 'jsx',
       theme: require('./core/PrismTheme'),
-      additionalLanguages: ['java', 'kotlin', 'objectivec', 'swift', 'groovy'],
+      additionalLanguages: [
+        'java',
+        'kotlin',
+        'objectivec',
+        'swift',
+        'groovy',
+        'ruby',
+      ],
     },
     navbar: {
       title: 'React Native',

diff --git a/website/package.json b/website/package.json
@@ -16,6 +16,7 @@
     "deploy": "docusaurus deploy",
     "serve": "docusaurus serve",
     "clean": "docusaurus clean",
+    "version:cut": "docusaurus docs:version",
     "publish-gh-pages": "yarn deploy",
     "ci-check": "yarn prettier:diff && node image-check.js",
     "format:source": "prettier --write {{core,src}/**/*.js,*.js}",

diff --git a/website/versioned_docs/version-0.60/listview.md b/website/versioned_docs/version-0.60/listview.md
@@ -5,7 +5,7 @@ title: ListView
 
 DEPRECATED - use one of the new list components, such as [`FlatList`](flatlist.md) or [`SectionList`](sectionlist.md) for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this [blog post](/blog/2017/03/13/better-list-views) for more details.
 
-ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
+ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/0.60/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
 
 Minimal example:
 

diff --git a/website/versioned_docs/version-0.61/listview.md b/website/versioned_docs/version-0.61/listview.md
@@ -5,7 +5,7 @@ title: ListView
 
 DEPRECATED - use one of the new list components, such as [`FlatList`](flatlist.md) or [`SectionList`](sectionlist.md) for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this [blog post](/blog/2017/03/13/better-list-views) for more details.
 
-ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
+ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/0.61/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
 
 Minimal example:
 

diff --git a/website/versioned_docs/version-0.62/listview.md b/website/versioned_docs/version-0.62/listview.md
@@ -5,7 +5,7 @@ title: ListView
 
 DEPRECATED - use one of the new list components, such as [`FlatList`](flatlist.md) or [`SectionList`](sectionlist.md) for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this [blog post](/blog/2017/03/13/better-list-views) for more details.
 
-ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
+ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/0.62/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
 
 Minimal example:
 

diff --git a/website/versioned_docs/version-0.63/listview.md b/website/versioned_docs/version-0.63/listview.md
@@ -5,7 +5,7 @@ title: ListView
 
 DEPRECATED - use one of the new list components, such as [`FlatList`](flatlist.md) or [`SectionList`](sectionlist.md) for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this [blog post](/blog/2017/03/13/better-list-views) for more details.
 
-ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
+ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/0.63/listviewdatasource), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component.
 
 Minimal example: