mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Eric Edouard
8993ffc82e
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  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):  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
112 lines
2.6 KiB
C++
112 lines
2.6 KiB
C++
/*
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#pragma once
|
|
|
|
#include <react/renderer/components/view/AccessibilityProps.h>
|
|
#include <react/renderer/components/view/YogaStylableProps.h>
|
|
#include <react/renderer/components/view/primitives.h>
|
|
#include <react/renderer/core/LayoutMetrics.h>
|
|
#include <react/renderer/core/Props.h>
|
|
#include <react/renderer/core/PropsParserContext.h>
|
|
#include <react/renderer/graphics/Color.h>
|
|
#include <react/renderer/graphics/Geometry.h>
|
|
#include <react/renderer/graphics/Transform.h>
|
|
|
|
#include <optional>
|
|
|
|
namespace facebook {
|
|
namespace react {
|
|
|
|
class ViewProps;
|
|
|
|
using SharedViewProps = std::shared_ptr<ViewProps const>;
|
|
|
|
class ViewProps : public YogaStylableProps, public AccessibilityProps {
|
|
public:
|
|
ViewProps() = default;
|
|
ViewProps(
|
|
const PropsParserContext &context,
|
|
ViewProps const &sourceProps,
|
|
RawProps const &rawProps,
|
|
bool shouldSetRawProps = true);
|
|
|
|
void setProp(
|
|
const PropsParserContext &context,
|
|
RawPropsPropNameHash hash,
|
|
const char *propName,
|
|
RawValue const &value);
|
|
|
|
#pragma mark - Props
|
|
|
|
// Color
|
|
Float opacity{1.0};
|
|
SharedColor foregroundColor{};
|
|
SharedColor backgroundColor{};
|
|
|
|
// Borders
|
|
CascadedBorderRadii borderRadii{};
|
|
CascadedBorderColors borderColors{};
|
|
CascadedBorderCurves borderCurves{};
|
|
CascadedBorderStyles borderStyles{};
|
|
|
|
// Shadow
|
|
SharedColor shadowColor{};
|
|
Size shadowOffset{0, -3};
|
|
Float shadowOpacity{};
|
|
Float shadowRadius{3};
|
|
|
|
// Transform
|
|
Transform transform{};
|
|
BackfaceVisibility backfaceVisibility{};
|
|
bool shouldRasterize{};
|
|
std::optional<int> zIndex{};
|
|
|
|
// Events
|
|
PointerEventsMode pointerEvents{};
|
|
EdgeInsets hitSlop{};
|
|
bool onLayout{};
|
|
|
|
ViewEvents events{};
|
|
|
|
bool collapsable{true};
|
|
|
|
bool removeClippedSubviews{false};
|
|
|
|
Float elevation{}; /* Android-only */
|
|
|
|
#ifdef ANDROID
|
|
|
|
std::optional<NativeDrawable> nativeBackground{};
|
|
std::optional<NativeDrawable> nativeForeground{};
|
|
|
|
bool focusable{false};
|
|
bool hasTVPreferredFocus{false};
|
|
bool needsOffscreenAlphaCompositing{false};
|
|
bool renderToHardwareTextureAndroid{false};
|
|
|
|
#endif
|
|
|
|
#pragma mark - Convenience Methods
|
|
|
|
BorderMetrics resolveBorderMetrics(LayoutMetrics const &layoutMetrics) const;
|
|
bool getClipsContentToBounds() const;
|
|
|
|
#ifdef ANDROID
|
|
bool getProbablyMoreHorizontalThanVertical_DEPRECATED() const;
|
|
#endif
|
|
|
|
#pragma mark - DebugStringConvertible
|
|
|
|
#if RN_DEBUG_STRING_CONVERTIBLE
|
|
SharedDebugStringConvertibleList getDebugProps() const override;
|
|
#endif
|
|
};
|
|
|
|
} // namespace react
|
|
} // namespace facebook
|