Commit Graph

4 Commits

Author SHA1 Message Date
Rubén Norte 249b8d21c4 Fix inline requires for ESM in react-native-github
Summary:
This fixes how ES modules are handled in Jest tests in the react-native codebase.

They caused some problems before because `import` statements weren't inlined as `require` calls were, so there were some errors in tests when migrating from CommonJS to ESM.

This changes the transform that Jest uses to inline import statements the same way, so we can migrate everything without issues in tests.

Changelog: [Internal]

Reviewed By: kacieb

Differential Revision: D28899692

fbshipit-source-id: 027690f57ca3b5613c261a1089c0635af76662b2
2021-06-04 13:05:11 -07:00
Vladislav Shabanov 6e36d046a3 Fix ScrollView getInnerViewNode and getInnerViewRef ref methods (#30588)
Summary:
Currently ScrollView ref's `getInnerViewNode` and `getInnerViewRef` are unbound and don't work as expected returning empty values. The origin of this problem probably is issued by https://github.com/facebook/react-native/commit/d2f314af75b63443db23e131aaf93c2d064e4f44

Working example of the problem is available here: https://github.com/vshab/RNGetInnerViewBug

This PR binds getInnerViewNode and getInnerViewRef to ScrollView and adds test checking the value of getInnerViewRef.

Before:
![Simulator Screen Shot - iPhone 11 - 2020-12-15 at 02 07 03](https://user-images.githubusercontent.com/6755908/102149544-c7df4900-3e7f-11eb-89de-de39a28fbdb3.png)
After:
![Simulator Screen Shot - iPhone 11 - 2020-12-15 at 01 49 31](https://user-images.githubusercontent.com/6755908/102149559-d168b100-3e7f-11eb-8b27-031c9e43112c.png)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[JavaScript] [Fixed] - ScrollView: Fix `getInnerViewNode` and `getInnerViewRef` ref methods

Pull Request resolved: https://github.com/facebook/react-native/pull/30588

Test Plan:
1. The test checking the value of getInnerViewRef is added.
2. Example app demonstrating the problem is provided with before/after screenshots.

Reviewed By: TheSavior, nadiia

Differential Revision: D25916413

Pulled By: kacieb

fbshipit-source-id: bf18079682be7c647b8715bd0f36cf84953abcfa
2021-01-14 14:45:55 -08:00
Kacie Bawiec d2f314af75 Make ScrollView use ForwardRef
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.

Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />

const innerViewRef = myRef.current.getNativeScrollRef();

innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />

// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();

// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```

Changes:

* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).

Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests

Changelog:
[General] [Changed] - Make ScrollView use forwardRef

Reviewed By: TheSavior

Differential Revision: D19304480

fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
2020-03-26 16:53:46 -07:00
Kacie Bawiec aebeb3b0a9 Add Snapshot Rendering Test to ScrollView
Summary:
As title.

Changelog: [Added] Add snapshot rendering test to ScrollView

Reviewed By: zackargyle, TheSavior

Differential Revision: D20037673

fbshipit-source-id: 4270bc63a6065789f072893756468b67deae169d
2020-02-24 14:48:40 -08:00