Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
blank_issues_enabled: false
contact_links:
- name: ⚛️ React Native Issue
url: https://github.com/facebook/react-native/issues
url: https://github.com/react/react-native/issues
about: Please report bugs or issues in the React Native repository.
- name: ⤴️ Upgrade Issue
url: https://github.com/react-native-community/upgrade-support
Expand Down
2 changes: 1 addition & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ Thank you for the PR! Contributors like you keep React Native awesome!

Please see the Contribution Guide for guidelines:

https://github.com/facebook/react-native-website/blob/master/CONTRIBUTING.md
https://github.com/react/react-native-website/blob/master/CONTRIBUTING.md

If your PR references an existing issue, please add the issue number below:

Expand Down
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Contributing to React Native website

Thank you for your interest in contributing to the React Native website! From commenting on and triaging issues, to reviewing and sending Pull Requests, all contributions are welcome. We aim to build a vibrant and inclusive [ecosystem of partners, core contributors, and community](https://github.com/facebook/react-native/blob/main/ECOSYSTEM.md) that goes beyond the main React Native GitHub repository.
Thank you for your interest in contributing to the React Native website! From commenting on and triaging issues, to reviewing and sending Pull Requests, all contributions are welcome. We aim to build a vibrant and inclusive [ecosystem of partners, core contributors, and community](https://github.com/react/react-native/blob/main/ECOSYSTEM.md) that goes beyond the main React Native GitHub repository.

The [Open Source Guides](https://opensource.guide/) website has a collection of resources for individuals, communities, and companies who want to learn how to run and contribute to an open source project. Contributors and people new to open source alike will find the following guides especially useful:

Expand All @@ -9,10 +9,10 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of

## Code of Conduct

As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react-native-website/blob/main/CODE_OF_CONDUCT.md).
As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/react/react-native-website/blob/main/CODE_OF_CONDUCT.md).

## Ways to Contribute

Please see our [Contributing Guide](https://reactnative.dev/contributing/overview) on the React Native website.

If you are interested specifically in contributing to the React Native website check out [Contributing section](https://github.com/facebook/react-native-website#-contributing) in the React Native website repository README file.
If you are interested specifically in contributing to the React Native website check out [Contributing section](https://github.com/react/react-native-website#-contributing) in the React Native website repository README file.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

This repo contains the website configuration and documentation powering the [React Native website](https://reactnative.dev/).

> If you are looking for the source code of the [React Native Archive website](https://archive.reactnative.dev/) select the [`archive`](https://github.com/facebook/react-native-website/tree/archive) branch.
> If you are looking for the source code of the [React Native Archive website](https://archive.reactnative.dev/) select the [`archive`](https://github.com/react/react-native-website/tree/archive) branch.

## Contents

Expand Down Expand Up @@ -175,7 +175,7 @@ If possible, test any visual changes in all latest versions of the following bro
1. `git add -A && git commit -m "My message"` to stage and commit your changes.
> replace `My message` with a commit message, such as `Fixed header logo on Android`
1. `git push my-fork-name the-name-of-my-branch`
1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
1. Go to the [react-native-website repo](https://github.com/react/react-native-website) and you should see recently pushed branches.
1. Follow GitHub's instructions.
1. Describe briefly your changes (in case of visual changes, please include screenshots).

Expand Down
8 changes: 4 additions & 4 deletions docs/animations.md
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ The native driver also works with `Animated.event`. This is especially useful fo
</Animated.ScrollView>
```

You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
You can see the native driver in action by running the [RNTester app](https://github.com/react/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/react/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.

#### Caveats

Expand Down Expand Up @@ -585,8 +585,8 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the

The RNTester app has various examples of `Animated` in use:

- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
- [AnimatedGratuitousApp](https://github.com/react/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
- [NativeAnimationsExample](https://github.com/react/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)

## `LayoutAnimation` API

Expand Down Expand Up @@ -664,7 +664,7 @@ const styles = StyleSheet.create({
});
```

This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/react/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.

## Additional notes

Expand Down
4 changes: 2 additions & 2 deletions docs/build-speed.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ $ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64

This can be useful if you wish to build your Android App on a CI and use a matrix to parallelize the build of the different architectures.

If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top-level folder](https://github.com/facebook/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:
If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top-level folder](https://github.com/react/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:

```
# Use this property to specify which architecture you want to build.
Expand Down Expand Up @@ -153,7 +153,7 @@ Open `ios/Podfile` in your editor and uncomment the `ccache_enabled` line.

```ruby
post_install do |installer|
# https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
# https://github.com/react/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
react_native_post_install(
installer,
config[:reactNativePath],
Expand Down
2 changes: 1 addition & 1 deletion docs/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

If this button doesn't look right for your app, you can build your own button using [Pressable](pressable). For inspiration, look at the [source code for the Button component](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Button.js).
If this button doesn't look right for your app, you can build your own button using [Pressable](pressable). For inspiration, look at the [source code for the Button component](https://github.com/react/react-native/blob/main/packages/react-native/Libraries/Components/Button.js).

```tsx
<Button
Expand Down
4 changes: 2 additions & 2 deletions docs/communication-ios.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ rootView.appProperties = @{@"images" : imageList};
It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.

:::note
Currently, there is a known issue where setting appProperties during the bridge startup, the change can be lost. See https://github.com/facebook/react-native/issues/20115 for more information.
Currently, there is a known issue where setting appProperties during the bridge startup, the change can be lost. See https://github.com/react/react-native/issues/20115 for more information.
:::

There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
Expand Down Expand Up @@ -188,7 +188,7 @@ Let's look at an example.

In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.

You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.mm).
You can checkout full source code of the example [here](https://github.com/react/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.mm).

It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known.

Expand Down
2 changes: 1 addition & 1 deletion docs/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ LogBox.ignoreLogs([

:::note

LogBox will treat certain errors from React as warnings, which will mean they don't display as an in-app error notification. Advanced users can change this behaviour by customising LogBox's warning filter using [`LogBoxData.setWarningFilter()`](https://github.com/facebook/react-native/blob/d334f4d77eea538dff87fdcf2ebc090246cfdbb0/packages/react-native/Libraries/LogBox/Data/LogBoxData.js#L338).
LogBox will treat certain errors from React as warnings, which will mean they don't display as an in-app error notification. Advanced users can change this behaviour by customising LogBox's warning filter using [`LogBoxData.setWarningFilter()`](https://github.com/react/react-native/blob/d334f4d77eea538dff87fdcf2ebc090246cfdbb0/packages/react-native/Libraries/LogBox/Data/LogBoxData.js#L338).

:::

Expand Down
4 changes: 2 additions & 2 deletions docs/flatlist.md
Original file line number Diff line number Diff line change
Expand Up @@ -660,7 +660,7 @@ When `true`, offscreen child views are removed from their native backing supervi

### `viewabilityConfig`

See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
See [`ViewabilityHelper.js`](https://github.com/react/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.

| Type |
| ----------------- |
Expand All @@ -675,7 +675,7 @@ See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/
| itemVisiblePercentThreshold | number |
| waitForInteraction | boolean |

At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/react/react-native/issues/17408)):

```
Error: Changing viewabilityConfig on the fly is not supported
Expand Down
2 changes: 1 addition & 1 deletion docs/handling-touches.md
Original file line number Diff line number Diff line change
Expand Up @@ -176,4 +176,4 @@ Gestures commonly used on devices with touchable screens include swipes and pans

## Known issues

- [react-native#29308](https://github.com/facebook/react-native/issues/29308#issuecomment-792864162): The touch area never extends past the parent view bounds and on Android negative margin is not supported.
- [react-native#29308](https://github.com/react/react-native/issues/29308#issuecomment-792864162): The touch area never extends past the parent view bounds and on Android negative margin is not supported.
2 changes: 1 addition & 1 deletion docs/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ dependencies {
```

:::note
The version listed above may not be updated in time. Please check [`packages/react-native/gradle/libs.versions.toml`](https://github.com/facebook/react-native/blob/main/packages/react-native/gradle/libs.versions.toml) in the main repo to see which fresco version is being used in a specific tagged version.
The version listed above may not be updated in time. Please check [`packages/react-native/gradle/libs.versions.toml`](https://github.com/react/react-native/blob/main/packages/react-native/gradle/libs.versions.toml) in the main repo to see which fresco version is being used in a specific tagged version.
:::

---
Expand Down
2 changes: 1 addition & 1 deletion docs/imagebackground.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Use a [`View`](view.md) with an absolutely positioned [`Image`](image.md) instea

A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `<ImageBackground>` component, which has the same props as `<Image>`, and add whatever children to it you would like to layer on top of it.

You might not want to use `<ImageBackground>` in some cases, since the implementation is basic. Refer to `<ImageBackground>`'s [source code](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.
You might not want to use `<ImageBackground>` in some cases, since the implementation is basic. Refer to `<ImageBackground>`'s [source code](https://github.com/react/react-native/blob/main/packages/react-native/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.

Note that you must specify some width and height style attributes.

Expand Down
6 changes: 3 additions & 3 deletions docs/inputaccessoryview.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const styles = StyleSheet.create({
export default App;
```

This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/react/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).

---

Expand Down Expand Up @@ -98,5 +98,5 @@ An ID which is used to associate this `InputAccessoryView` to specified TextInpu

# Known issues

- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
- [react-native#18997](https://github.com/react/react-native/issues/18997): Doesn't support multiline `TextInput`
- [react-native#20157](https://github.com/react/react-native/issues/20157): Can't use with a bottom tab bar
2 changes: 1 addition & 1 deletion docs/javascript-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Syntax transformers make writing code more enjoyable by allowing you to use new

React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.

A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/react/react-native/tree/main/packages/react-native-babel-preset).

<table>
<thead>
Expand Down
2 changes: 1 addition & 1 deletion docs/layout-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,7 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-di

`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).

Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/react/react-native/releases/tag/v0.28.0).

See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.

Expand Down
4 changes: 2 additions & 2 deletions docs/legacy/direct-manipulation.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Before you use it, try to solve your problem with `setState` and [`shouldCompone

## setNativeProps with TouchableOpacity

[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
[TouchableOpacity](https://github.com/react/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:

```tsx
const viewRef = useRef<View>();
Expand Down Expand Up @@ -57,7 +57,7 @@ return (

This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.

If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/react/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/react/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).

## Composite components and setNativeProps

Expand Down
Loading
Loading