Commit Graph
61 Commits
Author SHA1 Message Date
Janic Duplessis 474861f4e7 Implement adjustsFontSizeToFit on Android (#26389)
Summary:
This adds support for `adjustsFontSizeToFit` and `minimumFontScale` on Android. The implementation tries to match closely the behaviour on iOS (hardcoded 4px min size for example). It uses a simpler linear algorithm for now, opened to improving it now if it is a deal breaker or in a follow up.

See https://twitter.com/janicduplessis/status/1171147709979516929 for a more detailed thread about the implementation

## Changelog

[Android] [Added] - Implement `adjustsFontSizeToFit` on Android
Pull Request resolved: https://github.com/facebook/react-native/pull/26389

Test Plan: Tested by adding the existing `adjustsFontSizeToFit` example from the iOS text page to android. Also added a case for limiting size by using `maxHeight` instead of `numberOfLines`.

Reviewed By: mdvacca

Differential Revision: D17285473

Pulled By: JoshuaGross

fbshipit-source-id: 43dbdb05e2d6418e9a390d11f921518bfa58e697
2020-02-13 16:19:14 +01:00
Maurus Cuelenaere c2c4b43dfe Add Android support for fontVariant prop (#27006)
Summary:
Android was missing support for the `fontVariant` prop in TextViews, this PR adds that.

## Changelog

[Android] [Added] - Add Android support for fontVariant prop
Pull Request resolved: https://github.com/facebook/react-native/pull/27006

Test Plan:
Since I can't get RNTester to work locally (it crashes when loading `libyoga.so` on `No implementation found for long com.facebook.yoga.YogaNative.jni_YGConfigNew()`), I'll post some screenshots below of our app showing the difference.

We are using a slightly different [version](https://github.com/getdelta/react-native/commit/10cafcaa0798e5dbe8b56d461885fa84c6953739) of this commit, since we're still on 0.60, but the gist remains the same when rebased on master.

Before:
![Screenshot_20191025-130325__01](https://user-images.githubusercontent.com/1682432/67566586-7b3f2880-f728-11e9-85c0-57667d645153.jpg)

After:
![Screenshot_20191025-130444__01](https://user-images.githubusercontent.com/1682432/67566599-842ffa00-f728-11e9-988a-1b12ee393b83.jpg)

Differential Revision: D18179642

Pulled By: mdvacca

fbshipit-source-id: 03a050aa76e7bafa0343354dfa778cf74af5abd2
2019-10-29 00:29:20 -07:00
Andres Suarez 3b31e69e28 Tidy up license headers [2/n]
Summary: Changelog: [General] [Fixed] - License header cleanup

Reviewed By: yungsters

Differential Revision: D17952694

fbshipit-source-id: 17c87de7ebb271fa2ac8d00af72a4d1addef8bd0
2019-10-16 10:06:34 -07:00
Marc Mulcahy 7df3eea1a7 Add accessibilityValueDescription support. (#26169)
Summary:
React Native components need a mechanism to specify their value to assistive technologies. This PR adds the notion of accessibilityValueDescription-- a property which either contains a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

On iOS, the range-based info if present is converted into a percentage and added to the accessibilityValue property of the UIView. If text is present as part of the accessibilityValueDescription, it is used instead of the range-based information.

On Android, any range-based information in accessibilityValueDescription is exposed in the AccessibilityNodeInfo's RangeInfo. Text which is part of accessibilityValueDescription is appended to the content description.

## Changelog

[GENERAL] [Change] - add accessibilityValuedescription property.
Pull Request resolved: https://github.com/facebook/react-native/pull/26169

Test Plan: Added two new accessibility examples to RNTester, one which uses text and another which uses range-based info in accessibilityValueDescription. Verified that they both behave correctly on both Android and iOS.

Differential Revision: D17444730

Pulled By: cpojer

fbshipit-source-id: 1fb3252a90f88f7cafe1cbf7db08c03f14cc2321
2019-09-18 03:16:42 -07:00
Marc Mulcahy 7b35f427fd Remove deprecated accessibilityStates property. (#26168)
Summary:
We added the accessibilityState property as a more semantically rich way for components to describe information about their state to accessibility services. This PR removes the old accessibilityStates property.

 <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->

## Changelog

[General] [Change] - Remove accessibilityStates property.
Pull Request resolved: https://github.com/facebook/react-native/pull/26168

Test Plan: Ensure that RNTester accessibility examples function properly on both iOS and Android.

Differential Revision: D17152891

Pulled By: cpojer

fbshipit-source-id: d71d3cf0f2e0846979d2ba104b6c69e4e5725252
2019-09-02 11:25:31 -07:00
Oleksandr Melnykov 50fe8119de Use ViewManagerDelegate if provided instead of $$PropsSetter to update view props
Summary:
This diff introduces an interface `ViewManagerDelegate` and its base implementation `BaseViewManagerDelegate`, which is used as a parent class for all view manager delegates generated by the JS codegen. Before the changes in this diff, generated delegates didn't support setting the base view properties such as background color, rotation, opacity, etc. Now it's possible to do by using `BaseViewManagerDelegate.setProperty(...)`, and since all generated delegates extend BaseViewManagerDelegate, they can just call `super.setProperty(...)` for properties they don't want to handle.

This diff also introduced a new method `ViewManager.getDelegate()`. This will allow view managers to return an instance of the delegate generated by JS and ensure that the view properties are set in a type-safe manner. If this method returns null (it does by default), we fall back to the default implementation of setting view properties using Java-generated `$$PropsSetter`
classes.

This is an example of an interface class generated by JS:

```
public interface RCTAxialGradientViewViewManagerInterface<T extends View> {
  void setColors(T view, Nullable ReadableArray value);
  void setLocations(T view, Nullable ReadableArray value);
  void setEndX(T view, Float value);
  void setEndY(T view, Float value);
  void setStartX(T view, Float value);
  void setStartY(T view, Float value);
}
```

This is an example of a delegate class generated by JS:

```
public class RCTAxialGradientViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RCTAxialGradientViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
  public RCTAxialGradientViewManagerDelegate(U viewManager) {
    super(viewManager);
  }
  Override
  public void setProperty(T view, String propName, Nullable Object value) {
    switch (propName) {
      case "colors":
        mViewManager.setColors(view, (ReadableArray) value);
        break;
      case "locations":
        mViewManager.setLocations(view, (ReadableArray) value);
        break;
      case "endX":
        mViewManager.setEndX(view, value == null ? Float.NaN : ((Double) value).floatValue());
        break;
      case "endY":
        mViewManager.setEndY(view, value == null ? Float.NaN : ((Double) value).floatValue());
        break;
      case "startX":
        mViewManager.setStartX(view, value == null ? Float.NaN : ((Double) value).floatValue());
        break;
      case "startY":
        mViewManager.setStartY(view, value == null ? Float.NaN : ((Double) value).floatValue());
        break;
      default:
        super.setProperty(view, propName, value);
    }
  }
}
```

NOTE: What if a view manager, for instance ReactAxialGradientManager, wanted to add support for the borderRadius prop? In the old Java codegen, it would just need to create a method and annotate it with ReactProp (name = ViewProps.BORDER_RADIUS) and $$PropsSetter would call this method when a property with this name must be set. With the new JS codegen, borderRadius is a part of the basic view props, so setBorderRadius is not generated as a part of the ViewManagerInterface, so it’s not possible to set this value. I see two options: 1) add a method boolean setProperty (String propName, Object value) and let the view manager handle it in a non-type safe way (return true if it’s been handled). 2) Generate BaseViewManagerInterface which will include all basic view props and make BaseViewManager implement this interface, leaving all methods empty so that it stays compatible with the current implementation. Override these methods in a view manager that needs to handle a specific property in a custom way (so we would override setBorderRadius in ReactAxialGradientManager).

Reviewed By: mdvacca

Differential Revision: D16667686

fbshipit-source-id: 06a15a92f8af55640b7a53c5a34f40366d1be2a8
2019-08-12 06:36:24 -07:00
Oleksandr Melnykov 6c0f73b322 Format Java code in xplat/js/react-native-github
Summary:
This diff formats the Java class files inside xplat/js/react-native-github. Since google-java-format was enabled in D16071401 we want to codemode the existing code so that users don't have to deal with formatter lint noise at diff-time.

```arc f --paths-cmd 'hg files -I "**/*.java"'```

drop-conflicts

Reviewed By: cpojer

Differential Revision: D16071725

fbshipit-source-id: fc6e3852e45742c109f0c5ac4065d64201c74204
2019-07-02 04:16:46 -07:00
Janic Duplessis 9fba85569c Fix crash when borderXColor is null on Android (#24640)
Summary:
On android when borderXColor is null it causes the app to crash with:

```
04-28 17:44:18.021 20114 20213 E unknown:ReactNative: com.facebook.react.bridge.NoSuchKeyException: borderBottomColor
04-28 17:44:18.021 20114 20213 E unknown:ReactNative: 	at com.facebook.react.bridge.ReadableNativeMap.getValue(ReadableNativeMap.java:111)
04-28 17:44:18.021 20114 20213 E unknown:ReactNative: 	at com.facebook.react.bridge.ReadableNativeMap.getValue(ReadableNativeMap.java:115)
04-28 17:44:18.021 20114 20213 E unknown:ReactNative: 	at com.facebook.react.bridge.ReadableNativeMap.getInt(ReadableNativeMap.java:158)
04-28 17:44:18.021 20114 20213 E unknown:ReactNative: 	at com.facebook.react.uimanager.ViewProps.isLayoutOnly(ViewProps.java:246)
04-28 17:44:18.021 20114 20213 E unknown:ReactNative: 	at com.facebook.react.uimanager.NativeViewHierarchyOptimizer.isLayoutOnlyAndCollapsable(NativeViewHierarchyOptimizer.java:482)
```

Basically it is missing a `isNull` check on the props map before trying to access the value.

Fixes #22727

[Android] [Fixed] - Fix a crash when borderXColor is null
Pull Request resolved: https://github.com/facebook/react-native/pull/24640

Differential Revision: D15120182

Pulled By: cpojer

fbshipit-source-id: bc41da572f04d8abf733b5a4e94a74a0f40acda1
2019-04-29 03:31:03 -07:00
Adam Comella 4936d284df Android: Add a maxFontSizeMultiplier prop to <Text> and <TextInput> (#23069)
Summary:
Equivalent of this iOS PR: https://github.com/facebook/react-native/pull/20915

Motivation:
----------

Whenever a user changes the system font size to its maximum allowable setting, React Native apps that allow font scaling can become unusable because the text gets too big. Experimenting with a native app like iMessage on iOS, the font size used for non-body text (e.g. header, navigational elements) is capped while the body text (e.g. text in the message bubbles) is allowed to grow.

This PR introduces a new prop on `<Text>` and `<TextInput>` called `maxFontSizeMultiplier`. This enables devs to set the maximum allowed text scale factor on a Text/TextInput. The default is 0 which means no limit.
Pull Request resolved: https://github.com/facebook/react-native/pull/23069

Differential Revision: D13748513

Pulled By: mdvacca

fbshipit-source-id: 8dd5d6d97bf79387d9a2236fa2e586ccb01afde9
2019-01-23 11:40:00 -08:00
Andrew Chen (Eng) 59aada873e Remove overflow hidden killswitch
Summary: There hasn't been any reports of overflow issues since the last issue was fixed in v183 (July 30th). Let's remove this flag

Reviewed By: yungsters

Differential Revision: D10020006

fbshipit-source-id: 593c7d2c2bef5f0bd60d5de1941cd58f7fd6ccc7
2018-09-25 11:52:19 -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
Jiaqi Wu 9c71952f20 Fix overflow issue in root view
Summary:
Set clipChildren to false by default in ReactRootView.java so that Overflow: visible/hidden will work for the root view.

Moved sDefaultOverflowHidden from ReactViewGroup.java to ViewProps.java so that it can be used in both ReactViewGroup.java and ReactRootView.java.

Reviewed By: mdvacca

Differential Revision: D8727140

fbshipit-source-id: b593bed63e479cdbd22e4a025b936e6aeb28fc8c
2018-07-19 17:46:53 -07:00
David Vacca 27a38dedf1 Enable View flatening optimization by default
Summary: This diff enables view flattening optimizations by default

Reviewed By: wwjholmes, yungsters

Differential Revision: D8699050

fbshipit-source-id: d37d06fe330e223c49a0788e85f6338fd056fd19
2018-07-02 10:04:41 -07:00
Tim Yung 6a16bec882 RN: Fix Drawing Rect for ReactScrollView
Summary:
Fixes `ReactScrollView` so that it respects the drawing rect (i.e. the bounding box of the element).

In JavaScript, this is the backing view for `ScrollView` (vertical) on Android.

Reviewed By: fadinghorse

Differential Revision: D8710256

fbshipit-source-id: f3bd96e39b8569cfcb21e486944b70fdb57c12b6
2018-07-01 16:32:07 -07:00
Tim Yung b81c8b51fc RN: Add Support for overflow on Android (Take 2)
Summary:
Adds support for the `overflow` style property on React Native for Android.

This is the second attempt to do this. See https://github.com/facebook/react-native/commit/6110a4cc75bf8f285ff091cc175b9ebf737f88fc (D8666509) for the first attempt.

Similar to the first attempt, this sets `setClipChildren(false)` by default on all `ViewGroup` instances. However, this differs in how it implements `overflow: hidden`. Instead of conditionally setting `setClipChildren`, this manually clips children to the `ViewGroup`'s bounds  (which was incidentally what we were doing for background + border radius already).

Reviewed By: achen1

Differential Revision: D8690805

fbshipit-source-id: 58757825cd9d138c18c8758918d85b4ca1915f87
2018-06-29 12:18:27 -07:00
Tim Yung cfce6ee9d7 RN: Android Constants for Overflow Style
Summary:
Tidies up the hardcoded strings for referencing the `overflow` style values.

Also, the `OVERFLOW` case in the optimized view flattening code path is unnecessary because `OVERFLOW` is already in the `LAYOUT_ONLY_PROPS` set.

Reviewed By: achen1

Differential Revision: D8690804

fbshipit-source-id: 3befbe93ed761e57e45f9b50e59bffc8a29a407f
2018-06-29 12:18:27 -07:00
Tim Yung f090840f45 RN: Revert D8666509
Summary:
Reverts D8666509. Unfortunately, I misunderstood `setClipChildren` on Android.

When set on a `ViewGroup`, `setClipChildren` configures whether its //children// — not itself — are clipped to their bounds. This is unlike `overflow` (as it behaves on iOS) which configures whether the view itself is clipped to its bounds.

But they are definitely related. In theory, I think we could implement `overflow` using `setClipChildren` by:

- Setting `setClipChildren(false)` by default. (This part, I got right.)
- When `overflow` is set to `hidden` on a `View`, we create an extra `ViewGroup` (child) within the normal `ViewGroup` (parent). Then, we can set `setClipChildren(true)` on the parent `ViewGroup` which will cause the child `ViewGroup` to be clipped to its bounds.

However, I think the tricky thing will be to create the child `ViewGroup` without incurring unintentional side effects.

I need to decide whether or not this is worth trying. The alternative is to add a new `clipChildren` boolean prop that is Android-only, but I really hate further bifurcating the platform. But for now, I am reverting my mistake.

Reviewed By: achen1

Differential Revision: D8690551

fbshipit-source-id: 1ba3bbcc5458ffbd5c475430ea0382b3fd0916b2
2018-06-29 12:18:27 -07:00
Tim Yung 6110a4cc75 RN: Add Support for overflow on Android
Summary:
Adds support for the `overflow` style property on React Native for Android.

This switches overflowing views to be visible by default with the ability to override this at the container level using `overflow: 'hidden'`. This is the same behavior as React Native on iOS.

One major caveat to this solution is that it uses `setClipChildren` which does not extend the hit target to the overflow draw regions. While this is a pitfall, the current state of React Native on Android where `overflow` is hidden by default (which is the opposite of iOS) is also a huge pitfall. But I think this moves us in the right direction because where you *don't* need the touch behavior, you are now able to leverage overflow draws.

Reviewed By: himabindugadupudi

Differential Revision: D8666509

fbshipit-source-id: 5e98e658e16188414016260224caa696b4fbd390
2018-06-28 01:31:56 -07:00
David Vacca 5fa9d78978 Fix viewflattening for views with on_layout props
Reviewed By: achen1

Differential Revision: D7796986

fbshipit-source-id: beb0725d4edc15ec23deba592e53b700abb3bcb5
2018-04-27 18:53:27 -07:00
Moti Zilberman 5898817fc1 Implement letterSpacing on Android >= 5.0
Summary:
`letterSpacing` is completely missing from RN Android at the moment.

I've reviewed the `letterSpacing` implementations in #13199, #13877 and #16801 (that all seem to have stalled) and managed to put together an improved one based on #13199, updated to merge cleanly post https://github.com/facebook/react-native/commit/6114f863c3aed826355530bcf404ee5aed2f927b, that resolves the [issues](https://github.com/facebook/react-native/pull/13199#issuecomment-354568863) I've identified with that code.

I believe this is the closest PR yet to a correct implementation of this feature, with a few caveats:

- As with the other PRs, this only works on Android >= 5.0 (silently falling back to no letter spacing on older versions). Is this acceptable for a RN feature, in general? Would a dev mode warning be desirable?
- The other PRs seem to have explored the space of potential solutions to the layout issue ([Android renders space _around_ glyphs](https://issuetracker.google.com/issues/37079859), iOS to the _right_ of each one) and come up empty, so I've opted to merely document the difference.
- I have neither updated nor tested the "Flat" UI implementation - everything compiles but I've taken [this comment](https://github.com/facebook/react-native/issues/12770#issuecomment-294052694) to mean there's no point in trying to wade through it on my own right now; I'm happy to tackle it if given some pointers.
- The implementation in `ReactEditText` is only there to handle the placeholder text, as `ReactBaseTextShadowNode` already affects the input control's contents correctly.
  - I'm not sure whether `<TextInput>` is meant to respect `allowFontScaling`; I've taken my cue here from `ReactTextInputManager.setFontSize()`, and used the same units (SP) to interpret the value in `ReactEditText.setLetterSpacingPt()`.
  - I'm not sure whether `<TextInput>` is even meant to support `letterSpacing` - it doesn't actually work on iOS. I'm not going to be able to handle the Objective-C side of this, not as part of this PR at least.
- I have not added unit tests to `ReactTextTest` - is this desirable? I see that some other props such as `lineHeight` aren't covered there (unless I'm not looking in the right place).
- Overall, I'm new to this codebase, so it's likely I've missed something not mentioned here.

Note comment re: unit tests above; RNTester screenshots follow.

| iOS (existing functionality, amended test) | Android (new functionality & test) |
| - | - |
| <img src=https://user-images.githubusercontent.com/2246565/34458459-c8d59498-edcb-11e7-8c8f-e7426f723886.png width=300> | <img src=https://user-images.githubusercontent.com/2246565/34458473-2a1ca368-edcc-11e7-9ce6-30c6d3a48660.png width=300> |

| iOS _(not implemented, test not in this branch)_ | Android (new functionality & test) |
| - | - |
| <img src=https://user-images.githubusercontent.com/2246565/34458481-6c60a36e-edcc-11e7-9af5-9734dd722ced.png width=300> | <img src=https://user-images.githubusercontent.com/2246565/34458486-8b3cdcf8-edcc-11e7-974b-25c6085fa674.png width=300> |

| iOS _(not implemented, test not in this branch)_ | Android (new functionality & test) |
| - | - |
| <img src=https://user-images.githubusercontent.com/2246565/34458492-d69a77be-edcc-11e7-896f-21212621dbee.png width=300> | <img src=https://user-images.githubusercontent.com/2246565/34458490-b3a1139e-edcc-11e7-88c8-79d4430d1514.png width=300> |

https://github.com/facebook/react-native-website/pull/105 - this docs PR is edited slightly from what's in `TextStylePropTypes` here; happy to align either one to the other after a review.

[ANDROID] [FEATURE] [Text] - Implemented letterSpacing
Closes https://github.com/facebook/react-native/pull/17398

Reviewed By: mdvacca

Differential Revision: D6837718

Pulled By: hramos

fbshipit-source-id: 5c9d49e9cf4af6457b636416ce5fe15315aab72c
2018-02-27 14:53:58 -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
David Vacca 877f1cde2e Fix and re-enable "view flattening" optimizations for Marketplace
Reviewed By: achen1

Differential Revision: D6751078

fbshipit-source-id: 32bfb9ac64f183fabbba85755be372016722afc6
2018-01-18 17:55:08 -08:00
Ramanpreet Nara 1a7abcf526 Android: Implement border(Top|Bottom)(Start|End)Radius for RN
Reviewed By: achen1

Differential Revision: D5924734

fbshipit-source-id: 24759326064c11d2cd8948c7a710376ca9f41c63
2017-10-18 19:33:32 -07:00
Ramanpreet Nara 0f467a25ed Android: Implement border(Start|End)Color for RN non-rounded borders
Reviewed By: achen1

Differential Revision: D5921865

fbshipit-source-id: ed964291cba0c701de677c24c54f885cda78e7cc
2017-10-18 19:33:32 -07:00
Ramanpreet Nara 7ed7593b2b Android: Implement border(Start|End)Width for non-rounded borders
Reviewed By: achen1

Differential Revision: D5917755

fbshipit-source-id: 3ec0ab1a1e191f5f6fd956691995e95937a513cc
2017-10-18 19:33:32 -07:00
Ramanpreet Nara 04a8c62313 Android: Implement margin(Start|End) styles for RN
Reviewed By: achen1

Differential Revision: D5907651

fbshipit-source-id: 4df7583483e6f10b5433b9fa9d9345e00ccedd20
2017-10-18 19:33:32 -07:00
Ramanpreet Nara 1ed08d3c01 Android: Implement padding(Start|End) styles for RN
Reviewed By: AaaChiuuu

Differential Revision: D5907207

fbshipit-source-id: c9bb322f94d701463be35fb1ca92aab80f47d8ab
2017-10-18 19:33:31 -07:00
Ramanpreet Nara dc92e69867 Android: Forward RN start/end styles to Yoga
Reviewed By: AaaChiuuu

Differential Revision: D5906097

fbshipit-source-id: 79bd43ea54572eb612e781628551bccf5a4f948d
2017-10-18 19:33:31 -07:00
Aaron Chiu bbcfcdb8ed bring back box-none as layout only prop
Differential Revision: D5965540

fbshipit-source-id: a4a7b32a563674cf5f94e88390483763cf49d6da
2017-10-03 11:30:57 -07:00
Aaron Chiu e7af72b29a make view hierarchy optimizer smarter
Reviewed By: shergin

Differential Revision: D5744725

fbshipit-source-id: 4042310494a2bbd3d3472485ad8496d592eb28ac
2017-09-29 18:19:54 -07:00
Tomas Reimers 9e373529f3 Backed out D5792012.
Reviewed By: AaaChiuuu

Differential Revision: D5855139

fbshipit-source-id: 3837769a4da90d9752de75669c6395fabcd3b18b
2017-09-18 21:37:54 -07:00
Tomas Reimers 718f4e60c2 Remove 'box-only' as a layoutOnlyProp
Summary:
Currently, having the property `pointerEvents={'box-only'}` marks a view as layoutOnly. For optimization reasons, layoutOnly nodes are [not added to the node hierarchy](https://github.com/facebook/react-native/blob/b103903ec869bc48dfcaf001dc926957d0b5200a/ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyOptimizer.java#L99) The problem is that should this box ever need to be [transitioned to not-layout-only](https://github.com/facebook/react-native/blob/b103903ec869bc48dfcaf001dc926957d0b5200a/ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyOptimizer.java#L394) (for example, because you add the a CSS transform property),  it must be added to the hierarchy. To add it to the hierarchy the [React Styles Diff Map](https://github.com/facebook/react-native/blob/b103903ec869bc48dfcaf001dc926957d0b5200a/ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyOptimizer.java#L396) is passed along with the backing shadowNode to create the node. The problem is that at no point were the original `pointerEvents` and so the new node will be created with `pointerEvents =  'auto'`.

A more correct fix to this problem might be to have shadowNodes carry around their pointerEvents, although this is likely a greater design decision which is why am I proposing the quick fix now.

Will also resolve: https://github.com/react-native-community/react-native-modal/issues/11
Closes https://github.com/facebook/react-native/pull/15529

Reviewed By: AaaChiuuu

Differential Revision: D5792012

Pulled By: tomasreimers

fbshipit-source-id: 625242c53e16cb293c64811a57f6c3905b3483e0
2017-09-12 14:21:11 -07:00
Misha Greenberg 9f5bdd7b49 Size height of Android Text component based on includeFontPadding style
Summary:
Overview -

This PR resolves the issue described in #14606. This PR makes Text components take into account the includeFontPadding property when calculating their size.

Background -

Currently, on Android, when includeFontPadding is set to false, the React Text component does not adjust its height. This makes it difficult to lay out other components at a precise spacing relative to a Text component.

iOS calculates the height of a UILabel based on the font's descent + ascent.

Android lets you choose whether to calculate the height of a TextView based on the font's top + bottom (includeFontPadding=true) or ascent + descent (includeFontPadding=false).

In order for a text component to be the same size on iOS and Android (relative to the rest of the layout in points and dips), one should set includeFontPadding=false on Android - but the React Text component needs to take this property into account when sizing itself for this to work.

Please see this stack overflow post for a visual explanation of the difference between a font's ascent/descent and top/bottom - https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font

Testing -

Please see the attached screenshots to see the height difference of a Text component with this PR when includeFontPadding is true vs false.

The font I am using has an ascent + descent = em-size so that the height of the Text component will be equal to the font-size for a single line of text. This is to clearly show the additional height that includeFontPadding=true adds to the Text component.

For Text components that are styled in the same way,

When includeFontPadding=true, height = ~29.714 dips
When includeFontPadding=false, height= 24 dips

<img width="342" alt="includefontpaddingtrue" src="https://user-images.githubusercontent.com/1437344/27299391-3eec9de0-54fa-11e7-81d5-d0aeb40e8e27.png">

<img width="346" alt="includefontpaddingfalse" src="https://user-images.githubusercontent.com/1437344/27299401-45c95248-54fa-11e7-98d7-17dd152d3cb8.png">
Closes https://github.com/facebook/react-native/pull/14609

Reviewed By: AaaChiuuu

Differential Revision: D5587602

Pulled By: achen1

fbshipit-source-id: 6d2f12ba72ec7462676645519cd27820279278eb
2017-08-18 15:31:01 -07:00
Greg Herlihy b5eb104617 Fix view collapsing
Summary:
Make more views collapse on Android by designating FLEX_BASIS, FLEX_GROW and FLEX_SHRINK as "layout-only" props.

Relies on existing layout tests.

See Issue #13622
Closes https://github.com/facebook/react-native/pull/13868

Reviewed By: astreet

Differential Revision: D5035864

Pulled By: javache

fbshipit-source-id: d2c9e0b33b07e51b19afc383ef913ac41b70415c
2017-05-18 11:31:52 -07:00
Emil Sjolander 4d69f4b2d1 Add display:none support to react native
Summary:
This diff adds display:none support to React Native. This enables hiding components which still calling their render method and keeping them within the state of your application. This enables preserving state in a component even though the component is not visible. Previously this was often implemented by rendering a component off screen as a work around. See below playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, display: 'none', backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611771

fbshipit-source-id: 0dbe0494d989df42994ab9ad5125d47f3233cc5a
2017-03-01 09:16:05 -08:00
Emil Sjolander 31f848a5fa Expose alignContent to react native
Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611803

fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
2017-03-01 09:16:05 -08:00
Pieter De Baets 88eeea0995 Allow views to be collapsed when pointerEvents is set
Reviewed By: astreet

Differential Revision: D4440164

fbshipit-source-id: 88a710affea229228f9c96b82d0bcf4c81f3205d
2017-01-23 11:28:51 -08:00
Adam Comella c0ea23cfb0 Android: Expose textBreakStrategy on Text and TextInput
Summary:
Android has a text API called breakStrategy for controlling how paragraphs are broken up into lines. For example, some modes support automatically hyphenating words so a word can be split across lines while others do not.

One source of complexity is that Android provides different defaults for `breakStrategy` for `TextView` vs `EditText`. `TextView`'s default is `BREAK_STRATEGY_HIGH_QUALITY` while `EditText`'s default is `BREAK_STRATEGY_SIMPLE`.

In addition to exposing `textBreakStrategy`, this change also fixes a couple of rendering glitches with `Text` and `TextInput`. `TextView` and `EditText` have different default values for `breakStrategy` and `hyphenationFrequency` than `StaticLayout`. Consequently, we were using different parameters for measuring and rendering. Whenever measuring and rendering parameters are inconsistent, it can result in visual glitches such as the text taking up too much space or being clipped.

This change fixes these inconsistencies by setting `breakStrategy` and `hyphenat
Closes https://github.com/facebook/react-native/pull/11007

Differential Revision: D4227495

Pulled By: lacker

fbshipit-source-id: c2d96bd0ddc7bd315fda016fb4f1b5108a2e35cf
2016-12-16 01:28:45 -08:00
Steven Goff 4394419b60 Android Text component allowFontScaling
Summary:
The reason for this change is to implement `allowFontScaling` on the Android's React Native Text component.  Prior to this PR `allowFontScaling` only works for iOS.

The following link contains images of `allowFontScaling` working in Android on small, normal, large, and huge system fonts (from native Android display settings)

http://imgur.com/a/94bF1

The following link is a video of the same thing working on an Android emulator

https://youtu.be/1jTlZhPdj9Y

Here is the sample code snippet driving the video/images
```
render() {
    const size = [12, 14, 16, 18];
    return (
      <View style={{backgroundColor: 'white', flex: 1}}>
        <Text>
          Default size no allowFontScaling prop (default true)
        </Text>
        <Text allowFontScaling={true}>
          Default size allowFontScaling: true
        </Text>
        <Text style={{ marginBottom: 10, }} allowFontScaling={false}>
          Default size allowFontScaling: false
        </Text>

        { size.map(
Closes https://github.com/facebook/react-native/pull/10898

Differential Revision: D4335190

Pulled By: lacker

fbshipit-source-id: 0480809c44983644ff2abfcaf4887569b2bfede5
2016-12-15 17:43:35 -08:00
Emil Sjolander b58c8ad916 Remove deprecated java code
Reviewed By: AaaChiuuu

Differential Revision: D4233198

fbshipit-source-id: 736d79be266e1b9f2d62e5fe6d901de47123cdc1
2016-11-29 12:28:55 -08:00
Emil Sjolander 5850165795 Add support for aspectRatio style prop
Summary:
Expose aspectRatio style prop from css-layout to React Native.

This means the following will now work:

    <View style={{backgroundColor: 'blue', aspectRatio: 1}}/>

Reviewed By: javache

Differential Revision: D4226472

fbshipit-source-id: c8709a7c0abbf77089a4e867879b42dcd9116f65
2016-11-23 07:43:28 -08:00
Aaron Chiu ffe06d3cfa annotate FB4A's view managers with @ReactModule
Reviewed By: achen1

Differential Revision: D4044730

fbshipit-source-id: c80c23c524b2d9366c51c52cbcdee8a2a4f26f75
2016-10-20 05:43:50 -07:00
Emil Sjolander 0a9b6bedb3 BREAKING - Fix unconstraint sizing in main axis
Summary:
This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works.

This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff.

Reviewed By: majak

Differential Revision: D3876927

fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
2016-09-26 06:13:56 -07:00
Janic Duplessis d0d1712851 Reverted commit D3827366
Summary:
This adds support for sticky headers on Android. The implementation if based primarily on the iOS one (https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L272) and adds some stuff that was missing to be able to handle z-index, view clipping, view hierarchy optimization and touch handling properly.

Some notable changes:
- Add `ChildDrawingOrderDelegate` interface to allow changing the `ViewGroup` drawing order using `ViewGroup#getChildDrawingOrder`. This is used to change the content view drawing order to make sure headers are drawn over the other cells. Right now I'm only reversing the drawing order as drawing only the header views last added a lot of complexity especially because of view clipping and I don't think it should cause issues.

- Add `collapsableChildren` prop that works like `collapsable` but applies to every child of the view. This is needed to be able to reference sticky headers by their indices otherwise some subviews can get optimized out and break indexes.
Closes https://github.com/facebook/react-native/pull/9456

Differential Revision: D3827366

Pulled By: fred2028

fbshipit-source-id: d346068734c5b987518794ab23e13914ed13b5c4
2016-09-15 12:13:39 -07:00
Janic Duplessis 0e8b75b22c Implement ScrollView sticky headers on Android
Summary:
This adds support for sticky headers on Android. The implementation if based primarily on the iOS one (https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L272) and adds some stuff that was missing to be able to handle z-index, view clipping, view hierarchy optimization and touch handling properly.

Some notable changes:
- Add `ChildDrawingOrderDelegate` interface to allow changing the `ViewGroup` drawing order using `ViewGroup#getChildDrawingOrder`. This is used to change the content view drawing order to make sure headers are drawn over the other cells. Right now I'm only reversing the drawing order as drawing only the header views last added a lot of complexity especially because of view clipping and I don't think it should cause issues.

- Add `collapsableChildren` prop that works like `collapsable` but applies to every child of the view. This is needed to be able to reference sticky headers by their indices otherwise some subviews can get optimized out and break indexes.
Closes https://github.com/facebook/react-native/pull/9456

Differential Revision: D3827366

fbshipit-source-id: cab044cfdbe2ccb98e1ecd3e02ed3ceaa253eb78
2016-09-14 20:43:29 -07:00
Emil Sjolander a6e1e33a50 Reverted commit D3855801
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 3c365f9e6ef612fd9d9caaaa8c650e9702176e77
2016-09-14 11:28:34 -07:00
Emil Sjolander 1f9c9ecb4b BREAKING - Fix unconstraint sizing in main axis
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 6077b0bcb68fe5ddd4aa22926acab40ff4d83949
2016-09-14 09:14:02 -07:00
Adam Comella b6735f3391 Enable developers to force Fresco to resize an image
Summary:
Here's a little background. Resizing is inferior to scaling. See http://frescolib.org/docs/resizing-rotating.html#_

Currently, React Native has a heuristic to use resize when the image is likely to be from the device's camera. However, there may be other cases where a developer wants to use resize. For example, when the developer knows they'll be downloading a large image from a service but the image will be rendered at a small size on the device.

This change adds a `resizeMethod` prop to the `Image` component so developers can choose how Fresco resizes the image. The options are 'auto', 'resize', or 'scale'. When 'auto' is specified, a heuristic is used to choose between 'resize' and 'scale'. The default value is 'auto'.

**Test plan (required)**

In a small test app, verified that the `resizeMethod` prop properly influences the mechanism that is used to resize the image (e.g. resize or scale).

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/9652

Differential Revision: D3841322

Pulled By: foghina

fbshipit-source-id: 6c78b5c75ea73053aa10386afd4cbff45f5b8ffe
2016-09-09 05:13:53 -07:00
Adam Comella cd1a86db36 Improve ellipsizeMode prop
Summary:
There are a couple of buggy behaviors in the current implementation of the `ellipsizeMode` prop on Android:
  - Setting the `numberOfLines` prop stomps on whatever value you provided for `ellipsizeMode` earlier.
  - The value you've provided for `ellipsizeMode` is used even if you've configured your view to have an unlimited size (i.e. `numberOfLines` is 0 or unspecified).

This change fixes these issues which makes Android's `ellipsizeMode` prop more consistent with iOS's. Additionally, it renames LineBreakMode to EllipsizeMode in a couple of places.

**Test plan (required)**

Verified that the `numberOfLines` and `ellipsizeMode` props work correctly in an Android test app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/9594

Differential Revision: D3810166

Pulled By: foghina

fbshipit-source-id: 229c9bfc3ef10670a1090311ea9d095cb2c1121a
2016-09-02 00:58:41 -07:00
Emil Sjolander 899adf5343 Expose flexGrow, flexShrink, and flexBasis properties
Reviewed By: javache, astreet

Differential Revision: D3785140

fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88
2016-08-30 03:13:39 -07:00