Commit Graph

18 Commits

Author SHA1 Message Date
gabrieldonadel 597a1ff60b feat: Add logical border block color properties (#35999)
Summary:
This PR implements logical border block color properties as requested on https://github.com/facebook/react-native/issues/34425. This implementation includes the addition of the following style properties

- `borderBlockColor`, equivalent to `borderTopColor` and `borderBottomColor`.
- `borderBlockEndColor`, equivalent to `borderBottomColor`.
- `borderBlockStartColor`, equivalent to `borderTopColor`.

## Changelog

[GENERAL] [ADDED] - Add logical border block color properties

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

Test Plan:
1. Open the RNTester app and navigate to the `View` page
2. Test the new style properties through the `Logical Border Color` section

<table>
<tr>
    <td>Android</td>
    <td>iOS</td>
</tr>
  <tr>
    <td><video src="https://user-images.githubusercontent.com/11707729/215384882-5b96518e-ad70-4157-a7f3-130f488cc41c.mov"  alt="1" width="360px"   />
    </td>
<td>
<video src="https://user-images.githubusercontent.com/11707729/215392728-cfc6a097-26c1-4ffe-ab0e-f0a5a71a902d.mov"2" width="360px"  />
</td>
   </tr>
</table>

Reviewed By: cipolleschi

Differential Revision: D42849911

Pulled By: jacdebug

fbshipit-source-id: 822cff5264689c42031d496105537032b5cd31ef
2023-01-31 10:58:24 -08:00
Gabriel Donadel Dall'Agnol 4ae4984094 feat: Add logical border radius implementation (#35572)
Summary:
This PR implements logical border-radius as requested on https://github.com/facebook/react-native/issues/34425. This implementation includes the addition of the following style properties

- `borderEndEndRadius`, equivalent to `borderBottomEndRadius`.
- `borderEndStartRadius`, equivalent to `borderBottomStartRadius`.
- `borderStartEndRadius`, equivalent to `borderTopEndRadius`.
- `borderStartStartRadius`, equivalent to `borderTopStartRadius`.

## Changelog

[GENERAL] [ADDED] - Add logical border-radius implementation

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

Test Plan:
1. Open the RNTester app and navigate to the `RTLExample` page
2. Test the new style properties through the `Logical Border Radii Start/End` section

https://user-images.githubusercontent.com/11707729/206623732-6d542347-93f9-40da-be97-f7dcd5f66ca9.mov

Reviewed By: necolas

Differential Revision: D42002043

Pulled By: NickGerleman

fbshipit-source-id: a0aa9783c280398b437aeb7a00c6eb3f767657a5
2023-01-06 06:00:03 -08:00
Ruslan Shestopalyuk 7252c66292 Optimize size of an ViewProps instance by reducing enum storage sizes
Summary:
[Changelog][Internal]

The diff changes underlying storage types used by different enums that are used in ViewProps data structure, together with some eventual field rearranging to reduce padding overhead.

This **shaves off 128 bytes** from each `ViewProps` instance, which is **a ~10% improvement**.

Given that an average RN app may have thousands of shadow tree nodes, and correspondingly `ViewProps` instances in flight (e.g. Oculus Store has 2-3K of them nominally), the overall memory win is about **300K+** for this change only. Plus slightly better cache locality, which never a bad thing either.

Reviewed By: mdvacca

Differential Revision: D42372127

fbshipit-source-id: d3a832af2b2e89f50a5b8e04d24d0df92869ea4d
2023-01-05 23:35:56 -08:00
Phillip Pan 9138712934 decouple various files from Geometry.h
Summary:
a lot of files were depending on Geometry even though they didn't use Vector, this will help with future modularity

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D41127194

fbshipit-source-id: 024519c638a1f0df3fdbfbdd937eac84b9adee6e
2022-11-15 08:06:45 -08:00
Luna Wei dfcd9faaad Add support for pointerover and pointerout
Summary: Changelog: [Internal] - Add pointerover, pointerout events

Reviewed By: vincentriemer

Differential Revision: D38559454

fbshipit-source-id: 829b9f2f22e1e41a64dcce80fcc79ab9e6352dcf
2022-08-15 12:51:58 -07:00
Eric Edouard 8993ffc82e Added border curve style prop ("Squircle" effect - iOS only) (#33783)
Summary:
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
NOTE: PR is based on https://github.com/facebook/react-native/pull/32017 which went stale for quite a long time but can now safely be closed

![](https://preview.redd.it/nuvl4746ys471.png?width=960&crop=smart&auto=webp&s=084a517a645364ac246b70b7fa8e0f2470cc7af3)

Since iOS 13+, it is possible to change the corner curve property on iOS in order to smoothen border radius and make it more "rounded" (also called "squircle")
Here's an [article](https://medium.com/arthurofbabylon/a-smooth-corner-radius-in-ios-54b80aa2d372) explaining in details what it is.
This property is also built in figma, but currently there is no way to implement this directly with react-native despite it being available natively on iOS.

Many open source react-native libraries were created in order to simulate this behaviour:
[react-native-super-ellipse-mask](https://github.com/everdrone/react-native-super-ellipse-mask)
[react-native-squircle-view](https://github.com/everdrone/react-native-squircle-view)
[react-native-figma-squircle](https://github.com/tienphaw/react-native-figma-squircle)

But they rely on creating an SVG shape with the smoothed corners and masking the view behind. This makes it not very performant (flickering on mounting was a common side-effect)

This PR aims at implementing the property natively.

PR for the docs update: https://github.com/facebook/react-native-website/pull/2785

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

[iOS] [Added] - Added `borderCurve` style prop for smooth border radius (squircle effect)

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

Test Plan:
We used the RNTester app and added an example with `cornerCurve ` set to `'continuous'` (only on iOS).

As the difference is quite subtle, we also made some more tests to better illustrate the difference (these are not in the RN-tester app):

![IMG_0810](https://user-images.githubusercontent.com/19872411/133893536-26207c53-aade-4583-9eef-7a1739b6907b.PNG)

We overlapped two views with `position: absolute`, the one in the background has a red background and has `cornerRadius` set to `false`, and the one in the foreground is set to `true`. We can clearly see where the borders differs on the corners.

Reviewed By: sammy-SC

Differential Revision: D37883631

Pulled By: cipolleschi

fbshipit-source-id: 09f06de9628fa326323eba63875de30102c4a59e
2022-07-21 04:11:30 -07:00
Luna Wei 8be49e8746 PointerEvents: Remove '2' suffix
Summary: Changelog: [Internal] - We can now remove the '2' suffix as we had an internal implementation that was not truly aligned with W3C pointers but used the same name. We have aligned the internal types to match w3c so we can now remove the suffix that differentiates them.

Reviewed By: vincentriemer

Differential Revision: D37545813

fbshipit-source-id: 6f2336ae9e314066c340161113268c1f28621a71
2022-07-05 20:00:42 -07:00
Vincent Riemer 21a4c1f6d6 Add dispatch of pointerover/pointerout events
Summary: Changelog: [iOS][Internal] - Add dispatching of pointerover/pointerout events

Reviewed By: lunaleaps

Differential Revision: D36718156

fbshipit-source-id: c2fee2332ac52e617db938e321e3b38fd5c35ad3
2022-06-07 16:08:50 -07:00
Luna Wei 471907c047 PointerEvents: Mark when listened to for touch interactions
Summary: Changelog: [Internal] - Bypass dispatching an event if no view along the hierarchy is listening to it. Only applied for touch-based interactions. Next change will add optimization for mouse interactions

Reviewed By: vincentriemer

Differential Revision: D35739417

fbshipit-source-id: 134ffefef3bb4f97bf3e63b6bccc0caca464dfbd
2022-05-23 16:29:52 -07:00
Vincent Riemer 87d2a8d06e Only fire pointerEnter/Leave events if a view in the event path is listening to that event
Summary: Changelog: [iOS][Internal] - Only fire pointerEnter/Leave events if a view in the event path is listening to that event

Reviewed By: yungsters

Differential Revision: D35911045

fbshipit-source-id: 8b3021619622c3e83c15acea46c23bfe3e0f9284
2022-05-10 15:43:28 -07:00
Samuel Susla a159416333 Use std::optional instead of butter::optional
Summary: changelog: Use std::optional instead of butter::optional

Reviewed By: fkgozali

Differential Revision: D33352680

fbshipit-source-id: 45a53fec181a6ffb6218909bc23348f7c9f21ec4
2022-03-04 07:25:59 -08:00
Andrei Shikov 733f228506 Diff C++ props for Android consumption
Summary:
Creates a mapbuffer from two ViewProp objects. This MapBuffer is used later instead of bag of props from JS to set the properties with platform ViewManager.

Changelog: [Internal] - Added MapBuffer diffing for ViewProps

Reviewed By: mdvacca

Differential Revision: D33735246

fbshipit-source-id: 10ad46251ea71aa844586624c888f5223fa44e57
2022-02-22 08:23:40 -08:00
Andrei Shikov da72b5d02c Add accessibility and view props required for Android to C++ layer
Summary:
Parses a set of props previously missing from C++ representation (they weren't required for iOS and core processing before).

Changelog: [Internal] - Added missing fields for Android to C++ view props

Reviewed By: sammy-SC

Differential Revision: D33797489

fbshipit-source-id: 1625baa0c1a592fcef409a5f206496dff0368912
2022-02-22 08:23:40 -08:00
Andrei Shikov 980c52de41 Disable view flattening when the view has event handlers on Android
Summary:
The views with touch event props are currently flattened by Fabric core, as we don't take event listeners into account when calculating whether the view should be flattened. This results in a confusing situation when components with touch event listeners (e.g. `<View onTouchStart={() => {}} /> `) or ones using `PanResponder` are either ignored (iOS) or cause a crash (Android).

This change passes touch event props to C++ layer and uses them to calculate whether the view node should be flattened or not. It also refactors events to be kept as a singular bitset with 32 bit (~`uint32_t`).

Changelog: [Changed][General] Avoid flattening nodes with event props

Reviewed By: sammy-SC

Differential Revision: D34005536

fbshipit-source-id: 96255b389a7bfff4aa208a96fd0c173d9edf1512
2022-02-10 06:07:39 -08: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
Kevin Gozali fb39d45ed5 C++ - better => butter
Summary:
Renaming the `better` utilities to `butter`:
- to prevent claims that this library is superior to others - it really depends on use cases
- to indicate ease of use throughout the codebase, easily spread like butter

Changelog: [C++][Changed] Renaming C++ better util to butter, used by Fabric internals

Reviewed By: JoshuaGross

Differential Revision: D33242764

fbshipit-source-id: 26dc95d9597c61ce8e66708e44ed545e0fc5cff5
2021-12-20 22:25:14 -08:00
Andrew Coates 4d87d8c6b2 Fix various c++ warnings (#31399)
Summary:
react-native-windows runs with a more strict set of warnings as errors.  This fixes a bunch of warnings being hit while compiling core react-native code as part of react-native-windows.  In particular warnings about mismatched signed/unsigned comparisons, lossy conversions, and variable names that conflict with names in outer scopes (yoga has a global for `leading` and `trailing` that conflicts with some local variable names)

## Changelog

[Internal] [Fixed] - Fix various C++ warnings

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

Test Plan: I've run these changes in react-native-windows. -- Shouldn't have any functionality difference.

Reviewed By: sammy-SC

Differential Revision: D28290188

Pulled By: rozele

fbshipit-source-id: 2f7cf87f58d73a3f43510ac888dbcb9ab177d134
2021-05-12 12:35:33 -07:00
David Vacca 3093010ea5 move fabric to ReactCommon/react/renderer
Summary:
This diff moves fabric C++ code from ReactCommon/fabric to ReactCommon/react/renderer
As part of this diff I also refactored components, codegen and callsites on CatalystApp, FB4A and venice

Script: P137350694

changelog: [internal] internal refactor

Reviewed By: fkgozali

Differential Revision: D22852139

fbshipit-source-id: f85310ba858b6afd81abfd9cbe6d70b28eca7415
2020-07-31 13:34:29 -07:00