Summary:
If you check the source of truth `packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js` I'll find that `TouchableHighlight` is a result of `React.forwardRef(...)` :
https://github.com/facebook/react-native/blob/44d59ea6f9a1705487314e33de52f7056651ba25/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js#L382-L391
So the TS type isn't correct : (
```tsx
<TouchableHighlight ref={ref => { }} />
// ^^^ ref should be a `View` (but now it's `TouchableHighlight`)
```
---
**Breaking changes**
As `TouchableHighlight` isn't class anymore it can't be used as value & type
```tsx
import {TouchableHighlight} from 'react-native';
const ref = useRef<TouchableHighlight>();
// ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here.
// Did you mean typeof TouchableHighlight?
```
**Recommend solution:** use build-in react type `React.ElementRef`
```diff
-const ref = useRef<TouchableHighlight>();
+const ref = useRef<React.ElementRef<typeof TouchableHighlight>>();
```
Also, it possible to use `View` as type:
```diff
-const ref = useRef<TouchableHighlight>();
+const ref = useRef<View>();
```
## Changelog:
[GENERAL] [BREAKING] - [Typescript] Transform TouchableHighlight from JS class to ForwardRef component
Pull Request resolved: https://github.com/facebook/react-native/pull/44038
Test Plan: See: `packages/react-native/types/__typetests__/index.tsx`
Reviewed By: NickGerleman
Differential Revision: D56015309
Pulled By: dmytrorykun
fbshipit-source-id: fee346536787a5921626ed69a4c01da2b599dc2f
Summary:
If you check the source of truth `packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js` I'll find that `TouchableOpacity` is a result of `React.forwardRef(...)` :
https://github.com/facebook/react-native/blob/f7eaf63881b23216c06ab3c81ea94d0312cd6a7b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js#L326-L335
So the TS type isn't correct : (
```tsx
<TouchableOpacity ref={ref => { }} />
// ^^^ ref should be a `View` (but now it's `TouchableOpacity`)
```
---
**Breaking changes**
As `TouchableOpacity` isn't class anymore it can't be used as value & type
```tsx
import {TouchableOpacity} from 'react-native';
const ref = useRef<TouchableOpacity>();
// ^^^ TS2749: TouchableOpacity refers to a value, but is being used as a type here.
// Did you mean typeof TouchableOpacity?
```
**Recommend solution:** use build-in react type `React.ElementRef`
```diff
-const ref = useRef<TouchableOpacity>();
+const ref = useRef<React.ElementRef<typeof TouchableOpacity>>();
```
Also, it possible to use `View` as type:
```diff
-const ref = useRef<TouchableOpacity>();
+const ref = useRef<View>();
```
## Changelog:
[GENERAL] [BREAKING] - [Typescript] Transform `TouchableOpacity` from JS `class` to `ForwardRef` component
Pull Request resolved: https://github.com/facebook/react-native/pull/44030
Test Plan: See: `packages/react-native/types/__typetests__/index.tsx`
Reviewed By: NickGerleman
Differential Revision: D56017133
Pulled By: dmytrorykun
fbshipit-source-id: 58f4c1a14c9b3bd2407ea6c825a90b355acb16bb
Summary:
`registerCallableModule()` was added from 7f549ec7be but no typescript types there. this pr tries to add the corresponding types.
## Changelog:
[GENERAL] [FIXED] - Add missing `registerCallableModule` TypeScript definitions
Pull Request resolved: https://github.com/facebook/react-native/pull/43366
Test Plan: patch locally and try to `import { registerCallableModule } from 'react-native';` in a 0.74.0-rc.2 project
Reviewed By: fabriziocucci
Differential Revision: D54676151
Pulled By: cortinico
fbshipit-source-id: cd01f2ebe2d2516b458fae5b2e83cba3d3794455
Summary:
`Image.getSize/getSizeWithHeaders` are still working in old fashioned "callback" way
```tsx
Image.getSize(uri, function success(width,height) { }, function failure(){ } ); // undefined
Image.getSizeWithHeaders(uri, headers, function success(width,height) { }, function failure(){ } ); // undefined
```
But in 2024 more developers prefer use async/await syntax for asynchronous operations
So, in this PR I added support for Promise API with **backward compatibility**, modern way:
```tsx
Image.getSize(uri).then(({width,height}) => { }); // Promise
Image.getSizeWithHeaders(uri, headers).then(({width,height}) => { }); // Promise
```
bypass-github-export-checks
## Changelog:
[GENERAL] [ADDED] - `Image.getSize/getSizeWithHeaders` method returns a promise if you don't pass a `success` callback
Pull Request resolved: https://github.com/facebook/react-native/pull/42895
Test Plan:
1. ts: New test cases added in typescript tests
2. runtime: you can create a new project and put code from this PR into the next files
a. `node_modules/react-native/Libraries/Image/Image.android.js`
b. `node_modules/react-native/Libraries/Image/Image.ios.js`
Reviewed By: javache
Differential Revision: D53919431
Pulled By: cipolleschi
fbshipit-source-id: 508b201e17e0ffda2e67aa5292bf9906b88d09c5
Summary:
This pull request addresses two key issues. Firstly, it adds a missing docstring to the `dismissActionSheet` function within the `ActionSheetIOS` object. Secondly, it introduces TypeScript typings for the `dismissActionSheet` function.
## Changelog:
[iOS] [Added] - Add missing docstring to the `dismissActionSheet` function in `ActionSheetIOS`.
[iOS] [Added] - Add TypeScript typings for the `dismissActionSheet` function in `ActionSheetIOS`.
Pull Request resolved: https://github.com/facebook/react-native/pull/40012
Test Plan:
To ensure the code is solid, I followed these steps:
1. Ran Flow to verify that there were no errors.
2. Added a TypeScript test related to the `dismissActionSheet` function to ensure it's typed as expected.
Reviewed By: NickGerleman
Differential Revision: D50097458
Pulled By: arushikesarwani94
fbshipit-source-id: 63348239dfe19e3a07f94e5a7b59ae43a47c1975
Summary:
Previously, when you tried to create some styles using `StyleSheet.create`, you can create styles with invalid styles:
```ts
const styles = StyleSheet.create({
container: {
marginLeft: 1,
magrinRight: 1, // This is a typo, but would not cause typecheck errors
},
});
```
The root cause is that Typescript uses a looser [Excess Property Checks](https://www.typescriptlang.org/docs/handbook/2/objects.html#excess-property-checks) if we're using template types rather than using the actual specific types in the function signature.
- https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/62481
## Changelog:
[INTERNAL] [FIXED] - Make StyleSheet.create better check property keys for typos
Pull Request resolved: https://github.com/facebook/react-native/pull/39225
Test Plan: Added a test in __typeTests__, which should get run by CI.
Reviewed By: rshest
Differential Revision: D48859679
Pulled By: NickGerleman
fbshipit-source-id: 43aa69cf85cd69353d053b782dba73ab2027eb64
Summary:
Removed deprecated function removeSubscription from the type of NativeEventEmitter, so that it lines up with its implementation. This is a fix for https://github.com/facebook/react-native/issues/39111 .
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[General] [Fixed] - Fix a type issue of NativeEventEmitter
Pull Request resolved: https://github.com/facebook/react-native/pull/39115
Test Plan: Not applicable
Reviewed By: NickGerleman
Differential Revision: D48573676
Pulled By: lunaleaps
fbshipit-source-id: e70c951e230e0d236e0bf0a1ba02b450bdc98ac5
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38746
This adds a view prop which controls the layout conformance of it and its transitive children (including non-view ShadowNodes).
The implementation here is to traverse down before layout, updating any context-specific configuration.
Normally at the time of layout, unchanged child ShadowNodes are already sealed. These must be mutated already if layout results change, and we do this today via Yoga node clone callback, where Yoga clones nodes where it will do layout work (but not all of them).
We down-propagate configuration, but can terminate if we observe an already sealed node whose values match those of our current context, since any nodes under must also follow the same contexts (or any nested contexts of the sealed node). This means that calling `layoutTree()` on a mostly clean ShadowTree will cause configuration to not traverse most nodes.
`Errata` and `PointScaleFactor` (DPI) are threaded to each Node's per-node config. The same values are retained when Yoga nodes are cloned (by cloning the ShadowNode). Since these are set before the first layout, config setting should only ever dirty layout [when layout-effecting values change](https://www.internalfb.com/code/fbsource/[1c95e981c740]/xplat/yoga/yoga/YGConfig.cpp?lines=13).
The prop is prefixed with `experimental` because we are likely to make more breaking conformance fixes in the strict mode, and I'm not sure this is the final API yet. I was previously looking at a context-like component which is more challenging to implement.
Changelog: [Internal]
bypass-github-export-checks
Reviewed By: rozele, sammy-SC
Differential Revision: D47940100
fbshipit-source-id: f72e1c73f537e0312c2bba19ae8c2e882c82aced
Summary:
The `Request` interface provided by `types/react-native` doesn't have a `signal` property when it should as this is something that is accessible on the `Request` object.
For example, running the following:
#### Without providing a `signal`
```ts
console.log(new Request('https://www.facebook.com'));
```
will result in the following:
```ts
{"_bodyInit": undefined, "_bodyText": "", "bodyUsed": false, "credentials": "same-origin", "headers": {"map": {}}, "method": "GET", "mode": null, "referrer": null, "signal": {}, "url": "https://www.facebook.com"}
```
## Changelog:
[GENERAL] [FIXED] - Fixed missing property `signal` for the `Request` interface
## Reproduce
1. Add `new Request('https://www.facebook.com').signal` to a typescript file
2. TS will error `Property 'signal' does not exist on type 'Request'`
Pull Request resolved: https://github.com/facebook/react-native/pull/38536
Test Plan:
Adding to `global.d.ts` in a file will resolve the problem, demonstrating that this works.
```ts
interface Request {
readonly signal: AbortSignal | undefined
}
```
Reviewed By: NickGerleman
Differential Revision: D47660506
Pulled By: jacdebug
fbshipit-source-id: ef1459fbaca5d8f31bf8539bd61ac5e447111fec
Summary:
This improves the strictness of TS typings for `transform` on `View`'s `style` prop. Consider the following example, with what TS reports in case of errors, using RN 0.72.3. The ❌ / ✅ symbols indicate whether TS is happy with the code
```tsx
❌ <View style={{ transform: [{ scale: undefined }] }} /> // TS2769: No overload matches this call.
❌ <View style={{ transform: [{ something: 1 }] }} /> // TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { rotate: '90deg' }] }} />
✅ <View style={{ transform: [{ scale: 1, translateX: 1 }] }} /> // this is WRONG, corrected in the next row
✅ <View style={{ transform: [{ scale: 1 }, { translateX: 1 }] }} />
```
With this change, TS will report an error even for line 4
```tsx
❌ <View style={{ transform: [{ scale: undefined }] }} /> // TS2769: No overload matches this call.
❌ <View style={{ transform: [{ something: 1 }] }} /> // TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { rotate: '90deg' }] }} />
❌ <View style={{ transform: [{ scale: 1, translateX: 1 }] }} /> // TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { translateX: 1 }] }} />
```
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
[GENERAL] [CHANGED] - stricter TS check for transform style
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/38348
Test Plan: tested locally with the example given above; also added a TS type test
Reviewed By: rshest
Differential Revision: D47526366
Pulled By: NickGerleman
fbshipit-source-id: 5bd007ce29509ccdfce74c3864dee24290d9a175
Summary:
For the contentType Parameter of the method slice in Class Blob which was fixed for
https://github.com/facebook/react-native/pull/38078
the typescript declaration is missing.
## Changelog:
[GENERAL] [ADDED] - Added contentType parameter to Blob declaration
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/38163
Test Plan: I ran yarn run test-typescript and check with Webstorm and VSCode.
Reviewed By: rshest
Differential Revision: D47228992
Pulled By: javache
fbshipit-source-id: fd767bb47c5e64657bfafba4c84d1d8671857109
Summary:
In Webstorm or VSCode when using Typescript the declaration of the class "File" is missing. So both IDEs show "File" as error. With this change it fixes the issue https://github.com/facebook/react-native/issues/38061 .
## Changelog:
[GENERAL] [FIXED] Fixed missing File declaration in Typescript global.d.ts
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/38165
Test Plan:
I ran
`yarn run test-typescript`
with no error
After that i initialized a new react-native project and installed the react-native library with my local changes of global.d.ts. Webstorm and VSCode now find the declaration of "File" and don't show "File" as error and suggest the right parameters.
Reviewed By: rshest
Differential Revision: D47209461
Pulled By: cortinico
fbshipit-source-id: 0884dfe786ea3a5070aa0a487a8e74463c8f1a0f
Summary:
Changelog: [Internal] - Noticed when I was cutting 0.72 types there was some types not exported and also some duplicate.
I'm not sure why our lint didn't catch this, I can look into that next
bypass-github-export-checks
Reviewed By: NickGerleman
Differential Revision: D45294027
fbshipit-source-id: addf5a5d7af10e3087edaaf660ff99e46932bc3e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36632
Discovered when bumping the RN documentation to typecheck against 0.72, https://github.com/facebook/react-native/pull/36109 removed the `EmitterSubscription` type which should be kept public.
Changelog:
[General][Fixed] - Export EmitterSubscription TypeScript Type
Reviewed By: cortinico
Differential Revision: D44375081
fbshipit-source-id: c8dbd5694d3a728a0a2091210894d27c9d84a012
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36819
X-link: https://github.com/facebook/metro/pull/964
This diff creates a new hook to the Metro symbolicator. `customizeStack` aims to provide a whole stack modification hook on the output of the `/symbolicate` endpoint.
The purpose of this hook is to be able to apply callsite-based modifications to the stack trace. One such example is user-facing frame skipping APIs like FBLogger internally.
Consider the following API:
```
FBLogger('my_project')
.blameToPreviousFile()
.mustfix(
'This error should refer to the callsite of this method',
);
```
In this particular case, we'd want to skip all frames from the top that come from the same source file. To do that, we need knowledge of the entire symbolicated stack, neither a hook before symbolication nor an implementation in `symbolicator.customizeFrame` are sufficient to be able to apply this logic.
This diff creates the new hook, which allows for mutations of the entire symbolicated stack via a `symbolicator.customizeStack` hook. The default implementation of this simply returns the same stack, but it can be wrapped similar to `symbolicator.customizeFrame`.
To actually have information for this hook to act on, I've created the possibility to send additional data to the metro `/symbolicate` endpoint via an `extraData` object. This mirrors the `extraData` from https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/NativeExceptionsManager.js#L33, and I've wired up LogBox to send that object along with the symbolicate call.
Changelog:
[General][Added] - Added customizeStack hook to Metro's `/symbolicate` endpoint to allow custom frame skipping logic on a stack level.
Reviewed By: motiz88
Differential Revision: D44257733
fbshipit-source-id: 05cd57f5917a1e97b0520e772692ce64029fbf8a
D N
Kudo Chien
Alex Zelensky
Lorenzo Pieri
Peter Xu
Yupeng Li
Nick Gerleman
Louie Colgan
Mehdi Mulani
Everaldo Junior
Vojtech Novak
trashcoder
Luna Wei
Gijs Weterings
Ruslan Lesiutin