Skip to content

Commit

Permalink
Merge pull request #861 from facebook/main
Browse files Browse the repository at this point in the history
0.75
  • Loading branch information
sunnylqm authored Aug 15, 2024
2 parents c739b85 + 69d2a37 commit 6451f66
Show file tree
Hide file tree
Showing 18 changed files with 606 additions and 89 deletions.
2 changes: 1 addition & 1 deletion docs/_integration-with-existing-apps-swift.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ The `Podfile` will contain a boilerplate setup that you will tweak for your inte
> The `Podfile` version changes depending on your version of `react-native`. Refer to https://react-native-community.github.io/upgrade-helper/ for the specific version of `Podfile` you should be using.
Ultimately, your `Podfile` should look something similar to this:
[Podfile Template](https://github.com/facebook/react-native/blob/main/packages/react-native/template/ios/Podfile)
[Podfile Template](https://github.com/react-native-community/template/blob/main/template/ios/Podfile)

After you have created your `Podfile`, you are ready to install the React Native pod.

Expand Down
17 changes: 7 additions & 10 deletions docs/stylesheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: stylesheet
title: StyleSheet
---

A StyleSheet is an abstraction similar to CSS StyleSheets
A StyleSheet is an abstraction similar to CSS StyleSheets.

```SnackPlayer name=StyleSheet
import React from 'react';
Expand Down Expand Up @@ -41,7 +41,8 @@ export default App;
Code quality tips:

- By moving styles away from the render function, you're making the code easier to understand.
- Naming the styles is a good way to add meaning to the low level components in the render function.
- Naming the styles is a good way to add meaning to the low level components in the render function, and encourage reuse.
- In most IDEs, using `StyleSheet.create()` will offer static type checking and suggestions to help you write valid styles.

---

Expand Down Expand Up @@ -101,22 +102,20 @@ export default App;
### `create()`

```tsx
static create(styles: Object): Object;
static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextSyle>): Object;
```

Creates a StyleSheet style reference from the given object.
An identity function for creating styles. The main practical benefit of creating styles inside `StyleSheet.create()` is static type checking against native style properties.

---

### `flatten()`

```tsx
static flatten(style: Object[]): Object;
static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextSyle>>): Object;
```
Flattens an array of style objects, into one aggregated style object. Alternatively, this method can be used to lookup IDs, returned by `StyleSheet.register`.

> **NOTE:** Exercise caution as abusing this can tax you in terms of optimizations. IDs enable optimizations through the bridge and memory in general. Referring to style objects directly will deprive you of these optimizations.
Flattens an array of style objects, into one aggregated style object.
```SnackPlayer name=Flatten
import React from 'react';
Expand Down Expand Up @@ -163,8 +162,6 @@ const flattenStyle = StyleSheet.flatten([page.text, typography.header]);
export default App;
```
This method internally uses `StyleSheetRegistry.getStyleByID(style)` to resolve style objects represented by IDs. Thus, an array of style objects (instances of `StyleSheet.create()`), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use.

---
### `setStyleAttributePreprocessor()`
Expand Down
7 changes: 4 additions & 3 deletions docs/the-new-architecture/landing-page.md
Original file line number Diff line number Diff line change
Expand Up @@ -215,13 +215,14 @@ You can follow along and contribute in our dedicated [discussions & proposals](h
## Should I use the New Architecture today?
Today, the New Architecture is considered experimental and we continue to refine backwards compatibility for a better adoption experience.
At [React Conf 2024](https://youtu.be/Q5SMmKb7qVI?feature=shared&t=1219), we announced that the React Native [New Architecture is now in Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189).
The team plans to enable the New Architecture by default in an upcoming React Native release by the end of 2024.
We believe that the New Architecture is very close to be used in production.
Our guidance is as follows
Our guidance is as follows:
- For most production apps, we do _not_ recommend enabling the New Architecture today. Waiting for the official release will offer the best experience.
- However, we do advise for you to plan for the migration and to start trying it out.
- If you maintain a React Native library, we recommend enabling it and verifying your use cases are covered. You can find the [instructions here](https://github.com/reactwg/react-native-new-architecture#guides).
### Enable the New Architecture
Expand Down
20 changes: 1 addition & 19 deletions docs/upgrading.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ You first need to select from and to which version you wish to upgrade, by defau

💡 Major updates will show an "useful content" section on the top with links to help you out when upgrading.

:::tip
Or you can run the `npx react-native upgrade`, which will automatically check your current version and the latest version available and will show you the link to the Upgrade Helper page with the versions already selected.
:::

### 2. Upgrade dependencies

The first file that is shown is the `package.json`, it's good to update the dependencies that are showing in there. For example, if `react-native` and `react` appears as changes then you can install it in your project by running following commands:
Expand Down Expand Up @@ -52,21 +48,7 @@ yarn add react@{{REACT_VERSION}}

### 3. Upgrade your project files

The new release may contain updates to other files that are generated when you run `npx react-native init`, those files are listed after the `package.json` in the Upgrade Helper page. If there aren't other changes then you only need to rebuild the project to continue developing.

In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running:

```shell
npx react-native upgrade
```

This will check your files against the latest template and perform the following:

- If there is a new file in the template, it is created.
- If a file in the template is identical to your file, it is skipped.
- If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.

> Some upgrades won't be done automatically with the React Native CLI and require manual work, e.g. `0.28` to `0.29`, or `0.56` to `0.57`. Make sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require.
The new release may contain updates to other files that are generated when you run `npx react-native init`, those files are listed after the `package.json` in the [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) page. If there aren't other changes then you only need to rebuild the project to continue developing. In case there are changes you need to manually apply them into your project.

### Troubleshooting

Expand Down
6 changes: 0 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,8 @@
"yarn-deduplicate": "^5.0.0"
},
"resolutions": {
"axios": "^1.6.2",
"trim": "^1.0.1",
"update-notifier": "^6.0.2",
"@sideway/formula": ">=3.0.1"
},
"comments": {
"resolutions": {
"axios": "Removable after Docusaurus commit with https://github.com/facebook/docusaurus/pull/9547"
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
---
title: 'Use a framework to build React Native apps'
authors: [cortinico]
tags: [announcement]
date: 2024-06-25
---

At [React Conf](https://www.youtube.com/live/0ckOUBiuxVY?si=pU4qP4eB5iWfY0IG&t=2320), we updated our guidance on the best tool to get started building React Native apps: a **React Native framework** - a toolbox with all the necessary APIs to let you build production-ready apps.

Using React Native frameworks, such as Expo, is now the **recommended** approach to create new apps.

In this blogpost we want to walk you through what they are in detail and what they mean for you as a React Native developer starting a new project.

<!-- truncate -->

## What is a React Native framework?

If you’ve been building production apps, you probably know that there is a set of common problems you will need to solve sooner or later.

When building any application on either web or native, you probably want your users to navigate through different screens, fetch data, and store the state of your user. But for native apps there is even more to deal with: you need tools to upgrade your native code between React Native versions, manage compatible versions of all of your dependencies, and deal with native build tools.

It takes a village to bring an app from idea to production without the right tools.

We want you to focus on writing beautiful applications and features for your users, and not solving those common problems over and over.

That’s why we believe that the best way for you to experience React Native is through a framework that offers a toolbox with all the necessary tools you need to build production-ready applications.

We’ve found that **you’re either using a framework or you’re building your own framework**.

There is nothing wrong with building your own framework, by crafting your own solutions for routing, navigation, deploying, and so on. Major corporations like Meta and Microsoft build their own frameworks internally to integrate deeply into their brownfield apps. But we believe that most people will be better off by using an existing framework.

If you’ve been using React on web, you’re probably familiar with a similar concept of [production-grade React frameworks](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks).

As of today, the only recommended community framework for React Native is [Expo](https://docs.expo.dev/). Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class.

:::note

Expo, the framework, is and will remain free and open source, while Expo Application Services (EAS) is an optional paid service.

:::

<!--alex ignore he-she retext-equality-->

If you haven’t used Expo recently, make sure you don’t miss [this talk from Kadi @ Expo](https://www.youtube.com/live/0ckOUBiuxVY?si=N-WSfmAJSMfd6wDL&t=3888) where she’s showcasing what you can do with Expo in 2024.

We’ve also updated the [Getting Started page](https://reactnative.dev/docs/environment-setup) on the website to reflect this recommendation.

## How will frameworks affect you?

If you’re already using a recommended framework such as Expo, you’re already good to go!

If you'd like to migrate your existing app to Expo, you can find instructions on [the official Expo website](https://docs.expo.dev/bare/overview/). Expo offers many benefits, such as an easier way to [upgrade your React Native version](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/), a better developer experience, and much more.

However, if you can't or don't want to migrate to Expo, that's fine too. Using React Native without an official framework will continue to be supported. The tools you’ve been using such as React Native Community CLI, Template and [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) will keep on working as usual.

The `react-native init` command has moved out of core and is now accessible via:

```
npx @react-native-community/cli@latest init
```

and on GitHub at [react-native-community/cli](https://github.com/react-native-community/cli).

If you’re a React Native library developer, we collected a list of recommendations on which APIs to use. [Read more in the RFC](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#what-do-we-recommend-to-react-native-library-developers).

## Further reading

If you’re interested in learning more about the reasoning behind this decision, we invite you to read the [RFC0759: React Native Frameworks](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#what-do-we-recommend-to-react-native-library-developers). This RFC is a result of a multi-month effort involving countless discussions and brainstorming among different partners and players of the React Native ecosystem.

While Expo today is the only recommended framework, the RFC also contains [guidelines](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#becoming-a-react-native-framework) on how to become a recommended framework, as we hope to see more competition and innovation in this space.

Moreover, you should check out the talk [useFrameworks()](https://www.youtube.com/watch?v=lifGTznLBcw) at App.js 2024 where we presented this RFC and the necessary changes in a short format.

We believe that by clarifying the respective responsibilities of React Native Core and the Frameworks, we can foster a healthier ecosystem and drive growth & innovation for React Native.
Loading

0 comments on commit 6451f66

Please sign in to comment.