Commit Graph

20 Commits

Author SHA1 Message Date
Tim Yung 1977dd6596 RN: Sort Pragmas in Headers (#51554)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51554

Sorts pragma directives file headers in React Native.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D75264593

fbshipit-source-id: 9e4b253dd0fc94dc2fc469d7114b93a8aae305f4
2025-05-22 21:18:53 -07:00
Gijs Weterings 25b1883164 Fix xplat/endtoend/jest-e2e/apps/facebook_xplat/ReactNativeCoreE2E/__tests__/Border-transform-e2e.js E2E tests
Summary:
Looks like Jest E2E had significant issues with this test on both android and ios RNTester. I think it's because the view with the testID did not have any contents, which means the accessibility tools have trouble getting the proper context from it. By changing it to a nested view (with some padding to better inspect the borders, since that's what's important in this test) I think we have a better, more stable test case this way

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D72571911

fbshipit-source-id: a85266cf4a1696fdaedcc97ed2a7a05f086d35bd
2025-04-08 07:51:09 -07:00
Joe Vilches a733930017 Add e2e tests for fixed transform cases (#49318)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49318

tsia see previous diffs for fix. Added more tests to box shadow, filter, and borders

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D69416675

fbshipit-source-id: ae1e33750b56c1a4720e04e29fc110f1e11c0b3d
2025-02-11 15:44:59 -08:00
Joe Vilches 1b88c5b429 Fix case when dashed/dotted borders do not work with overflow: hidden (#48414)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48414

Was looking into https://github.com/facebook/react-native/issues/48078 which was brought to my attention due to my recent refactorings of iOS Views, especially around how overflow: hidden works. This bug was not brought on by my changes but seems to be a lingering Fabric bug (iirc this bool was not changed when I refactored things)

Anyway, dotted/dashed borders did not work with overflow: hidden. The reason why is we use core animation borders in this case which is incorrect as CA cannot do these types of borders. So I added a check to make sure that the borders are solid as well if we want to use CA to draw them.

Changelog: [iOS] [Fixed] - Dashed & dotted borders now work with overflow: hidden

Reviewed By: mdvacca

Differential Revision: D67720492

fbshipit-source-id: 5aecc15f2d7cbd71952d78d6972f6fc6b7a93ea8
2025-01-02 14:03:26 -08:00
Joe Vilches defb0bd137 Add more tests for border + child interaction (#46195)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46195

go tests!

Testing
* Symmetrical, transparent border clips to padding box (wrong behavior atm)
* Asymmetrical, transparent border clips to padding box (wrong behavior atm)
* Children render over borders with no clipping (correct behavior atm)

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D61695025

fbshipit-source-id: 01eb69193df4f2d4c71dc7f9bf764a4554777c97
2024-08-30 02:00:19 -07:00
Nick Gerleman cfbd15aff1 Add border clipping examples (#44711)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44711

This adds just the border clipping examples and tests from D57668976

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D57941945

fbshipit-source-id: 2234927cb944710c9d929d1d77087d3d2ecdbca6
2024-05-29 23:32:34 -07:00
Nick Gerleman 91d12d9b99 Revert D57668976: Simplify ReactViewGroup clip to border
Differential Revision:
D57668976

Original commit changeset: 8b8cf956dc86

Original Phabricator Diff: D57668976

fbshipit-source-id: 5147557c1f3561863b1ad9226ca6244ff94cb29c
2024-05-24 11:55:43 -07:00
Nick Gerleman 4294b2446a Simplify ReactViewGroup clip to border (#44646)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44646

We can remove most of the code for clipping children to border radius, and recalculating paths, in ReactViewGroup, and rely on the padding box path/rect already set.

I will move this to something more generic up the stack so other native components can reuse this logic.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D57668976

fbshipit-source-id: 8b8cf956dc8689827bccba5e41751b465fd85eeb
2024-05-24 04:42:27 -07:00
Gijs Weterings 143e31058c Fix xplat/endtoend/jest-e2e/apps/facebook_xplat/ReactNativeCoreE2E/__tests__/Border-corner-radii-elevation-percentages-e2e.js to actually use the right example (#44525)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44525

These examples were added, but their names were duplicated. This caused our internal e2e tests to accidentally target the wrong examples.

Changelog:
[General][Fixed] RNTester examples for border percentages are now properly covered by E2E screenshot tests.

Reviewed By: NickGerleman

Differential Revision: D57207306

fbshipit-source-id: 32ed5cc6b136a8928b11afe8b824c752edcdd9e5
2024-05-10 09:38:34 -07:00
Jorge Cabiedes Acosta 311afc1801 Add E2E tests for border-radius percentages (#44460)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44460

Added missing e2e tests for border-radiusf

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D57062098

fbshipit-source-id: ef84b2f05af5e1139a7af5c67192b23172e2a735
2024-05-09 11:18:27 -07:00
Kevin Gozali f7e99e6978 RNTester: inline BorderExample testIDs for simpler maintenance (#41987)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41987

Previously, the examples allow overriding the testIDs for each inner example from BorderExample.js in RNTester. However, that setup relies on another infra/abstraction to inject the testIDs properly. For simplicity, let's just make them hardcoded using the pattern `border-test-<example-name>`.

Changelog: [Internal]

Reviewed By: NickGerleman, mdvacca

Differential Revision: D52282922

fbshipit-source-id: 8fdc3d799befddbbb9bd8e60c8a904670c035d59
2023-12-20 18:33:13 -08:00
Moti Zilberman d6e0bc714a Enable lint/sort-imports everywhere (#41334)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41334

TSIA.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51025812

fbshipit-source-id: e10d437be775a6b80946483aa96460f34927f870
2023-11-06 12:59:38 -08:00
Luna Wei fc01ab62fd JestE2E: Add border screenshots (#38045)
Summary:
Changelog: [Internal] - Update some RNTester examples to allow for internal snapshot tests

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

From 0.72 border breakage, adding screenshot tests for our border examples in RNTester

Reviewed By: NickGerleman

Differential Revision: D46993114

fbshipit-source-id: b2d569c8a09098271ed74a6a88744ae75e373003
2023-06-29 16:56:49 -07:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Nick Gerleman ffcaef64e4 Fix BorderExample Crash on Out of Tree Platforms (#32120)
Summary:
https://github.com/facebook/react-native/commit/9b4f8e01442356f820e135fae3849063b2b8c92c#diff-ee44452e2deeb3a607e863852bb720518875b88c4e78ea7dc76805488bfb1818 added examples to the border test page using PlatformColor. An iOS specific instance was later conditioned to only iOS in https://github.com/facebook/react-native/commit/f6d0f9deaccdc53114d47b8a69c49fda7cb1f8e1#diff-ee44452e2deeb3a607e863852bb720518875b88c4e78ea7dc76805488bfb1818 but one example remains that has values for Android, and iOS only. This causes a crash on at least RNW, since none of the PlatformColors are valid.

This change addsa a fallback to black for unsupported platforms, and also adds a Windows PlatformColor for kicks (and marginal extra usefuleness).

## Changelog

[Internal] [Fixed] - Fix BorderExample Crash on Out of Tree Platforms

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

Test Plan: Validated on RNTester on Windows.

Reviewed By: yungsters

Differential Revision: D30822765

Pulled By: lunaleaps

fbshipit-source-id: 6b3e65204259205bb2f3c9153a2361d1decebe98
2021-09-10 00:58:03 -07:00
Luna Wei f6d0f9deac Fix BorderExample for DynamicColorIOS
Summary:
Changelog:
[Internal] - Fix border example for RNTester

Reviewed By: charlesbdudley

Differential Revision: D30262957

fbshipit-source-id: 677e7a9346bc2f1dc67ec7cc9ad7e36af34ffa60
2021-08-12 12:05:40 -07:00
Jordan Becker 9b4f8e0144 Feat/dynamic color borders (#31140)
Summary:
Following up my issue https://github.com/facebook/react-native/issues/30377 I decided to have a look myself and contribute.

On iOS, border colors using `PlatformColor` or `DynamicColorIOS` do not update on the fly when the system appearance updates.
When the component mounts, the color is correct for the current appearance, but a component unmout/remount is required in order to see the color changing after a system appearance change.

Fixes https://github.com/facebook/react-native/issues/30377

## 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
-->

[Internal] [Added] - Added `PlatformColor` and `DynamicColorIOS` examples to RNTester

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

Test Plan:
I added 2 border examples, one using `PlatformColor` and the other using `DynamicColorIOS`. I recorded the following before/after videos showing the effect of my changes:

https://user-images.githubusercontent.com/4186230/110828711-9c5dd600-8297-11eb-8bc8-bdc9054b6b44.mov

https://user-images.githubusercontent.com/4186230/110828800-b4cdf080-8297-11eb-9d23-07f69dc3a702.mov

Reviewed By: lunaleaps

Differential Revision: D30073335

Pulled By: charlesbdudley

fbshipit-source-id: 2990a6ed40dd08fc2b1f20e93d6f21ec3d8980da
2021-08-09 17:21:09 -07:00
fabriziobertoglio1987 cb0e1d603a Allows to set individual (left,top,right,bottom) dotted/dashed borders (#29099)
Summary:
This issue:

fixes https://github.com/facebook/react-native/issues/24224 fixes https://github.com/facebook/react-native/issues/28695 fixes https://github.com/facebook/react-native/issues/23651 fixes https://github.com/facebook/react-native/issues/23475  fixes https://github.com/facebook/react-native/issues/22256 fixes https://github.com/facebook/react-native/issues/22226 fixes https://github.com/facebook/react-native/issues/19234 fixes  https://github.com/facebook/react-native/issues/18285  fixes https://github.com/facebook/react-native/issues/17344 fixes https://github.com/facebook/react-native/issues/17343 fixes https://github.com/facebook/react-native/issues/17251 fixes https://github.com/facebook/react-native/issues/12817 fixes https://github.com/facebook/react-native/issues/12403 fixes https://github.com/facebook/react-native/issues/11042 fixes https://github.com/facebook/react-native/issues/9343 fixes https://github.com/facebook/react-native/issues/8236 fixes https://github.com/facebook/react-native/issues/8105 fixes https://github.com/facebook/react-native/issues/7838 fixes https://github.com/facebook/react-native/issues/6721 fixes https://github.com/facebook/react-native/issues/5411 fixes https://github.com/facebook/react-native/issues/3159 fixes https://github.com/facebook/react-native/issues/2335 fixes https://github.com/facebook/react-native/issues/840 fixes https://github.com/facebook/react-native/issues/27133 fixes https://github.com/facebook/react-native/issues/28695

Allows to set individual (left,top,right,bottom) dotted/dashed borders.

If a single border is specified and the borderStyle is dotted or dashed, each border will be drawn with moveTo and lineTo taking in consideration of the border style and thickness.

## 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
-->

[Android] [Fixed] - Quickfix individual border style dotted or dashed rendering as solid

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

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158300-05e05800-aa6c-11ea-96a3-40007b2ca611.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158309-07aa1b80-aa6c-11ea-973b-51e8e68b5808.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158320-0d9ffc80-aa6c-11ea-9d7f-dfba49fbfe41.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158334-11cc1a00-aa6c-11ea-8422-cd5b9384f391.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158556-4c35b700-aa6c-11ea-9a4d-eea791b3813a.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158574-51930180-aa6c-11ea-8e84-526cfb168f49.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158586-55268880-aa6c-11ea-9540-51d79a8e4cb0.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158601-5952a600-aa6c-11ea-82e7-85d54b858f1a.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158638-62dc0e00-aa6c-11ea-8765-ecba0d9d126f.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158652-67a0c200-aa6c-11ea-8336-e6eb8aa52e96.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158690-738c8400-aa6c-11ea-9cf1-edec72d27cb7.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158912-b6e6f280-aa6c-11ea-94a7-0ee0db685f38.png"  width="300" height="" /> |

</p>
</details>

Reviewed By: mdvacca

Differential Revision: D28688914

Pulled By: RSNara

fbshipit-source-id: 34781d63265dcf55e30f11c014e6b4a35d67dcbd
2021-08-02 04:06:07 -07:00
Ankit Tiwari 1270873ed6 RNTester UI Redesign (#29685)
Summary:
This Pull request adds the UI changes to the RNTester app as discussed in the MLH Fellowship.

This list is not exhaustive.

- The initial App screen is redesigned.
  - A bottom Navbar has been added.
   - Filter pills are added.
   - The list card UI is updated.

- The example page UI is updated.

- Recently Viewed Sections are added. It shows the last 5 recently viewed components/APIs.

- Bookmarking functionality is added.

- The documentation URL is added to the example page.

- RNTester doesn't lose its state on a hard refresh (even on iOS).

<img width="373" src="https://user-images.githubusercontent.com/22813027/90530113-20346180-e192-11ea-8ef6-789fa25b402b.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530112-20346180-e192-11ea-9539-706b540fcc5f.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530100-1d397100-e192-11ea-8836-b88070643233.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530110-1f9bcb00-e192-11ea-936b-64ee75fa4289.png" />

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

Test Plan:
Imported from GitHub, without a `Test Plan:` line.

{F302717939}

Note: this failed **before** this diff too:

{F302745716}

Reviewed By: mdvacca, cpojer

Differential Revision: D23240434

fbshipit-source-id: 65e2766a6a097eca0e0d0fda8dadf6871e9276c2

Co-authored-by: agarwalmanya <manya18ag@gmail.com>
Co-authored-by: chirag-singhal <csinghal208@gmail.com>
Co-authored-by: Ansh Godha <ag759@cornell.edu>
Co-authored-by: Yash Kumar Verma <yk.verma2000@gmail.com>
Co-authored-by: Sanskar Jethi <sansyrox@gmail.com>
Co-authored-by: Aniketh Saha <anik220798@gmail.com>
Co-authored-by: Xtremilicious <nilarjundas@outlook.com>
Co-authored-by: Jani Evakallio <jani.evakallio@gmail.com>
2020-08-26 08:45:57 -07:00
stealthanthrax 63992c0b96 Migrating RNTester to Packages Directory (#29567)
Summary:
## 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
-->
This PR aims to migrate the RNTester App to `packages` directory. But is currently, open to inspect the CI issues and resolve the merge conflicts.

Currently done
 - Working on iOS
 - Working on Android
 - Detox Tests working on iOS

Need to work on
 - Errors generated by the CI builds

[General] [Changed] - Migrated the RNTester App to the packages directory.

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

Test Plan: It runs on both ios and android for now and the detox iOS builds are working.

Reviewed By: cpojer

Differential Revision: D23034761

Pulled By: rickhanlonii

fbshipit-source-id: e04bb06e1c7ef15d340206090d1575a871b9e6f5
2020-08-19 17:57:08 -07:00