Commit Graph

35 Commits

Author SHA1 Message Date
Gabriel Donadel Dall'Agnol 32b6f319ba feat: Add support for verticalAlign style (#34567)
Summary:
This adds support for the `verticalAlign` style attribute, mapping the already existing `textAlignVertical` attribute as requested on https://github.com/facebook/react-native/issues/34425. This PR also updates the TextExample.android on the RNTester in order to facilitate the manual QA of this.

## Changelog

[Android] [Added] - Add support for verticalAlign style

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

Test Plan:
1. On Android open the RNTester app and navigate to the Text page
2. Check the text alignment through the `Text alignment` section

https://user-images.githubusercontent.com/11707729/188051914-bf15f7eb-e53f-4de5-8033-d1b572352935.mov

Reviewed By: jacdebug

Differential Revision: D39771237

Pulled By: cipolleschi

fbshipit-source-id: d2a81bec1edd8d49a0fcd36a42fea53734909739
2022-10-03 05:57:30 -07:00
Tim Yung 494c47360f RN: Sort Imports via ESLint
Summary:
Applies the autofix from the newly introduced `lint/sort-imports` ESLint rule.

Changelog:
[Internal]

Reviewed By: cortinico, skinsshark

Differential Revision: D39907798

fbshipit-source-id: 17f5f11b08a5b4bb66286816b78eb26e07e829b8
2022-09-30 14:28:48 -07:00
Gabriel Donadel Dall'Agnol 14c91cdf59 feat: Add string support for aspectRatio (#34629)
Summary:
This updates `aspectRatio` to support string values and ratio formats, i.e., `'16 / 9'`, thus aligning it with the [CSS Box Sizing Module Level 4](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the `processAspectRatio` function ensuring the style processing works as expected.

## Changelog

[General] [Added] - Add string support for aspectRatio

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

Test Plan:
This can be tested either through `processAspectRatio-tests` or by using the following code:

```js
 <View
   style={{
     backgroundColor: '#527FE4',
     aspectRatio: '16 / 9',
  }} />
```

https://user-images.githubusercontent.com/11707729/189029904-da1dc0a6-85de-46aa-8ec2-3567802c8719.mov

Reviewed By: jacdebug

Differential Revision: D39423304

Pulled By: cipolleschi

fbshipit-source-id: d323de93d6524e411e7ab9943335a8ca323b6e61
2022-09-27 04:05:52 -07:00
Gabriel Donadel Dall'Agnol 09d420707f feat: Add space-separated string support for fontVariant (#34641)
Summary:
This updates `fontVariant` to support space-separated string values, i.e., `'small-caps common-ligatures'`, thus aligning it with the [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts/#font-variant-prop) specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the `processFontVariant` function ensuring the style processing works as expected.

## Changelog

[General] [Added] - Add space-separated string support for fontVariant

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

Test Plan:
This can be tested either through `processFontVariant-tests` or by using the following code:

```js
 <Text
   style={{
     fontVariant: 'small-caps common-ligatures',
  }} />
```

Reviewed By: javache

Differential Revision: D39423317

Pulled By: cipolleschi

fbshipit-source-id: ad971addb423ed338e178528a11fe9d456c03e6e
2022-09-14 05:08:10 -07:00
Agastya Darma Laksana b2452ab216 feat: Adding support for objectFit a partial equivalent to the resizeMode style and prop of <Image>. (#34576)
Summary:
This PR aims to add support for objectFit a partial equivalent to the resizeMode style and prop of Image.

## Changelog

[General] [Added] - Add support for objectFit style of Image.

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

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. See the Object Fit section.

![Screenshot_1662112702](https://user-images.githubusercontent.com/8868908/188115315-5d5aa971-93ba-4437-a54b-c5ea69b00c08.png)

Reviewed By: rickhanlonii

Differential Revision: D39261176

Pulled By: jacdebug

fbshipit-source-id: 1eefd76b6c11ed5fc52b2c524ad78c91051077f6
2022-09-08 11:52:10 -07:00
Daksh Bhardwaj fc42d5bbb9 feat: add userSelect style equivalent to selectable (#34575)
Summary:
This adds support for the `userSelect` style attribute, mapping the already existing selectable attribute as requested on https://github.com/facebook/react-native/issues/34425. This PR also updates the TextExample.android and TestExample.ios on the RNTester in order to facilitate the manual QA of this.

## Changelog
[General] [Added] - Add support for `userSelect` style

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

Test Plan:
-  open the RNTester app and navigate to the Text page
 - Check the `Selectable Text` through the Selectable text section
<Image src="https://user-images.githubusercontent.com/22423684/188112863-65acd145-76b0-47ba-8bc6-f72298077096.png" height="600" width="300" />

Reviewed By: yungsters

Differential Revision: D39252798

Pulled By: jacdebug

fbshipit-source-id: f7fabf20ee68778d75461f511c56f94d0d756d9c
2022-09-08 03:09:11 -07:00
cyrus25 5c109b37a4 feat: Added pointerEvents style equivalent to pointerEvents prop (#34586)
Summary:
This adds `pointerEvents` style which is equivalent to `pointerEvents` prop as requested in https://github.com/facebook/react-native/issues/34425

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[General] [Added] - Added pointerEvents style equivalent to pointerEvents prop

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

Test Plan:
```
<View
   style={{
     pointerEvents: 'none'
   }}
 >
</View>
```

Reviewed By: cipolleschi

Differential Revision: D39252830

Pulled By: jacdebug

fbshipit-source-id: 94f265a6b6940a4371e7985d5de3b8143693e069
2022-09-05 05:37:35 -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
Zachinquarantine 7cfd77debd Remove deprecated style attributes (#34050)
Summary:
Remove deprecated "Transform" style attributes. These attributes were first deprecated in commit [ed76d4d8db](https://github.com/facebook/react-native/commit/ed76d4d8dbbf012c3f051e04354f76bd6ca98d1b)

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

[General] [Removed] - Remove previously deprecated Transform style-attribute props

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

Test Plan:
~~TBD~~
CI checks are sucessful.

Reviewed By: cortinico

Differential Revision: D37483285

Pulled By: cipolleschi

fbshipit-source-id: d1b9522f9194432a8ec6a4391715e23ac83199bf
2022-06-28 04:17:58 -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
Tim Yung ed76d4d8db RN: Statically Define ReactNativeStyleAttributes
Summary:
Rewrites `ReactNativeStyleAttributes` so that it is statically defined.

This means it will no longer require a handful of modules that defines `prop-types` only to use their keys.

Functionally, this should be equivalent to what was there before.

Changelog:
[Internal]

Reviewed By: TheSavior

Differential Revision: D29019308

fbshipit-source-id: 47f85a8c7703a133c68c20c7f3e14e1026ce4ff2
2021-06-11 23:52:09 -07:00
Tim Yung 33b385825c RN: Simplify ReactNativeStyleAttributes Type
Summary:
Simplifies the Flow type for `ReactNativeStyleAttributes`, an internal module.

Changelog:
[Internal]

Reviewed By: TheSavior

Differential Revision: D29019311

fbshipit-source-id: cf95dac4b8c2261812cc1d753255dfb905540759
2021-06-11 23:52:09 -07:00
Kacie Bawiec 0afd71a18d Convert require to import in Libraries/Components
Summary:
Changelog:
[General][Changed] Convert require statements to use import from in Libraries/Components

Reviewed By: lunaleaps

Differential Revision: D27921557

fbshipit-source-id: 3f1618455a47a56c4a090f3ececfef88476c0b8a
2021-04-26 12:50:59 -07:00
George Zahariev 8553e1acc4 Exact-by-default codemod for react-native-github
Summary:
We are rolling out exact-by-default syntax to xplat/js.

I had to manually move around some comments to preserve proper placement.

Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D18633611

fbshipit-source-id: 48f7468dcc55b1d00985419d035a61c6820b3abe
2019-11-21 09:42:57 -08:00
Logan Daniels b6333f79e1 Final fixes and seal xplat/js/react-native-github
Reviewed By: panagosg7

Differential Revision: D16946423

fbshipit-source-id: 89ca82c955e99a23a14984d51f3c97346c363afd
2019-08-23 08:45:11 -07:00
empyrical 0057cc9bf2 Deprecate Text proptypes (#26055)
Summary:
This pull request moves `Text`'s prop types to the `DeprecatedPropTypes` folder.

This was already partly in progress - there were redundant `TextPropTypes` and `DeprecatedTextPropTypes` files so I removed one, and made sure the version with the doc strings was the one used.

## Changelog

[General] [Deprecated] - Move `Text` component's proptypes to DeprecatedPropTypes
Pull Request resolved: https://github.com/facebook/react-native/pull/26055

Test Plan: Flow checks pass for iOS and Android

Differential Revision: D16801078

Pulled By: TheSavior

fbshipit-source-id: ef19300945d48d0a4a83d728ee32cdf7d1c0f0cc
2019-08-14 17:34:07 -07:00
James Ide 0ee5f68929 Migrate "Libraries" from Haste to standard path-based requires (sans vendor & renderers) (#24749)
Summary:
This is the next step in moving RN towards standard path-based requires. All the requires in `Libraries` have been rewritten to use relative requires with a few exceptions, namely, `vendor` and `Renderer/oss` since those need to be changed upstream. This commit uses relative requires instead of `react-native/...` so that if Facebook were to stop syncing out certain folders and therefore remove code from the react-native package, internal code at Facebook would not need to change.

See the umbrella issue at https://github.com/facebook/react-native/issues/24316 for more detail.

[General] [Changed] - Migrate "Libraries" from Haste to standard path-based requires
Pull Request resolved: https://github.com/facebook/react-native/pull/24749

Differential Revision: D15258017

Pulled By: cpojer

fbshipit-source-id: a1f480ea36c05c659b6f37c8f02f6f9216d5a323
2019-05-08 08:48:59 -07:00
Thomas Carlson d6f3d37802 Rename and move ViewStylePropTypes (#21415)
Summary:
Related to #21342
* Renamed ViewStyleProps to DeprecatedViewStyleProps.
* Moved propType declaration to `react-native/Libraries/DeprecatedPropTypes`
*  ImageProps.js: moved propType declarations to DeprecatedImageProps.js.
Pull Request resolved: https://github.com/facebook/react-native/pull/21415

Reviewed By: TheSavior

Differential Revision: D10119599

Pulled By: RSNara

fbshipit-source-id: 67674039a88dcd570973c7062f86ebdbd6987d28
2018-10-01 12:19:15 -07:00
nd-02110114 84f18341aa Move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js (#21387)
Summary:
related #21342

TODO
* move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js
* fix flow error

CheckList
 - [x] `yarn prettier`
 - [x] `yarn flow-check-android`
 - [x] `yarn flow-check-ios`

All flow checks pass.

[GENERAL] [ENHANCEMENT] [DeprecatedImageSourcePropType.js] - Created.
[GENERAL] [ENHANCEMENT] [DeprecatedImageStylePropTypes.js] - Created.
[GENERAL] [ENHANCEMENT] [DeprecatedTextPropTypes.js] - Created.
Pull Request resolved: https://github.com/facebook/react-native/pull/21387

Reviewed By: TheSavior

Differential Revision: D10099753

Pulled By: RSNara

fbshipit-source-id: c907af6d1549ee42de1a2e17f278998e8422110f
2018-09-28 23:21:38 -07:00
Tim Yung 199c918dbe RN: Fix ReactNativeViewAttributes Type Bugs
Summary: Fixes the runtime value of `ReactNativeStyleAttributes` to correctly map to `true` instead of strings (as returned by `keyMirror`).

Reviewed By: TheSavior

Differential Revision: D10057235

fbshipit-source-id: dc855cff3a114761098ed5176b2e6e25412481dc
2018-09-28 01:08:09 -07:00
Héctor Ramos 1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
Eli White d01ab66b47 Prettier React Native Libraries
Reviewed By: sahrens

Differential Revision: D7961488

fbshipit-source-id: 05f9b8b0b91ae77f9040a5321ccc18f7c3c1ce9a
2018-05-10 19:10:38 -07:00
Rubén Norte d5e9e55fa3 Remove @providesModule from all modules
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.

It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)

* Checked the Flow configuration by running flow on the project root (no errors):

```
yarn flow
```

* Checked the Jest configuration by running the tests with a clean cache:

```
yarn jest --clearCache && yarn test
```

* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:

```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```

[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995

Reviewed By: mjesun

Differential Revision: D7729509

Pulled By: rubennorte

fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
2018-04-25 07:37:10 -07:00
Eli White 3152e93095 Converting Libraries/Components to not use var
Reviewed By: sahrens

Differential Revision: D7117137

fbshipit-source-id: a55a04928a0073a17e0709e851aa8b11678042ba
2018-03-03 15:38:18 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Ramanpreet Nara 1b5f8d3ee5 iOS: Implement border(Top|Bottom)(Start|End)Radius and border(Start|End)(Color|Width) RN styles
Reviewed By: shergin

Differential Revision: D5874536

fbshipit-source-id: 5ad237bddb70745aef0341cddb172da5ee388c38
2017-10-18 19:33:31 -07:00
Marshall Roch 91b6b4efb9 @allow-large-files Flow v0.54.0
Reviewed By: leebyron

Differential Revision: D5773490

fbshipit-source-id: 2c54bb6326f23edbe9a969f3010f79da8189923e
2017-09-06 03:33:43 -07:00
Valentin Shergin d8748233ca Removing transformMatrix and decomposedMatrix properties
Summary: We deprecated `transformMatrix` and `decomposedMatrix` in D3239960 10 months ago. This revision finally removes remains of this functionality from native code.

Reviewed By: mmmulani

Differential Revision: D4515760

fbshipit-source-id: b4d5b7e834ac4a775f4992b28270b4ff961889a6
2017-02-07 14:02:20 -08:00
David Aurelio ad8a335864 Remove knowledge of fbjs from the packager
Summary:Follow-up to https://github.com/facebook/react-native/pull/5084

This…
- changes all requires within RN to `require('fbjs/lib/…')`
- updates `.flowconfig`
- updates `packager/blacklist.js`
- adapts tests
- removes things from `Libraries/vendor/{core,emitter}` that are also in fbjs
- removes knowledge of `fbjs` from the packager

Closes https://github.com/facebook/react-native/pull/5084

Reviewed By: bestander

Differential Revision: D2926835

fb-gh-sync-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
shipit-source-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
2016-03-02 04:28:38 -08:00
Noam Bartov f68281a0d8 added support for overlayColor property for image
Summary:
In Android, Fresco's default rounding corners support mode is BITMAP_ONLY which doesn't work in all cases (such as animated GIF's, some scale types, etc.).
Specifying the new "overlayColor" property on an Image will cause Fresco to switch to the other rounding corners mode, OVERLAY_COLOR, and will draw rounded corners by overlaying the solid color specified.

Fresco's behaviour is explained here: http://frescolib.org/docs/rounded-corners-and-circles.html
Closes https://github.com/facebook/react-native/pull/5366

Reviewed By: svcscm

Differential Revision: D2854696

Pulled By: mkonicek

fb-gh-sync-id: 251701ee8a64acbfc22694e9d4661c40eef75725
2016-01-24 14:00:39 -08:00
Kudo Chien 4972cabaa5 Add <Text> shadow support
Summary:
Add three new TextStylePropTypes for \<Text>
- textShadowOffset
- textShadowRadius
- textShadowColor
Closes https://github.com/facebook/react-native/pull/4975

Reviewed By: svcscm

Differential Revision: D2796278

Pulled By: nicklockwood

fb-gh-sync-id: f8c3fa210e664428b029b9fba8eca4a8eb81c08d
2016-01-01 09:33:31 -08:00
Sebastian Markbage 6244fd003d Refactor Attribute Processing (Step 3)
Reviewed By: @spicyj

Differential Revision: D2514193

fb-gh-sync-id: 8ba55014e8d052c69d8e1def327284ec974d6837
2015-10-06 15:36:32 -07:00
Felix Oghina 8f7748748e Revert [React Native] Refactor Attribute Processing (Step 3)
Reviewed By: @kmagiera, @mikearmstrong001

Differential Revision: D2512548

fb-gh-sync-id: bcae3a8c85bfcfa468f2128288a25f406d78cf08
2015-10-06 10:29:18 -07:00
Sebastian Markbage ac5b7548d2 Refactor Attribute Processing (Step 3)
Summary: Decouple processStyle from the main reconciliation. It is now a process
extension to the style attribute `transform`. This effectively decouples a
large portion of special cases and helper dependencies from the reconciler.

The transform attribute becomes translated into the transformMatrix attribute on
the native side so this becomes a little weird in that I have to special case
it. I don't think it is worth while having a general solution for this so I
intend to rename the native attribute to `transform` and just have it accept the
resolved transform. Then I can remove the special cases.

The next step is generalizing the flattenStyle function and optimizing it.

@​public

Reviewed By: @vjeux

Differential Revision: D2460465

fb-gh-sync-id: 243e7fd77d282b401bc2c028aec8d57f24522a8e
2015-10-06 10:28:41 -07:00
Sebastian Markbage 8e3ce0ff98 Refactor Attribute Processing (Step 2)
Summary: Move the ViewAttributes and StyleAttributes configuration into the
Components library since they're coupled and change with the
native component configuration.

This also decouples StyleAttributes from the reconciler by adding it
to the ReactViewAttributes.

To do that, I refactored the property diffing to allow for recursive
configurations. Now an attribute configuration can be a nested object,
a custom configuration (diff/process) or true.

The requireNativeComponent path incorrectly gets its attributes set up
on the root validAttributes instead of the nested style object.
So I also have to add the nested form. Effectively these currently allow
these attributes on props or nested.

@​public

Reviewed By: @vjeux

Differential Revision: D2456842

fb-gh-sync-id: cd5405bd8316c2fcb016d06c61244ce7719c26c0
2015-10-06 10:28:35 -07:00