Summary:
Splits RTLExample into separate exported examples, so they can be filtered. This will help with Detox tests.
Previously the single forceRTL toggle affected multiple examples because they all share state—although the box model examples at the end had their own toggles. Now each example has its own RTL toggle so it is always available even when examples are filtered, and so the examples don't have to share state. There is still the separate forceRTL toggle that changes the setting in `I18nManager`, which affects the default setting when the page appears, as well as the direction of the "with directional meaning" pointer icon.
[General] [Changed] - Split RTLExample into separate exported examples
Pull Request resolved: https://github.com/facebook/react-native/pull/23354
Differential Revision: D14030498
Pulled By: cpojer
fbshipit-source-id: 44eb493297f6a4832b55ef2b02a93dc5c213f337
Summary:
Make Text prop types exact to catch tons of errors, including typos like in https://fb.workplace.com/groups/rn.support/permalink/2306953619353240/.
I tried to fix things when it was totally obvious what the intent was, but otherwise tried to keep the existing behavior the same, even if it meant that usage of some props was getting ignored, like `hitSlop`.
Reviewed By: TheSavior
Differential Revision: D13892999
fbshipit-source-id: 5003508a648287e4eca8055fb59da5f03bd066cc
Summary:
Running *lint* on RN found that there are some Java 8 features used without specifying Java 8 compatibility in projects. This PR adds Java 8 compatibility and fixes errors caused by Java 8 feature use. I suspend that it may be cause of many failures on older Androids, but also found that many modules/packages switched to and require Java 8.
```java
../../src/main/java/com/facebook/react/devsupport/BundleDownloader.java:167: Try-with-resources requires API level 19 (current min is 16)
../../src/main/java/com/facebook/react/devsupport/DevServerHelper.java:658: Try-with-resources requires API level 19 (current min is 16)
```
For more information https://developer.android.com/studio/write/java8-support
[Android] [Changed] - Enable Java 8
Pull Request resolved: https://github.com/facebook/react-native/pull/23295
Differential Revision: D13959096
Pulled By: cpojer
fbshipit-source-id: 0bfd0565b61a132906cf35ee55b4afcf5450f7cb
Summary:
TurboModules depend on a getConstants method. Existing ObjectiveC modules do not have this method. Therefore, I moved the contents of `constantsToExport` to `getConstants` and then had `constantsToExports` call `getConstants`.
facebook
Since all NativeModules will eventually need to be migrated to the TurboModule system, I didn't restrict this to just the NativeModules in Marketplace.
```
const fs = require('fs');
if (process.argv.length < 3) {
throw new Error('Expected a file containing a list of native modules as the third param');
}
function read(filename) {
return fs.readFileSync(filename, 'utf8');
}
const nativeModuleFilenames = read(process.argv[2]).split('\n').filter(Boolean);
nativeModuleFilenames.forEach((fileName) => {
if (fileName.endsWith('.h')) {
return;
}
const absPath = `${process.env.HOME}/${fileName}`;
const fileSource = read(absPath);
if (/(\n|^)-\s*\((.+)\)getConstants/.test(fileSource)) {
return;
}
const constantsToExportRegex = /(\n|^)-\s*\((.+)\)constantsToExport/;
const result = constantsToExportRegex.exec(fileSource);
if (result == null) {
throw new Error(`Didn't find a constantsToExport function inside NativeModule ${fileName}`);
}
const returnType = result[2];
const newFileSource = fileSource.replace(
constantsToExportRegex,
'$1- ($2)constantsToExport\n' +
'{\n' +
` return ${returnType.includes('ModuleConstants') ? '($2)' : ''}[self getConstants];\n` +
'}\n' +
'\n' +
'- ($2)getConstants'
);
fs.writeFileSync(absPath, newFileSource);
});
```
```
> xbgs -l ')constantsToExport'
```
Reviewed By: fkgozali
Differential Revision: D13951197
fbshipit-source-id: 394a319d42aff466c56a3d748e17c335307a8f47
Summary:
In https://github.com/facebook/react-native/pull/20602, I tried to make ReactActivity to extend AppCompatActivity per Google recommendation. But import failed, now ReactActivity extends FragmentActivity which is a parent class of AppCompatActivity and step forward to extend AppCompatActivity.
Pull Request resolved: https://github.com/facebook/react-native/pull/22662
Reviewed By: mdvacca
Differential Revision: D13505140
Pulled By: hramos
fbshipit-source-id: d4edc8dc5c606c45811c1deddf5727a47ad484d8
Summary:
Fixes https://github.com/facebook/react-native/issues/23108. The TabBarIOS component is scheduled to be removed from core any day now, so it's OK to remove it from our test suite.
Changelog:
----------
[iOS] [Removed] - Remove TabBarExample SST
Pull Request resolved: https://github.com/facebook/react-native/pull/23206
Differential Revision: D13864064
Pulled By: hramos
fbshipit-source-id: f65da75e2789d384dcd713a27ca5528f0faa7526
Summary:
Latest changes inside CLI now require that Metro configuration is provided when building RNTester app. This is to let CLI know that instead of looking for "react-native" under "node_modules" (that is obviously not present since we are running from source), it should check the paths provided.
When running "npm start", it finds the configuration at the root. However, when building through Xcode (e.g. "react-native bundle" or "xcodebuild" in Release scheme), it runs "react-native-xcode.sh" that works in different folder and makes Metro not detect the configuration file.
This PR explicitly sets path to the configuration via `BUNDLE_CONFIG`.
It also removes `pwd` from being prepended to all `BUNDLE_CONFIG` values. In my case, `pwd` was `/Users/grabbou` and the RNTester files where inside `/Users/grabbou/Repositories/react-native`. I was unable to point the script to correct location without making it aware of the folder structure - which is not going to work on the CI.
Pull Request resolved: https://github.com/facebook/react-native/pull/23191
Differential Revision: D13851741
Pulled By: hramos
fbshipit-source-id: d920353fd68d39468bd33bd1ad47e03b017a7727
Summary:
We have a million of inline styles in RNTester which causes a lot of noise with the lint bot in PRs. The rule makes sense for the main libraries but for RNTester it usually makes examples easier to read to just use inline styles. Also reduces lint warnings from 357 to 77.
Changelog:
----------
[General] [Changed] - Disable no-inline-styles lint rule for RNTester
Pull Request resolved: https://github.com/facebook/react-native/pull/23169
Differential Revision: D13838529
Pulled By: cpojer
fbshipit-source-id: 474e159e0b0c07bce42878db2b214b8903b49c08
Summary:
`Animated.event` not work with direct events and not bubbling events, which means it does not work with `PanResponder`, please see [Animation Caveats](https://facebook.github.io/react-native/docs/animations#caveats)
Changelog:
----------
[General] [Fixed] - Disable animation native driver in AnimatedGratuisousApp of RNTester.
Pull Request resolved: https://github.com/facebook/react-native/pull/23172
Differential Revision: D13838555
Pulled By: cpojer
fbshipit-source-id: 866bc83e780d6712ffae5964615af44a72bf998c
Summary:
In RNTester, previously the MaskedViewExample was returned as a single example record. However, within that one example there were several sub-examples. Now that we've implemented example filtering, filtering didn't really work for MaskedViewExample because it only operates on top-level examples.
There was no benefit to grouping MaskedViewExample into a single example, so this PR splits it into separate examples.
Changelog:
----------
Help reviewers and the release process by writing your own changelog entry. See http://facebook.github.io/react-native/docs/contributing#changelog for an example.
[General] [Fixed] - Fix filtering of MaskedViewExample by splitting into separate example records.
Pull Request resolved: https://github.com/facebook/react-native/pull/23168
Differential Revision: D13838524
Pulled By: cpojer
fbshipit-source-id: 21ae8228e4ce5bfc06fb1ea230163da9261cb36a
Summary:
On Android `textTransform` breaks other styles applied to the text. It seems related to the usage of `ReplacementSpan` which allows drawing the text manually but seems to throw away some changes made by other span applied to the text.
To fix it I removed the usage of `ReplacementSpan` and simply transform the text before appending it to the `Spannable` string. To make sure textTransform is inherited correctly I added it to TextAttributes which handles this.
Pull Request resolved: https://github.com/facebook/react-native/pull/22670
Differential Revision: D13494819
Pulled By: cpojer
fbshipit-source-id: 1c69591084aa906c2d3b10153b354d39c0936340
Summary: This diff upgrades the Android Support Library to use version 28.0.0
Reviewed By: cpojer
Differential Revision: D13737512
fbshipit-source-id: 7b3d9c384df0b25e5ce48e769e1ff0ac9be9f104
Summary:
Removes unused suppressions before deploying 0.91. See D13708161 for more context on why these couldn't be removed before.
I will follow up with 2 more diffs:
1. A diff that bumps the flow version in xplat and removes unused suppressions
2. A diff that adds new suppressions for 0.91
Reviewed By: samwgoldman
Differential Revision: D13720219
fbshipit-source-id: b07dd163962fed7ff27ce3e0a4a73a71c51965d9
Summary:
Applies the `thumbTintColor` prop to Sliders on iOS (which has been supported since iOS 5.0). Updates other documentation so that it is not labeled as Android-only, including the RNTester app
Pull Request resolved: https://github.com/facebook/react-native/pull/22177
Differential Revision: D13695554
Pulled By: hramos
fbshipit-source-id: 250f6574b193a37b3cd237bcf42612c3e91bf813
Summary:
iOS's `allowFontScaling` example was copied to Android. Also, I added a case illustrating that `allowFontScaling` gets inherited in nested `<Text>` scenarios. This tests the bug fix from #22917. This nested case was added to both iOS and Android.
Also, moved the comment in `TextAttributes.java` from the top of the file to the top of the class definition as requested in #22917.
Pull Request resolved: https://github.com/facebook/react-native/pull/22991
Differential Revision: D13671380
Pulled By: cpojer
fbshipit-source-id: a8aae4f051c76391e33bdbd6bdc80aff9b7de5cd
Summary: Fixes a bug introduced with the example filtering in D13561744 causing the Camera Roll example to not show any pictures
Reviewed By: JoshuaGross
Differential Revision: D13622124
fbshipit-source-id: a5863dcdd9f89ae1373910f25b38e4a322796dbe
Summary: Emily removed some magic that required InitializeCore for everything back in Sept/Oct. These tests have been broken for a long time, so it wasn't obvious that they broke.
Reviewed By: ejanzer
Differential Revision: D13601264
fbshipit-source-id: ea6ab7c8891207dad06cd062968d019a236cf8fc
Summary:
There's been a bug on iOS and iPad that the position of an action sheet using UIActionController isn't updated if the position of its anchor view changes due to rotating the device. A common scenario would be, presenting an action sheet from a right bar button item. Rotating the device will most likely change the bar button's X coordinate. The action sheets arrow would still point to the old position due to how it has been implemented so far.
I used also reduced some code duplication between `-showActionSheetWithOptions` and `-showShareActionSheetWithOptions:` while at it.
Changelog:
----------
[iOS] [Fixed] - Action Sheet position after rotation on tablet
Pull Request resolved: https://github.com/facebook/react-native/pull/22738
Differential Revision: D13582810
Pulled By: PeteTheHeat
fbshipit-source-id: a93065284b02efc41ae7378465521330a828a126
Summary:
This PR adds flow types for the RNTester examples, and updates all of the RNTester examples to match the flow type consistently.
Previously, there was a mix of static class definitions and whether or not pages exported examples or a component. Now we will always export the same way, enforced by flow types
Note: I also fixed most of the $FlowFixMe in changed components
Pull Request resolved: https://github.com/facebook/react-native/pull/22829
Reviewed By: cpojer
Differential Revision: D13563191
Pulled By: rickhanlonii
fbshipit-source-id: b697e3346a863d1b130881592b0522a96c202b63
Summary:
This PR adds filtering for e2e test examples using the new examples filter introduced in https://github.com/facebook/react-native/pull/22777
To do that we:
- Add a `testID` to `RNTesterExampleFilter` to select an example
- Refactor a few examples to export multiple examples for filtering
- Update all tests to filter by example title
Pull Request resolved: https://github.com/facebook/react-native/pull/22828
Reviewed By: TheSavior
Differential Revision: D13562664
Pulled By: rickhanlonii
fbshipit-source-id: efb0ca8050c1ca5c10d96bd77d35dd1143c3a3b3
Summary:
This PR adds filtering functionality to individual example screens of RNTester. This is useful for Detox testing of RNTester, since Detox requires elements to be visible on the screen before they can be interacted with. Instead of needing to scroll an arbitrary amount, the test can enter the name of the example to be tested, just as is done on the main screen. This will lead to simpler and more reliable E2E tests for long example screens. This PR doesn't add any automated tests using the filter; those will be added in a separate PR.
This is implemented by extracting the existing filtering functionality out of `RNTesterExampleList` into a shared `RNTesterExampleFilter` component that can be used both within `RNTesterExampleList` (the main screen) and `RNTesterExampleContainer` (the example screen).
![simulator screen shot - iphone 8 - 2018-12-24 at 08 22 46](https://user-images.githubusercontent.com/15832198/50401564-4273a300-0755-11e9-9120-9bf8fbb70261.png)
![simulator screen shot - iphone 8 - 2018-12-24 at 08 22 51](https://user-images.githubusercontent.com/15832198/50401566-44d5fd00-0755-11e9-9637-6e5ddce1c476.png)
Changelog:
----------
[General] [Added] - Added filtering to RNTester example screens
Pull Request resolved: https://github.com/facebook/react-native/pull/22777
Reviewed By: TheSavior
Differential Revision: D13561744
Pulled By: rickhanlonii
fbshipit-source-id: cb120626a8e2b8440f88b871557c0b92fbef5edc
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/22231
- Use clang instead of the deprecated gcc
- Use libc++ instead of the deprecated gnustl
- Updated gradle and android plugin version
- Fixed missing arch in local-cli template
- `clean` task should now always succeed
- `clean` task deletes build artifacts
- No need to specify buildToolsVersion. It's derived.
- Elvis operator for more readable code
Pull Request resolved: https://github.com/facebook/react-native/pull/22263
Reviewed By: hramos
Differential Revision: D13004499
Pulled By: DanielZlotin
fbshipit-source-id: da54bb744cedb4c6f3bda590f8c25d0ad64086ef
Summary:
The following tests are disabled in this PR:
- testTimersTest is failing due to undefined this.setTimeout, probably introduced back in 61346d3. Tracking a fix in https://github.com/facebook/react-native/issues/22695
- testTheTester_ExpectError is failing as RCTTestRunner is not properly passing through the error. Tracking a fix in https://github.com/facebook/react-native/issues/22697
I've added a comment regarding testWebSocketTest and how to ensure it passes locally.
This PR also fixes all remaining snapshot tests, which were failing due to the use of iPhone XS as a iOS Simulator on Circle CI. We are using iPhone 6s for SST internally, and this allows us to be consistent.
Pull Request resolved: https://github.com/facebook/react-native/pull/22720
Differential Revision: D13532788
Pulled By: hramos
fbshipit-source-id: 75681236032839bf88180611ee68826b53cc96eb
Summary:
The iOS snapshots have been out of date for months, but the failure was not caught in open source's `test_objc` job because `xcpretty` was swallowing the non-zero error code.
To fix this, I enabled recording mode in RNTesterSnapshotTests.m temporarily, and re-ran the tests in order to update the snapshots. I've also switched the test device used by Circle CI to iPhone 6s to be consistent with the snapshot tests that run internally at Facebook.
Integration tests are not fully fixed yet, but I can confirm the following tests are fixed by this diff:
```
-[RNTesterIntegrationTests testImageSnapshotTest]
-[RNTesterIntegrationTests testSimpleSnapshotTest]
-[RNTesterSnapshotTests testARTExample]
-[RNTesterSnapshotTests testLayoutExample]
-[RNTesterSnapshotTests testSliderExample]
-[RNTesterSnapshotTests testSwitchExample]
-[RNTesterSnapshotTests testTabBarExample]
-[RNTesterSnapshotTests testTextExample]
-[RNTesterSnapshotTests testViewExample]
```
I've also fixed a few shellcheck warnings in related scripts.
Reviewed By: fkgozali
Differential Revision: D13506865
fbshipit-source-id: dab985130c2ff3cb9dea19d1f87c8ee65d8c141e
Summary:
Switch E2E tests have been failing on master, although they pass locally.
Changelog:
----------
Help reviewers and the release process by writing your own changelog entry. See http://facebook.github.io/react-native/docs/contributing#changelog for an example.
[General] [Fixed] - Fix failing Switch E2E tests
Pull Request resolved: https://github.com/facebook/react-native/pull/22698
Differential Revision: D13511917
Pulled By: hramos
fbshipit-source-id: b2f5cac1927531a855699e34e1a37036773f0aad
Summary:
Fixes two types of warnings that occur when running E2E tests:
1. A deprecation warning from Jest: 'Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths.'
2. YellowBox warnings when running the app in debug mode, about components that are deprecated and that require main queue setup.
By fixing these warnings, we increase contributors' confidence that things are working correctly, and draw attention to any warnings that they _should_ pay attention to, if and when they arise.
I feel confident that we should hide the deprecated-component warnings; we _want_ to use these components because we want them to be tested, until they're removed entirely.
For the warning "Module RCTImagePickerManager requires main queue setup", if that's something that can be fixed with reasonable effort in the RNTester code then I think it would be better to do so. Otherwise, I think it is good to hide the warning, because this is a condition we expect: it's not something a contributor should pay attention to.
Pull Request resolved: https://github.com/facebook/react-native/pull/22621
Differential Revision: D13468553
Pulled By: hramos
fbshipit-source-id: 1a5952087dd6fcc9ba08ff7a60ad9f5b075bef57
Summary:
Previously the RNTester app saved what screen you were on and what filter text was entered into the initial screen. This made e2e testing complex, as each test needed to manually restore the state to the home screen. If the state ever got out of sync with the test's expectations, it could lead to multiple failed tests.
There is still one specific component that uses persistence: `RNTesterSettingSwitchRow`. Persistence can be removed from this component next time tests for it are updated. As a result, `RNTesterStatePersister` is not yet entirely removed from the app.
Pull Request resolved: https://github.com/facebook/react-native/pull/22596
Differential Revision: D13413457
Pulled By: cpojer
fbshipit-source-id: 3faa26a94139397b4bce6b62ff43e9c2f870b145
Summary: This removes the remaining references to `local-cli`. We already have a `cli.js` file on the root that was just forwarding to the local-cli folder, so I removed that. It also seems that `setupBabel.js` is no longer necessary in RN.
Reviewed By: TheSavior
Differential Revision: D13396218
fbshipit-source-id: a945cb91dae39c4b58c5cabcca6b0f0328fc4717
Summary:
Previously the e2e test for Butto looked up elements by label. This can be fragile, and based on my understanding from TheSavior we would prefer to use testIDs. This also sets a consistent pattern we can point future contributors to, to follow.
Note that we are still looking up elements in the alerts shown by label. I haven't yet looked into whether it would be possible to add testIDs to alerts; it might be too complex to be worth it.
Pull Request resolved: https://github.com/facebook/react-native/pull/22593
Differential Revision: D13410799
Pulled By: TheSavior
fbshipit-source-id: 4bda80f4b8e7fe3ef17cd33209ec86d9183fd5e9
Summary:
Fixes#22578
Currently the only `textContentType` values that work are: `username`, `password`, `location`, `name` and `nickname`. This is due to the strings provided by React Native not matching up with the underlying string constants used in iOS (with the exception of the aforementioned types). Issue #22578 has more detail examples/explanation.
Pull Request resolved: https://github.com/facebook/react-native/pull/22579
Differential Revision: D13402177
Pulled By: shergin
fbshipit-source-id: 55f4a2029cd3ea1fb4834e9f56d2df5a05b31b4e
Summary:
Adds some initial tests for Touchable*. It only tests the first screen worth of examples; in a separate PR I'll work on an alternate way to "scroll" to individual examples in tests, before I add tests for the rest of the Touchable examples.
On the live stream where I began writing these tests, I reorganized the "Touchable feedback examples" to the top of the list so it would be on-screen for testing. I didn't include this reorganization or test in this PR; that can be added in once the "alternative to scrolling" is added in, to avoid having to reorganize.
Changelog:
----------
[General] [Added] - Add E2E tests for Touchable
Pull Request resolved: https://github.com/facebook/react-native/pull/22570
Differential Revision: D13400348
Pulled By: TheSavior
fbshipit-source-id: 821af135296049090427a16472cc14dabeb10ab4
Summary:
Adds a Detox configuration and instructions for running the app in development mode in Detox. This speeds up developing tests, because changes to production code don't require a full rebuild.
Pull Request resolved: https://github.com/facebook/react-native/pull/22572
Differential Revision: D13396883
Pulled By: cpojer
fbshipit-source-id: 186cc8d75eccae411b602cb0f68f0e11856e0743
Summary:
This PR adds e2e tests for the Picker and DatePicker components.
While writing these tests, I also found and fixed two bugs where we wern't passing the `testID` down to the native components, so detox couldn't look them up. This confirms what was mentioned by rotemmiz [here](https://github.com/wix/Detox/issues/798#issuecomment-401412276)
Pull Request resolved: https://github.com/facebook/react-native/pull/22537
Reviewed By: cpojer
Differential Revision: D13371307
Pulled By: rickhanlonii
fbshipit-source-id: a4dfcdb5913645bceca0c7353328eeb9ad0f6558
Summary:
Related to #22100
Enhance TouchableWithoutFeedback with press and target event types.
There are still work to do to update `UNSAFE_componentWillReceiveProps` and `touchableGetHitSlop` to make Flow not complain about `DeprecatedEdgeInsetsPropType` inexact type.
Pull Request resolved: https://github.com/facebook/react-native/pull/22479
Reviewed By: RSNara
Differential Revision: D13310764
Pulled By: TheSavior
fbshipit-source-id: 9002e542378491fb800c8e81c63f4fbe125b563c
Summary: This is one more step to remove `fbjs` from `react-native-github`. This changes both the internal and external code to use `invariant` from zertosh instead of the copy in fbjs.
Reviewed By: yungsters
Differential Revision: D13195941
fbshipit-source-id: 73564ca1715110e7da9c7ef56dc57374d61377e0
Summary:
Detox was failing because of build errors due to the new xcode10 build system. These errors were fixed by RSNara in b7349f9857 but this callsite was missed.
Pull Request resolved: https://github.com/facebook/react-native/pull/22468
Reviewed By: RSNara
Differential Revision: D13287386
Pulled By: TheSavior
fbshipit-source-id: 8a2df9801c69d851eabe7074ffc12b29c03a636a
Summary:
Adding an “UNSAFE_” prefix to `componentWillMount`.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
- [x] yarn test
- [x] yarn flow
- [x] yarn flow-check-ios
- [x] yarn flow-check-android
[General] [Fixed] - adding an UNSAFE_ prefix
Pull Request resolved: https://github.com/facebook/react-native/pull/22125
Differential Revision: D13237831
Pulled By: mmmulani
fbshipit-source-id: b4ca1e4628f93e89fd5680c40b0e3f7c7db6ad38
Summary: Use array+map like other examples for DRY.
Reviewed By: TheSavior
Differential Revision: D13222132
fbshipit-source-id: 15171e496eaef8794c02e853950f666d77372923
Summary:
Modified the ESLint configuration to only enable the Jest environment for files we consider now tests, which are files with the `-test.js` suffix under `__tests__`. Also enabled some globals for test helpers (any file under `__tests__`).
This will allow us to catch misspelled tests, while allowing test helpers to use most Jest APIs.
Also disabled the Jasmine environment so people stop using Jasmine APIs and we can rollout Circus soon.
Reviewed By: aaronabramov
Differential Revision: D13199591
fbshipit-source-id: 12a32cf5835630b9987452b0c33d3f8085001689
Summary:
[Folly upgrade](a70625abd7) introduced changes that have to be applied to `Install Third Party` script in order to use `New build system` from Xcode 10. Unfortunately, this might happen again if someone changes folly. Also removes non-existent files from folly podspec.
Pull Request resolved: https://github.com/facebook/react-native/pull/22394
Differential Revision: D13192463
Pulled By: hramos
fbshipit-source-id: ea0eeb6e1e7f6d7dfcdb6d1dee28b1a640ee7097
Summary:
Related to #22100
Enhance TextInput with callback event types.
This is a first draft and I will need more help on this one. Flow checks are successful now but I am not sure types are accurate though.
Moreover I find my separation approach kind of dirty for callback event types.
- All flow tests succeed.
[GENERAL] [ENHANCEMENT] [TextInput.js] - Flow types
[GENERAL] [ENHANCEMENT] [TextInputExample.android.js] - Fixing Flow types
[GENERAL] [ENHANCEMENT] [TextInputExample.ios.js] - Fixing Flow types
[GENERAL] [ENHANCEMENT] [XHRExampleFetch.js] - Fixing Flow types
Pull Request resolved: https://github.com/facebook/react-native/pull/22250
Reviewed By: TheSavior
Differential Revision: D13104820
Pulled By: RSNara
fbshipit-source-id: 3fbb98d0ec2b62be676f71ae1053933d9c78485e
Summary:
Constructing `Buffer` using the constructor [[https://nodesource.com/blog/understanding-the-buffer-deprecation-in-node-js-10/ | has been deprecated in Node 10 due to security considerations]].
This is a simple and straightforward conversion.
Reviewed By: mjesun
Differential Revision: D13080655
fbshipit-source-id: 100d8f28c3b255422b26e820aaadcc4f32f41e0d
Summary:
Fixes `react-native/no-inline-styles` warning for several examples. I'm limiting the size of this PR to make it simpler to review.
Pull Request resolved: https://github.com/facebook/react-native/pull/22123
Reviewed By: RSNara
Differential Revision: D12929701
Pulled By: TheSavior
fbshipit-source-id: 7a976f2208b557fcfda46d5b586b30652c550eb2
Summary:
Related to #21581
This PR was already opened here https://github.com/facebook/react-native/pull/21600 but seems to be inactive.
Remove createReactClass from ProgressBarAndroidExample.
- `yarn run flow` && `yarn run flow-check-android` succeed.
- RNTester app ProgressBarAndroidExample on Android.
[GENERAL] [ENHANCEMENT] [ProgressBarAndroidExample.android.js] - rm createReactClass
Pull Request resolved: https://github.com/facebook/react-native/pull/21874
Reviewed By: TheSavior
Differential Revision: D12827689
Pulled By: RSNara
fbshipit-source-id: 46c70ea67dddf5d928fe936a28ef4a0a929d127f
Summary:
Fixes lots of ESLint warnings. Many of them where in PR #20877 by janicduplessis which requested to split the linting fixes from configuration and package changes.
I solved only the issues that I was most certain about but I would love to get hands on all of them with a little bit of input.
Pull Request resolved: https://github.com/facebook/react-native/pull/22062
Differential Revision: D12889447
Pulled By: TheSavior
fbshipit-source-id: 35f7a08104a5b859c860afdde4af2b32c0685c50
Summary: Adds copyright headers to all files that are missing them.
Reviewed By: hramos
Differential Revision: D12837494
fbshipit-source-id: 6330a18919676dec9ff2c03b7c9329ed9127d930
Summary:
Fixes#20302 (For iOS)
Note:
------
1. Checked the changes did not break CocoaPods integration.
2. The change for glog copying header into exported/ is to prevent build break for folly.
`folly/detail/Demangle.h` will try to use libstdc++'s demangle.h. Unfortunately, glog also has a demangle.h in source code. So I copy exported headers and only search headers in exported/ folder during build.
Pull Request resolved: https://github.com/facebook/react-native/pull/21976
Reviewed By: hramos
Differential Revision: D12818131
Pulled By: fkgozali
fbshipit-source-id: b3c637d09d1b3adde0ea15c82eb56e28f846885b
Summary:
This diff just builds on top of the open source PR:
1. I add a bunch of extra flow typings to the file.
2. I refactor some of the JavaScript code.
Reviewed By: TheSavior
Differential Revision: D10351693
fbshipit-source-id: a6d828518150c11d66a179c5c3fe835cc80a8dfb
Summary:
Marc deleted a few files from react-native-github, so I removed them from the RNTester XCode project. I also included the files he created, and created new targets: `jsiexecutor-tvOS`, `jsiexecutor`, `jsi`, `jsi-tvOS`.
**Note:** The tvOS build of RNTester is broken in this diff because of a few `WKWebView` changes I landed earlier. D9844322 includes the fix.
Reviewed By: axe-fb
Differential Revision: D9875409
fbshipit-source-id: 31a9f241a524de91e78dfff0555aec5d1373d789
Summary:
This diff includes a few changes to the `React.podspec` file:
1. Introduce a `jsi` spec for code inside the `ReactCommon/jsi` folder. This depends on the JavaScriptCore framework.
2. Introduce a `jsiexecutor` spec for the code inside the `ReactCommon/jsiexecutor` folder. These files depend on files in `ReactCommon/cxxreact`, `ReactCommon/jsi`, and Folly.
3. Since RCTCxxBridge.mm now depends on `JSIExecutor`, we need to have the `CxxBridge` spec depend on the `jsiexecutor` spec.
Reviewed By: hramos
Differential Revision: D9820323
fbshipit-source-id: 0c96d027eed30ee47b6ee0d2d86cd6b1ad7a5887
Summary:
With this, we send the correct x position when using center or right aligned text. In order to accomplish this though, we have to pass the text alignment into the Layout object that we create.
Also update RNTester to allow us to try different alignments.
Reviewed By: sahrens
Differential Revision: D10316494
fbshipit-source-id: 11c7d2a59e636528f12211168acb46f16b54a126
Summary:
**Problem:**
When you type an invalid regex into the input field of the RNTester app, it crashes. What's worse is that it remembers the input string so refreshing the view doesn't get rid of the error. Observe:
https://pxl.cl/jdm3
Reviewed By: yungsters
Differential Revision: D10349249
fbshipit-source-id: aab5977bd47271e9a4ff6202c93b47550da778d2
Summary: Looks like we have to explicitly require the BuildConfig package if we want to use it.
Reviewed By: mdvacca
Differential Revision: D10275883
fbshipit-source-id: 4fbce3085e1ac6486a782b2bc0e335b7e48fe8de
Summary:
Related to #21581 .
Removed createReactClass from the RNTester/js/ImageExample.js
The diff of this PR is a little big. If there are any problems, please teach me �
- [x] npm run prettier
- [x] npm run flow-check-ios
- [x] npm run flow-check-android
[GENERAL] [ENHANCEMENT] [RNTester/js/ImageExample.js] - remove createReactClass dependency
Pull Request resolved: https://github.com/facebook/react-native/pull/21602
Reviewed By: TheSavior
Differential Revision: D10304857
Pulled By: RSNara
fbshipit-source-id: 339b1220828c6218cad0d09c7a5034a61e623bc6
Summary:
`legacyImplementation` has caused a warning in FlatList for a long time. FlatList supports the use cases of the legacy implementation and should be adopted.
We will be removing the deprecated MetroListView and ListView components to reduce bundle sizes and the complexity of the codebase.
Reviewed By: yungsters
Differential Revision: D10245824
fbshipit-source-id: 60ff0d54974649b57bac9f9f29b769f34ca2701c
Summary:
Related to #21485.
Removed `TimerMixin` from the `TouchableWithoutFeedback` component since it is currently not used.
Added tests cases for `TouchableWithoutFeedback` to check for any runtime issues.
Pull Request resolved: https://github.com/facebook/react-native/pull/21493
Differential Revision: D10219098
Pulled By: RSNara
fbshipit-source-id: d9517b2bd5b72b0450fa864f3556673ae3181552
Summary:
Related to #21485.
Removed TimerMixin from the `RNTester/js/ProgressViewIOSExample.js` screen since it is currently not used.
- [x] `npm run prettier`
- [x] `npm run flow-check-ios`
- [x] `npm run flow-check-android`
- [x] runtime tests using `ProgressViewIOSExample` on Android and iOS
**RNTester steps**
- [x] Run RNTester.
- [x] Navigate to `ProgressViewIOSExample` and check if the animations are executed correctly and without lag.
[GENERAL] [ENHANCEMENT] [RNTester/js/ProgressViewIOSExample.js] - remove TimerMixin dependency
Pull Request resolved: https://github.com/facebook/react-native/pull/21500
Reviewed By: TheSavior
Differential Revision: D10218366
Pulled By: RSNara
fbshipit-source-id: b44a0bbb50f6b0e85f406904131804eace941335
Summary:
Related to #21485.
Removed TimerMixin from the `RNTester/js/ProgressBarAndroidExample.android.js` since it is currently not used.
- [x] npm run prettier
- [x] npm run flow-check-ios
- [x] npm run flow-check-android
In progress 🙇
[GENERAL] [ENHANCEMENT] [RNTester/js/ProgressBarAndroidExample.android.js] - remove TimerMixin dependency
Pull Request resolved: https://github.com/facebook/react-native/pull/21501
Reviewed By: TheSavior
Differential Revision: D10218375
Pulled By: RSNara
fbshipit-source-id: c4c12f65855452bc2485f034a0560afd204512f4
Summary:
Update several files to use the proper copyright header:
```
// Copyright (c) Facebook, Inc. and its affiliates.
//
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
```
In the case of Xcode project files, I used the shortform version, `Copyright (c) Facebook, Inc. and its affiliates.`
Reviewed By: axe-fb
Differential Revision: D10114529
fbshipit-source-id: a1f2d5a46d04797c1cf281ea9ab80d3a2caa6fb4
Summary:
This PR removes the remaining proptypes from `SwipeableListView`, and cleans up its flow types a bit. Its RNTester example has also been cleaned up, and turned into an ES6 class.
`ListView`'s props have been exported so this can use it.
Pull Request resolved: https://github.com/facebook/react-native/pull/21298
Reviewed By: TheSavior
Differential Revision: D10085505
Pulled By: RSNara
fbshipit-source-id: 20300d582f33b83dfc13cc5ddc71de5ab44bb90b
Summary:
This PR is the result of running `yarn prettify` on the codebase - which caught a few files that were not prettified. This will make instructing people to run prettify a bit less complicated, since unrelated files will not show up in diffs.
Pull Request resolved: https://github.com/facebook/react-native/pull/21327
Differential Revision: D10046057
Pulled By: TheSavior
fbshipit-source-id: 2c771a3c758c72816c707e32ee2f4587e466f277
Summary:
Upgrade React Native to Android SDK 27 again, following the reversal in D9886607 (68c7999c25).
The SDK 27 is actually available internally in an alternate location that is suitable for use cases like React Native's. For future reference, SDK 28 is also available for use in this location.
Reviewed By: axe-fb
Differential Revision: D9929066
fbshipit-source-id: 9413f891d5587293a30544351340e9407a2dce55
Summary:
Go back to using compileSdkVersion 26 and targetSdkVersion 26, temporarily. We can re-add this once Android SDK 27 becomes available in Facebook's internal repository.
The Android SDK Build Tools 27.0.3 **are** available, so we can continue using those.
Reviewed By: axe-fb
Differential Revision: D9886607
fbshipit-source-id: 6c1c9c1e1309c3a0483cc4c0bd8dcb4a5f29fc7e
Summary: This diff adds a new property in ReactWebView to be able to configure allowFileAccess
Reviewed By: achen1
Differential Revision: D9789466
fbshipit-source-id: 39d042ac6ef69e44f006a4c4b0c2dd900f84dbc9
Summary: In some cases, the custom implementation of this prop is undesirable, so this allows to turn it off.
Reviewed By: yungsters
Differential Revision: D9759228
fbshipit-source-id: 4f61cd900c2da9046977c11a61606a4f5f961177
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
Summary:
@public
Just movin' stuff around.
This shouldn't render any actual metrics yet on Android, need native changes for that.
Reviewed By: achen1
Differential Revision: D9584669
fbshipit-source-id: 4b6169b14d1f2053258191f67e1f361a4b714a8e
Summary:
Legacy navigator impl. There are other alternatives that should be used instead.
Part of the slimmening effort as described here: https://github.com/react-native-community/discussions-and-proposals/issues/6
Reviewed By: TheSavior
Differential Revision: D9677824
fbshipit-source-id: 24ae500751d2a8c398f246d36604a58f0b3c113b
Summary: This adds a callback for <Text> to get metrics about the rendered text. It's divided by line but that could be changed to "fragments" (which makes more sense for multi-lingual). Right now by line is convenient as you frequently want to know where the first and last line end (though we could make this work with fragments I suppose).
Reviewed By: shergin
Differential Revision: D9440914
fbshipit-source-id: bb011bb7a52438380d3f604ffe7019b98c18d978
Summary:
While the original reason for this change was because of an issue #20780, with further investigation I concluded that the issue is till present for this combo of versions:
glog - 0.3.5
google-cast-sdk - 4.3.1
Downgrading google-cast-sdk to 4.3.0 fixed the build issue.
Release Notes:
--------------
Updated glog version from 0.3.4 to 0.3.5 for iOS
[IOS] [ENHANCEMENT] [GLOG]
Pull Request resolved: https://github.com/facebook/react-native/pull/20811
Differential Revision: D9485221
Pulled By: hramos
fbshipit-source-id: 65caf0839588384a5229a6165506dc6ef62e5fc5
Summary:
Bump android gradle plugin to 3.1.4. We have been stay to 2.x too long. With 3.x we can have instant run and great performance and new features brought by google.
Also thanks to CFKevinRef great pr to make this possible.
pass all current ci. I have also tested RNTester release version works without crash.
https://github.com/facebook/react-native/pull/17967.
[GENERAL] [ANDROID] [FEATURE] - bump android gradle to 3.1.4
Pull Request resolved: https://github.com/facebook/react-native/pull/20767
Differential Revision: D9437576
Pulled By: hramos
fbshipit-source-id: 6084056a1390582a75a879918f2538b0480f6299
Summary:
I found that android support library 27.x (874cca1ac2) requires compileSdkVersion to be 27. Also found that many FB projects use SDK 27.
Pull Request resolved: https://github.com/facebook/react-native/pull/20777
Differential Revision: D9478431
Pulled By: hramos
fbshipit-source-id: ca100f6b5b39e7d112926124423f9510a0efc291
Summary:
The API was available only on Android (with no mention to that effect in the docs, AFAICT).
This commit adds a simple iOS implementation based on NSURLCache. It should be possible to
query the decoded image cache as well to provide higher fidelity (i.e. "disk", "memory",
"decoded") if the caller passes size, scale, etc. in addition to the image URL, but it's
probably not worth the complexity. The assumption is that callers are interested in the
durability rather than performance aspect of the returned information.
Tested with RNTester on iPhone emulator.
[IOS] [ENHANCEMENT] [Image] - Implemented queryCache
Pull Request resolved: https://github.com/facebook/react-native/pull/18782
Differential Revision: D9411533
Pulled By: hramos
fbshipit-source-id: b430263959bb5f9b8ed9e28bb0a95f8879df881a
Summary: The controller you requested could not be found.
Reviewed By: gabelevi
Differential Revision: D9390604
fbshipit-source-id: 68ba89ba197f74322e4c85c3bfc1f334fb740852
Summary: Locking down view style so that invalid styles can't be passed into View.
Reviewed By: yungsters
Differential Revision: D9309097
fbshipit-source-id: 69e7e3c5626609cfd47c167027a55470c42228c8
Summary:
.android.js files may be checked (when the next version of flow is released) by using `flow start --flowconfig-name .flowconfig.android` and `flow status --flowconfig-name .flowconfig.android`
This diff adds suppressions to the errors that are in .android.js files, which flow does not check right now.
When site is `react_native_fb` or `react_native_android_fb`, error will be suppressed when checking with .flowconfig.android
When site is `react_native_fb` or `react_native_ios_fb`, error will be suppressed when checking with .flowconfig.
You can use `react_native_fb` when it should be suppressed for both.
The controller you requested could not be found.
Reviewed By: TheSavior
Differential Revision: D9122178
fbshipit-source-id: 0ec9d3cae3d887f58645e6585b2a3f6c3889b13e
Summary:
ag -L --ignore __snapshots__ 'flow strict|noflow|generated|The controller you requested could not be found.' | ag '\.js$' | xargs ag -l 'flow' | sort > ~/temp
cat ~/temp | xargs ag -L 'flow strict' | xargs sed -i '' 's/flow$/flow strict-local/'
until flow check; do flow check --json | jq -r '.errors[].message[0].path' | sort | uniq | xargs hg revert; done
allow_many_files
The controller you requested could not be found.
The controller you requested could not be found.
Reviewed By: TheSavior
Differential Revision: D9004573
fbshipit-source-id: 936bd5741706b781be06bf08b6ad805a69407dfd
Summary:
…s a crash in Text Example of RNTester.
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
Pull Request resolved: https://github.com/facebook/react-native/pull/20558
Differential Revision: D9235009
Pulled By: hramos
fbshipit-source-id: 23ed28f7c8b84f509d35ac0fe7aa72c183a9ab11
Summary:
Flow doesn't check .android.js files yet anyway.
I'm going to be adding suppressions in a followup diff. It would be nice to not have >1k suppressions saying that we can't do certain things in `flow strict` when we don't even typecheck with regular `flow` just yet
I ran these commands to produce this diff:
`find . -name '*.android.js' -exec sed -i 's/flow strict-local/flow/g' {} +`
`find . -name '*.android.js' -exec sed -i 's/flow strict/flow/g' {} +`
Followed https://unix.stackexchange.com/questions/112023/how-can-i-replace-a-string-in-a-files to do it.
The controller you requested could not be found.
Reviewed By: TheSavior
Differential Revision: D9143783
fbshipit-source-id: e9af4fe695ebdba4db4083de1697cc248d48eb0d
Summary:
I added three examples to the RN Tester in order to test the new accessibility props I've added to the accessibility API.
These examples test the following properties on views and touchables:
* AccessibilityRole
* AccessibilityStates
* AccessibilityHint
Reviewed By: PeteTheHeat
Differential Revision: D9167874
fbshipit-source-id: 4971b9ae43ad4f35c6be7e8548cc31393c3f0a33
Summary:
Introduces warnings to `Switch` when the deprecated props are being used.
See D9081343 for more details on the specific prop changes.
Reviewed By: blairvanderhoof
Differential Revision: D9081451
fbshipit-source-id: 7f997fc97d316038f0917d2540b982bd9cf34d03
Summary:
@public
This should fix#18403.
When the user is inputting in Chinese/Japanese with <TextInput> in a controlled manner, the RCTBaseTextInputView will compare the JS-generated attributed string against the TextInputView attributed string and repeatedly overwrite the TextInputView one. This is because the native TextInputView will provide extra styling to show that some text is provisional.
My solution is to do a plain text string comparison at this point, like how we do for dictation.
Expected behavior when typing in a language that has "multistage" text input: For instance, in Chinese/Japanese it's common to type out the pronunciation for a word and then choose the appropriate word from above the keyboard. In this model, the "pronunciation" shows up in the text box first and then is replaced with the chosen word.
Using the word Japan which is written 日本 but first typed as にほん. It takes 4 key-presses to get to 日本, since に, ほ, ん, are all typed and then 日本 is selected. So here is what should happen:
1. enter に, onChange fires with 'に', markedTextRange covers 'に'
2. enter ほ, onChange fires with 'にほ', markedTextRange covers 'にほ'
3. enter ん, onChange fires with 'にほん', markedTextRange covers 'にほん'
4. user selects 日本 from the menu above the keyboard (provided by the keyboard/OS), onChange fires with '日本', markedTextRange is removed
previously we were overwriting the attributed text which would remove the markedTextRange, preventing the user from selecting 日本 from above the keyboard.
Cheekily, I've also fixed an issue with secure text entry as it's the same type of problem.
Reviewed By: PeteTheHeat
Differential Revision: D9002295
fbshipit-source-id: 7304ede055f301dab9ce1ea70f65308f2a4b4a8f
Summary:
ag -L --ignore __snapshots__ 'flow strict$|noflow|generated|The controller you requested could not be found.' | ag '\.js$' | xargs ag -l 'flow' | sort > ~/temp
cat ~/temp | xargs ag -L 'flow strict' | xargs sed -i '' 's/flow$/flow strict/'
cat ~/temp | xargs ag -L 'flow strict$' | xargs sed -i '' 's/flow strict-local$/flow strict/'
until flow; do flow check --json | jq -r '.errors[].message[0].path' | sort | uniq | xargs hg revert; done
allow_many_files
The controller you requested could not be found.
The controller you requested could not be found.
Reviewed By: yungsters
Differential Revision: D9003523
fbshipit-source-id: d0c9fbfe3c32e65d57819fa040d06cd6ebbd59cc
Summary:
Previously, I created two props, `accessibilityRole` and `accessibilityStates` for view. These props were intended to be a cross-platform solution to replace `accessibilityComponentType` on Android and `accessibilityTraits` on iOS.
In this stack, I ran a code mod to replace instances of the two old properties used in our codebase with the new ones.
For this diff, I did a search for the few remaining uses of `accessibilityTraits` that was not caught by my script or the previous diff in the stack, and I manually changed them to `accessibilityRole` and `accessibilityStates`.
Changes in this diff generally followed this pattern:
Before:
```
function accessibilityTraits(props: Props): Array<string> {
const traits = ['button'];
if (props.selected) {
traits.push('selected');
}
return traits;
}
<AdsManagerTouchableHighlight
accessibilityTraits={accessibilityTraits(this.props)}
```
After:
```
function accessibilityStates(props: Props): Array<AccessibilityState> {
const states = [];
if (!props.enabled) {
states.push('disabled');
}
if (props.checked) {
states.push('selected');
}
return states;
}
<AdsManagerTouchableHighlight
accessibilityRole="button"
accessibilityStates={accessibilityStates(this.props)}
```
Reviewed By: PeteTheHeat
Differential Revision: D8944741
fbshipit-source-id: 4b309d9c858e7e831fbf971aca2f546df7a1431d
Summary:
Previously, I created two props, `accessibilityRole` and `accessibilityStates` for view. These props were intended to be a cross-platform solution to replace `accessibilityComponentType` on Android and `accessibilityTraits` on iOS.
In this stack, I ran a code mod to replace instances of the two old properties used in our codebase with the new ones.
For this diff, I did a search for all the remnant uses of `accessibilityComponentType` that was not caught by my script, and I manually changed them to `accessibilityRole` and `accessibilityStates`. If the same prop also set `accessibilityTraits` I also removed that here because the two new props works on both platforms.
It was difficult to write a script for this, because most of them were contextual changes.
Out of the contextual changes, most of them followed one of these two patterns:
Before:
```
const accessibilityComponentType = 'button';
const accessibilityTraits = ['button'];
if (this.props.checked) {
accessibilityTraits.push('selected');
}
if (this.props.disabled) {
accessibilityTraits.push('disabled');
}
contentView = (
<AdsManagerTouchableHighlight
accessibilityComponentType={accessibilityComponentType}
accessibilityTraits={accessibilityTraits}
```
After:
const accessibilityRole = 'button';
const accessibilityStates = [];
if (this.props.checked) {
accessibilityStates.push('selected');
}
if (this.props.disabled) {
accessibilityStates.push('disabled');
}
contentView = (
<AdsManagerTouchableHighlight
accessibilityRole={accessibilityRole}
accessibilityStates={accessibilityStates}
Before:
```
<PressableBackground
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityTraits={this.props.accessibilityTraits}
```
After:
```
<PressableBackground
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityRole={this.props.accessibilityRole}
accessibilityRole={this.props.accessibilityStates}
```
In addition to changing the props on the components,
Another fix I had to do was to add props accessibilityRole and accessibilityStates to components that don't directly inherit properties from view including text input and touchables.
Reviewed By: PeteTheHeat
Differential Revision: D8943499
fbshipit-source-id: fbb40a5e5f5d630b0fe56a009ff24635d4c8cc93
Summary:
This adds the accessibilityHint for View, Text and Touchable* on iOS.
The accessibilityHint provides some more information about an element
when the accessibilityLabel is not enough.
The accessibilityHint is a core accessibility property on iOS.
From https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint:
> An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
Related issue: https://github.com/facebook/react-native/issues/14706
The npm scripts `test`, `flow`, `lint` and `prettier` are satisfied.
I added a couple of examples to the RNTester app. The Accessibility Inspector on Mac helps debugging accessibility stuff on a simulator, but it does not show the accessibilityHint. Therefore I tested the RNTester app on an iPhone 8 device using VoiceOver to verify the hint functionality. It works fine, and I've tested disabling and enabling "read hints" in the VoiceOver settings on the phone.
https://github.com/facebook/react-native-website/pull/222
[IOS][FEATURE][Accessibility] - Add accessibilityHint for View, Text, Touchable* on iOS
Closes https://github.com/facebook/react-native/pull/18093
Reviewed By: hramos
Differential Revision: D7230780
Pulled By: ziqichen6
fbshipit-source-id: 172ad28dc9ae2b67ea256100f6acb939f2466d0b
Summary: There are several cases for creating an animated implementation of FlatList or SectionList (e.g. passing Animated.Event for onScroll with useNativeDriver enabled, see FlatListExample or SectionListExample), so we might as well add them to the exports.
Reviewed By: sahrens
Differential Revision: D8886446
fbshipit-source-id: 4b207500ea4d8d10de8c1b2639a5f492bc62e560
Summary:
Original commit changeset: 0b0b3a2d7b80
This constant is still in use at Facebook. Its removal has been pushed to sometime in the future.
Reviewed By: mdvacca
Differential Revision: D8721213
fbshipit-source-id: d1197c96804e4d2dc96be27421e5248a2394cdac
Summary:
Original commit changeset: 0b0b3a2d7b80
Reverting D8714400 which removed the `isIPhoneX_deprecated` flag, which is still widely used across the RN codebase https://fburl.com/biggrep/16jg5bzn
Reviewed By: hramos
Differential Revision: D8743401
fbshipit-source-id: cfc44bdd8019eda41e67ca573b20be417d121d12
Summary:
Cleanup the `isIPhoneX_deprecated` constant which was said to be removed by June 1st 2018.
Closes https://github.com/facebook/react-native/pull/19920
Differential Revision: D8714400
Pulled By: hramos
fbshipit-source-id: 0b0b3a2d7b8098baf0474afea230780c79b2fe14
Summary:
Improves the examples in `ViewExample.js` that tests overflow behavior. Notable:
- Test view flattening behavior by setting `overflow` on views that only have other layout-only styles.
- Test the default behavior when `overflow` is not set at all.
Reviewed By: achen1
Differential Revision: D8690560
fbshipit-source-id: 6320ef51305952d13bf5724b369651fdfd32ff21
Summary: Minor cleanup of ViewExample.js in the RNTester.
Reviewed By: sahrens
Differential Revision: D8690133
fbshipit-source-id: d034f6d215679dac7f19fab90729bb7e7ef39edd
Summary:
This PR sets gradle targetSdkVersion to 26, which will satisfy new requirements from Play Store. Also removed redundant config from manifest files.
Closes https://github.com/facebook/react-native/pull/19944
Differential Revision: D8679682
Pulled By: hramos
fbshipit-source-id: 5c900d47be1d8b81ce340e38a05d9b309da143c3
Summary:
use same signing config for debug build
pass all current ci.
none
[GENERAL] [INTERNAL] [RNTester] - use same signing config for debug build .
Closes https://github.com/facebook/react-native/pull/19760
Differential Revision: D8623409
Pulled By: hramos
fbshipit-source-id: 420842db3f954101ee8f771aaf0b021bea385741
Summary:
This will bump android build tools to 26.0.3, and will remove warning about newer version of build tools in Android Studio, thus improve developer experience.
Closes https://github.com/facebook/react-native/pull/19831
Differential Revision: D8620094
Pulled By: hramos
fbshipit-source-id: fa1c6739bb7556736c1b323acea88fe87e82f4d7
Summary: Need to test a potential issue with Animated.Image on Android. Adding a RNTester example to exercise it.
Reviewed By: yungsters
Differential Revision: D8559440
fbshipit-source-id: 4319d958de146c177cb0bd4b84679b773ce50833
Summary:
@public
A few people have been complaining, including me, that when we compile a react native project, there are a lot of warnings from xcode, suggesting to update the project build settings to the new recommendations.
I took the liberty to actually update the xcode projects, so we can finally have these gone, as well as replace some deprecated methods with the new suggested ones.
[IOS] [MINOR] [Xcode] - updated the Xcode projects with the latest suggestions from Xcode 9.3, and replaced a few deprecated methods of iOS with their new replacements.
Closes https://github.com/facebook/react-native/pull/19574
Reviewed By: shergin
Differential Revision: D8530135
Pulled By: hramos
fbshipit-source-id: b9c9ede0e07760cb2207caa6b468bd5c241848dc
Summary:
A few people have been complaining, including me, that when we compile a react native project, there are a lot of warnings from xcode, suggesting to update the project build settings to the new recommendations.
I took the liberty to actually update the xcode projects, so we can finally have these gone, as well as replace some deprecated methods with the new suggested ones.
I made two react native projects, one with the regular react native and the other one using this branch.
Left is before, right is after:
![screen shot 2018-06-05 at 15 44 34](https://user-images.githubusercontent.com/100233/40979899-6aba12da-68d7-11e8-8630-6c3009b6dc24.png)
[IOS] [MINOR] [Xcode] - updated the Xcode projects with the latest suggestions from Xcode 9.3, and replaced a few deprecated methods of iOS with their new replacements.
Closes https://github.com/facebook/react-native/pull/19574
Differential Revision: D8489006
Pulled By: hramos
fbshipit-source-id: 2922b2e76aca6883c4f5d04e9c511b9fc1029583
Summary:
Suppress lint errors in Dialog module. remove abortOnError=false.
This might hide future problems, so removing it
``` gradle
lintOptions {
abortOnError false
}
```
Builds locally just fine. But CI is failing for unknown reasons. https://circleci.com/gh/dulmandakh/react-native/265
RNTester will built without errors
Closes https://github.com/facebook/react-native/pull/19740
Differential Revision: D8450600
Pulled By: hramos
fbshipit-source-id: faf508a0c546af18a05ee224628f88b02a38ab9f
Summary:
* Current ci is missing an important part to test the whole part. With this we can make sure the js and android part compiles.
* Ensure the current android proguard rules is okay.
The `my-release-key.keystore` is just a copy of debug.keystore in `react-native/keystores`.
Pass all ci.
none
[GENERAL] [ENHANCEMENT] [CI] - Add RNTester to ci
Closes https://github.com/facebook/react-native/pull/19673
Differential Revision: D8435419
Pulled By: hramos
fbshipit-source-id: d3d92a5d1b8477c1f298643cc96695769e5c93ea
Summary:
Android Target API Level 26 will be required starting from August 2018, it's so soon 😄.Read https://android-developers.googleblog.com/2017/12/improving-app-security-and-performance.html
This PR uses android build tools 26.0.2, support library 26.1.0 (with android lifecycle) and setting compileSdkVersion to 26, but leaving minSdkVersion and targetSdkVersion intact, which will make targeting 26 easy.
Circle CI: https://circleci.com/gh/dulmandakh/react-native/209
Everything will build and work just fine.
[ANDROID] [ENHANCEMENT] [TOOLS] - Use android build-tools 26.0.2 and set compileSdk to 26, and use support library version 26.1.0.
Closes https://github.com/facebook/react-native/pull/19662
Differential Revision: D8398855
Pulled By: hramos
fbshipit-source-id: a4066eb04cb5f947efe1f3202b638c1092b79aae
Summary:
Bump Prettier to use version 1.13.4
All code changes are caused by running Prettier and should only affect files that have an `format` header.
All other changes caused by yarn.
Reviewed By: ryanmce
Differential Revision: D8251255
fbshipit-source-id: 0b4445c35f1269d72730f2000002a27c1bc35914
Summary: There are new patterns that require some upgrades to Folly version we're using for the cocoapods/gradle. Until the upgrade happens, Fabric target doesn't need to be included in the normal RNTester podfile (it was there for sanity build check).
Reviewed By: shergin
Differential Revision: D8151782
fbshipit-source-id: 8d83355d65b1eeeab865585f2ae75ac835bdf826
Summary:
This reverts a3931e9531
The open source `test_android` job is not configured to use Android 26 quite yet. I've spent a couple of days trying to get our Android tests back in working order, with no luck.
I'm reverting the change that bumped React Native to use build tools 26 + Android SDK 26. I encourage contributors interested in making this change happen to work on getting our Android tests working with API 26.
This will allow us to focus on getting `test_android` back to green, and _then_ we can work on bumping to API 26 while keeping tests green.
Reviewed By: fkgozali
Differential Revision: D8066226
fbshipit-source-id: 9bfd58a7f081c0971b78b331073e70545c21ca6d
Summary: A few more places to update to target iOS 9.0 (upgraded from 8.0)
Reviewed By: shergin
Differential Revision: D8108719
fbshipit-source-id: f17aa5e5aa34fdad57196202bf67a842735d4cdc
Summary: Moving target deployment to iOS 9.0+ from now on, removing customization for iOS 8.
Reviewed By: shergin
Differential Revision: D8053439
fbshipit-source-id: 292c58f15c6e6caf8b28d15c1521812d6ed675c5
Summary: Each app has its own set of components to support, so this mechanism allows each of them to customize the set. Core library only provides the signature (.h file) without any impl.
Reviewed By: shergin
Differential Revision: D8065360
fbshipit-source-id: c123397afda678e84f1d1fa41a6393f25b2c15e1
Summary:
A few fixes:
* missing include: folly/Optional.h
* switch folly::Optional's `has_value()` to `hasValue()` for now until folly is upgraded to newer version
* fix up import for RCTTextAttributes.h
* fix up includes for "conversions.h" to use namespaced includes
Reviewed By: mmmulani
Differential Revision: D8021149
fbshipit-source-id: d3955986d3ab6b1d9b61ac1e385767893ce57e5e
Summary:
Starting August 2018, Google Play will require targetSdkVersion 26 for new applications, and November 2018 for application updates.
This PR will use Android build tools 26.0.3 and compilerSdk 26, then support library version 26.0.2 to make targeting 26 easier in the future.
I think this PR will help to people compile and test their applications, thus make transition easier (smoother). Also we'll have opportunity and time to migrate code to target 26.
https://github.com/facebook/react-native/issues/18095
React Native on android must work as usual
Closes https://github.com/facebook/react-native/pull/19257
Differential Revision: D8010354
Pulled By: mdvacca
fbshipit-source-id: 63ba03585e918b38c2a2adb5d2f2e85d7ce46fae
Summary: Fix the typo in `RTLExample.js` that is now detected by Flow.
Reviewed By: TheSavior
Differential Revision: D7987526
fbshipit-source-id: d30f536b2f41e2127909675ea065a3355e5576ad
Summary:
Exposing this enum is essentially useless and at worst is a runtime cost that isn't necessary by just using the string.
The value of this enum, as far as I understand it, is to enforce that only valid options are used. We can enforce this at build time with Flow.
I was able to migrate our codebase with a few Find and Replace for things like
```
resizeMode={Image.resizeMode.contain}
```
Reviewed By: yungsters
Differential Revision: D7983982
fbshipit-source-id: ddd7024023f8d2f01aad1fff6c8103983a1bec1a
Summary:
`RCTFontTests` test in RNTester is broken if the target deployment is <= OS 8.2. This is because RCTFont.mm overrides the OS-defined values, but the override is only visible to RCTFont.mm internals. As the result, when the Unit test tries to create UIFont of the "same" weight, it got a different font - most likely due to internal floating rounding errors.
To mitigate, code that wants to test out internals of RCTFont should import RCTFontConstantsOverride.h
Reviewed By: mmmulani
Differential Revision: D7900954
fbshipit-source-id: e5814ef059a8afdfb5205ca1af46c41b3cfd4318
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
Summary:
Issue [#2088](https://github.com/facebook/react-native/issues/2088).
The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized").
My test plan involves having added a test-case to the RNTester app within the `<Text>` component area. I then manually verified that the rendered content met my expectation.
Here is the markup that exercises my enhancement:
```
<View>
<Text style={{ textTransform: 'uppercase'}}>
This text should be uppercased.
</Text>
<Text style={{ textTransform: 'lowercase'}}>
This TEXT SHOULD be lowercased.
</Text>
<Text style={{ textTransform: 'capitalize'}}>
This text should be CAPITALIZED.
</Text>
<Text style={{ textTransform: 'capitalize'}}>
Mixed:{' '}
<Text style={{ textTransform: 'uppercase'}}>
uppercase{' '}
</Text>
<Text style={{ textTransform: 'lowercase'}}>
LoWeRcAsE{' '}
</Text>
<Text style={{ textTransform: 'capitalize'}}>
capitalize each word
</Text>
</Text>
</View>
```
And here is a screenshot of the result:
![screen shot 2018-03-14 at 3 01 02 pm](https://user-images.githubusercontent.com/575821/37433772-7abe7fa0-279a-11e8-9ec9-fb3aa1952dad.png)
[Website Documentation PR](https://github.com/facebook/react-native-website/pull/254)
https://github.com/facebook/react-native-website/pull/254
[IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations
Closes https://github.com/facebook/react-native/pull/18387
Differential Revision: D7583315
Pulled By: shergin
fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
Summary: Initial attempt to make fabric stuffs built properly with CocoaPods + RNTesterPods project. This simply includes fabric libs to the build, it doesn't change any behavior or enable fabric runtime.
Reviewed By: shergin
Differential Revision: D7626038
fbshipit-source-id: 4a80e0066cffa4478bb442fa8aefeaee6ff56ddd
Summary:
There was a fix around folly::dynamic constructor that will be needed for Fabric work. This was done in 94e964976c (diff-7d1cb97d222ba0c863ea8a8e43b2ee2b) and luckily the release 1 month after the Folly version we used in RN already had the fix, so that we don't need to upgrade to the latest folly yet (minimizing breakages).
Tested by:
* running RNTester xcode project (ios)
* running RNTesterPods workspace via cocoapods
* building android via gradle
Reviewed By: shergin
Differential Revision: D7626037
fbshipit-source-id: cb36ba5b91ba131d4e450300bd620db657cfa1e8
Summary: Should have been checked in previously. No setup change here.
Reviewed By: shergin
Differential Revision: D7626040
fbshipit-source-id: e7a1a9de70a40a22e39eb3777d1b62c8d7b66381
Summary:
This adds a way to test out CocoaPods build to RNTester, but as a separate project/workspace.
This also fixes the podspecs due to Fabric stuffs.
Note that this setup is meant to be run manually, not by CI (yet)
Reviewed By: mmmulani
Differential Revision: D7603823
fbshipit-source-id: 2219aa4c77f40ec07097a5c9ed4052529226618b
Summary:
On Android, LayoutAnimation directly updates the layout since a generic
scaling animation is more difficult to implement. This causes a problem
if the layout is updated during an animation, as the previous layout is
stored with the animation and is not updated. As a result the view gets
the old layout instead once the animation completes.
This commit fixes this issue by storing the layout handling animations
while those animations are active, and updating the animations on the
fly if one of the views receives a new layout. The resulting behaviour
mirrors what iOS currently does.
This bug has real world consequences, for example if a LayoutAnimation
happens right after a VirtualizedList has mounted, it’s possible that
some list rows are mounted while the animation is active, making the
list content view bigger. If the content view is being animated, the
new size will not take effect and it becomes impossible to scroll to
the end of the list.
I wrote a minimal test case to verify the bug, which I’ve also added to
RNTester. You can find the standalone app here:
<https://gist.github.com/lnikkila/18096c15b2fb99b232795ef59f8fb0cd>
The app creates a 100x300 view that gets animated to 200x300 using
LayoutAnimation. In the middle of that animation, the view’s dimensions
are updated to 300x300.
The expected result (which is currently exhibited by iOS) is that the
view’s dimensions after the animation would be 300x300. On Android the
view keeps the 200x300 dimensions since the animation overrides the
layout update.
The test app could probably be turned into an integration test by
measuring the view through UIManager after the animation, however I
don’t have time to do that right now...
Here are some GIFs to compare, click to expand:
<details>
<summary><b>Current master (iOS vs Android)</b></summary>
<p></p>
<img src="https://user-images.githubusercontent.com/1291143/38191325-f1aeb3d4-3670-11e8-8aca-14e7b24e2946.gif" height="400" /><img src="https://user-images.githubusercontent.com/1291143/38191337-f643fd8c-3670-11e8-9aac-531a32cc0a67.gif" height="400" />
</details><p></p>
<details>
<summary><b>With this patch (iOS vs Android, fixed)</b></summary>
<p></p>
<img src="https://user-images.githubusercontent.com/1291143/38191325-f1aeb3d4-3670-11e8-8aca-14e7b24e2946.gif" height="400" /><img src="https://user-images.githubusercontent.com/1291143/38191355-07f6e972-3671-11e8-8ad2-130d06d0d64d.gif" height="400" />
</details><p></p>
No documentation changes needed.
[ANDROID] [BUGFIX] [LayoutAnimation] - View layout is updated correctly during an ongoing LayoutAnimation, mirroring iOS behaviour.
Closes https://github.com/facebook/react-native/pull/18651
Differential Revision: D7604698
Pulled By: hramos
fbshipit-source-id: 4d114682fd540419b7447e999910e05726f42b39
Summary:
The latest release of react-native (0.55.2) does not expose the new `InputAccessoryView` component; It can't be accessed at all. This change fixes this problem.
* Problem: Snack showing the problem: https://snack.expo.io/B1fDQRYif
* Proof: `RNTester` still works with adapted imports
No related PRs.
[IOS] [BUGFIX] [InputAccessoryView] - Expose `InputAccessoryView` so it can be imported
Closes https://github.com/facebook/react-native/pull/18780
Differential Revision: D7581729
Pulled By: hramos
fbshipit-source-id: d61ab1f167360e829e32b93fb5414d2f7e57e115
Summary:
* cliPath is not config right
* root config can be better config instead of a relative path which can easily go wrong if location changed
* DeveloperSupport should only be in debug mode.
* make https://github.com/facebook/react-native/pull/18732 change on local.
* config signingConfig
* execute `./gradlew :RNTester:android:app:assembleRelease`, and run app on device to check everything is fine.
none
[GENERAL][ENHANCEMENT][RNTester]
Closes https://github.com/facebook/react-native/pull/18746
Differential Revision: D7548846
Pulled By: hramos
fbshipit-source-id: 8943f84a6c99456477dff2deeaacc96f093b2e09
Summary:
Currrent(0.54-stable) root path in RNTester gradle config would cause a failure when trying to compile a release version for RNTester:
```
module.js:545
throw err;
^
Error: Cannot find module ’TheParentDirectoryOfCurrentRepo/local-cli/cli.js'
at Function.Module._resolveFilename (module.js:543:15)
at Function.Module._load (module.js:470:25)
at Function.Module.runMain (module.js:690:10)
at startup (bootstrap_node.js:194:16)
at bootstrap_node.js:666:3
:RNTester:android:app:bundleReleaseJsAndAssets FAILED
```
[ANDROID] [INTERNAL] [RNTester] - Fix wrong root path in RNTester gradle config
Closes https://github.com/facebook/react-native/pull/18553
Differential Revision: D7488301
Pulled By: mdvacca
fbshipit-source-id: b49a01820957eb77daeca9c0949f662b668f2bd1
Summary:
The js bundle task does not run when `org.gradle.configureondemand` is set to true. This uses `afterEvaluate` instead of `gradle.projectsEvaluated` which is executed properly.
Add `org.gradle.configureondemand=true`, run RNTester in release mode and make sure the bundle task is run.
[ANDROID] [BUGFIX] [LOCATION] - Fix release bundle task when org.gradle.configureondemand=true
Closes https://github.com/facebook/react-native/pull/18557
Differential Revision: D7396744
Pulled By: mdvacca
fbshipit-source-id: 9ea134cb49e8a087cec16f82b990cd19af76785a
Summary:
Fixes#18474
This allows use clip as ellipsize mode for truncated text on android
Added a test to RNTester, so it can be tested from there:
1. Run RNTester project
2. Navigate to `<Text>` tests
3. Scroll down to "Ellipsize mode" examples
4. Check the default behavior being applied when the value is set to "clip"
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[ANDROID] [BUGFIX] [Text] - Prevents android crash due to unsupported "clip" ellipsize mode
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/18540
Differential Revision: D7396379
Pulled By: mdvacca
fbshipit-source-id: 6c4b223731143c5081b3d12a3c740d1e375bd586
Summary:
This PR adds an option to pass`inverted` prop to SectionListExample in RNTester. FlatListExample already has this option but it's not available in SectionListExample.
Run RNTester app on device or simulator and select SectionListExample. Depending on switching `inverted` option, you can see either inverted list or not.
[GENERAL][ENHANCEMENT][RNTeater] - Add inverted prop to SectionListExample
Closes https://github.com/facebook/react-native/pull/18370
Differential Revision: D7317168
Pulled By: hramos
fbshipit-source-id: c6c212c705e686281f23954775cc3465cce3c8df
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
Closes the old #7474, keeping the status bar hidden when displaying a modal
or dialog, this is accomplished by verifying if the activity status bar is hidden or not.
Added a test to [RNTester](https://github.com/facebook/react-native/tree/master/RNTester), so it can be tested from there:
1. Run [RNTester](https://github.com/facebook/react-native/tree/master/RNTester) project
2. Go to <StatusBar> tests
3. Set `hidden: true` in the *StatusBar hidden* samples
4. Set `modal visible: true` and see the result
Here are some gifs to help see the results:
![fail](https://user-images.githubusercontent.com/1649955/36345378-f443ad7e-1407-11e8-850d-d6317fb34da4.gif)
![success](https://user-images.githubusercontent.com/1649955/36345392-1c590b56-1408-11e8-9244-a2e828f579ab.gif)
none
<!--
Help reviewers and the release process by writing your own release notes
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [-{Component}-]
[ INTERNAL ] [ ENHANCEMENT ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[ GENERAL ] [ BUGFIX ] [ [StatusBar] - Prevent show a hidden status bar when opening modals
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[ GENERAL ] [ BUGFIX ] [StatusBar] - Prevent show a hidden status bar when opening modals
Closes https://github.com/facebook/react-native/pull/18004
Differential Revision: D7307564
Pulled By: hramos
fbshipit-source-id: 47e481ead78204865811ddf2ef3d27da77ad8b8f
Summary:
A common UI pattern for list empty states is some text/images centered inside the visible part of the list. This is pretty hard to do currently because we wrap ListEmptyComponent with an extra view with no way to style it so we cannot just use `flex: 1` to make it fill the available space.
- Added an example of ListEmptyComponent in the FlatList example in RNTester
Before (no way to make ListEmptyComponent fill the space):
<img width="377" alt="screen shot 2018-03-05 at 5 24 15 pm" src="https://user-images.githubusercontent.com/2677334/37003152-129db3ac-209a-11e8-9600-110f10d57144.png">
After:
<img width="377" alt="screen shot 2018-03-05 at 5 09 20 pm" src="https://user-images.githubusercontent.com/2677334/37002809-e6971178-2098-11e8-8cf7-74bfb2f6a992.png">
- Tested some edge cases like returning null from the ListEmptyComponent
- Tested in an app that uses FlatList + ListEmptyComponent
[GENERAL] [MINOR] [VirtualizedList] - Don't wrap ListEmptyComponent in an extra view
Closes https://github.com/facebook/react-native/pull/18206
Differential Revision: D7266274
Pulled By: sahrens
fbshipit-source-id: 4636d2418474a4c86ac63e5e18a9afc391a518c5
Summary:
`<Image resizeMode="repeat" />` for Android, matching the iOS implementation (#7968). (Non-goal: changing the component's API for finer-grained control / feature parity with CSS - this would be nice in the future)
As requested in e.g. #14158.
Given https://github.com/facebook/fresco/issues/1575, and lacking the context to follow the specific recommendations in https://github.com/facebook/fresco/issues/1575#issuecomment-267004303, I've opted for a minimal change within RN itself.
It's likely that performance can be improved by offloading this work to Fresco in some clever way; but I'm assuming that the present naive approach is still an improvement over a userland implementation with `onLayout` and multiple `<Image>` instances.
- Picking up on a TODO note in the existing code, I implemented `MultiPostprocessor` to allow arbitrary chaining of Fresco-compatible postprocessors inside `ReactImageView`.
- Rather than extensively refactor `ImageResizeMode`, `ReactImageManager` and `ReactImageView`, I mostly preserved the existing API that maps `resizeMode` values to [`ScaleType`](http://frescolib.org/javadoc/reference/com/facebook/drawee/drawable/ScalingUtils.ScaleType.html) instances, and simply added a second mapping, to [`TileMode`](https://developer.android.com/reference/android/graphics/Shader.TileMode.html).
- To match the iOS rendering exactly for oversized images, I found that scaling with a custom `ScaleType` was required - a kind of combination of `CENTER_INSIDE` and `FIT_START` which Fresco doesn't provide - so I implemented that as `ScaleTypeStartInside`. (This is, frankly, questionable as the default behaviour on iOS to begin with - but I am aiming for parity here)
- `resizeMode="repeat"` is therefore unpacked by the view manager to the effect of:
```js
view.setScaleType(ScaleTypeStartInside.INSTANCE);
view.setTileMode(Shader.TileMode.REPEAT);
```
And the added postprocessing in the view (in case of a non-`CLAMP` tile mode) consists of waiting for layout, allocating a destination bitmap and painting the source bitmap with the requested tile mode and scale type.
Note that as in https://github.com/facebook/react-native/pull/17398#issue-285235247, 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.
Also, I'm happy to address any code style issues or other feedback; I'm new to this codebase and a very infrequent Android/Java coder.
Tested by enabling the relevant case in RNTester on Android.
| iOS | Android |
|-|-|
| <img src=https://user-images.githubusercontent.com/2246565/34461897-4e12008e-ee2f-11e7-8581-1dc0cc8f2779.png width=300>| <img src=https://user-images.githubusercontent.com/2246565/34461894-40b2c8ec-ee2f-11e7-8a8f-96704f3c8caa.png width=300> |
Docs update: https://github.com/facebook/react-native-website/pull/106
[ANDROID] [FEATURE] [Image] - Implement resizeMode=repeat
Closes https://github.com/facebook/react-native/pull/17404
Reviewed By: achen1
Differential Revision: D7070329
Pulled By: mdvacca
fbshipit-source-id: 6a72fcbdcc7c7c2daf293dc1d8b6728f54ad0249
Summary:
Migrating everything to import from StyleSheet instead of StyleSheetTypes.
Search and replaced
```
import type {StyleObj} from 'StyleSheetTypes';
```
to
```
import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
```
and then replacing `StyleObj` with `DangerouslyImpreciseStyleProp` and fixing up the remaining flow errors by hand.
Reviewed By: yungsters
Differential Revision: D7184077
fbshipit-source-id: b8dabb9d48038b5a997ab715687300bad57aa9d4
Summary:
This type is being used in many places where a much simpler type is often better. In a real pinch this type can still be accessed as so:
```
function returnsStyleSheet(
): $Call<typeof StyleSheet.create, *> {
return StyleSheet.create({
root: {
background: 'white',
}
})
}
returnsStyleSheet().foo // foo doesn't exist
returnsStyleSheet().root // okay
```
Reviewed By: yungsters
Differential Revision: D7178524
fbshipit-source-id: 3c0ed03486ca00f1e287261e402fd47807f1fc3d
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
* To be on par with Apple TV support, this makes it possible to run React Native apps on Android TV devices (See also: https://react-native.canny.io/feature-requests/p/android-tv-support)
* These changes also make it possible to navigate through the app using D-PAD buttons that are present on some mobile devices
* Since these changes affect, among others, `ReactRootView.java` and `Touchable.js` code and are closely related to Apple TV implementation, it makes sense for them to be included in the core
- React native apps can be launched on Android TV devices and properly render their content
- Navigation is possible using left, right, top, bottom arrows from the remote (or D-PAD)
- Touchable components can handle D-PAD center button press events and correctly fire their `onPress` handlers
- Touchable components will receive `onPressIn` and `onPressOut` events and can react to focus/blur changes appropriately (just like on Apple TV)
- `Platform` constants allow to check if the react-native app is running on TV (`Platform.isTV`)
- `ScrollView`s behave correctly (same as native implementation) when switching to view outside bounds – that is, the container would scroll such that the newly focused element is fully visible
- Native "clicking" sounds are played when moving between focusable elements
- Play/Pause click event is send to `TVEventHandler`
- Rewind and FastForward events are send to `TVEventHandler`
- Back button behaves as a normal Android back button
- Diagonal buttons work correctly on Android TV, e.g. if there is no button directly to the right from the focused one, but there is one to the right but a bit higher/lower it will grab focus
- Dev menu can be accessed by long pressing fast forward button
A demo showing RNTester app running on Android TV device (Amazon Fire TV Stick) can be found here:
[![RNAndroidTVDemo](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)](http://www.youtube.com/watch?v=EzIQErHhY20)
- `TextInput` will not work on Android TV devices. There's an issue with native `ReactEditText` implementation that prevents it from receiving focus. This makes it impossible to navigate to `TextInput`.
This will be fixed next, but will be included in a separate Pull Request
- ~Overlay permissions cannot be granted on Android TV devices running Android version >= 6.0
This is because the overlay permission can only be granted by firing an Intent to open settings page (`ACTION_MANAGE_OVERLAY_PERMISSION`). Since this page does not exist on TV devices the permission cannot be requested. This will make the app crash when trying to open dev menu (⌘+M) or displaying a redbox error.
Note: This does not affect devices running Android version < 6.0 (for example Amazon Fire TV Stick)~
This is now fixed by: https://github.com/facebook/react-native/pull/16596
* Launch the RNTester app on Android TV device.
* Ensure it launches without a crash
* Ensure basic navigation is possible
* Ensure Touchable components can receive select events
* Ensure the changes do not break current Android and iOS mobile devices functionality.
* Ensure the changes do not break current Apple TV functionality.
[RNAndroidTVDemo video](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)
* Added `ReactAndroidTVViewManager` that handles TV `KeyEvent`s and dispatches events to JS - This is the core that enables basic navigation functionality on Android TV devices
* Following the above change we copy `TVEventHandler.ios.js` into `TVEventHandler.android.js` to enable JS to pick up those native navigation events and dispatch them further to subscribed views. (Note: We do not have a native `TVNavigationEventEmitter` implementation on Android, thus this file is slightly modified, e.g. it does pass `null` to `NativeEventEmitter` constructor)
* Added `uiMode` to `AndroidInfoModule`. (**Note**: This required changing `extends BaseJavaModule` to `extends ReactContextBaseJavaModule` to be able to use `getSystemService` which requires `Context` instance!
* Added `isTV` constants to both `Platform.ios.js` (keeping the deprecated `isTVOS` as well) and `Platform.android.js`
* Changed condition check on `Touchable.js` to use the newly added `isTV` flag to properly handle TV navigation events on Android as well
* Added `LEANBACK_LAUNCHER` to `RNTester` `intent-filter` so that it is possible to launch it on Android TV devices.
* See also a PR to `react-native-website` repo with updated docs for Android TV: https://github.com/facebook/react-native-website/pull/59
- [ ] Fix `TextInput` components handling by allowing them to be focused and making a proper navigation between them (and/or other components) possible. One thing to note here that the default behavior to immediately open software keyboard when focused on `TextInput` field will need to be adjusted on Android TV as well)
- [x] Fix overlay permissions issue by changing the way redbox/dev menu are displayed (see: https://github.com/facebook/react-native/pull/16596)
- [ ] Adjust placement of TV-related files (e.g. the `TVEventHandler.js` file is placed inside `AppleTV` directory which is not accurate, since it does handle Android TV events as well)
Previous discussion: https://github.com/SoftwareMansion/react-native/pull/1
<!--
Help reviewers and the release process by writing your own release notes
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAl ] [ BUGFIX ] [-{Component}-]
[ INTERNAL ] [ ENHANCEMENT ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - MESSAGE
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[ANDROID] [FEATURE] [TV] - Added support for Android TV devices
Closes https://github.com/facebook/react-native/pull/16500
Differential Revision: D6536847
Pulled By: hramos
fbshipit-source-id: 17bbb11e8583b97f195ced5fd9762f8902fb8a3d
Summary:
RNTester used a copy of the main react.gradle file instead of the real one. Recent changes to the real file caused builds to fail with older gradle versions but was not caught by CI because it wasn't using that file for RNTester. That copy of react.gradle is just a leftover from when projects included a copy instead of importing the one in RN directly.
Note: CI WILL fail with this PR, if we have trouble landing this I can add the revert in this commit too but wanted to keep it as 2 separate commits.
Tested that building RNTester actually fails now that it uses react.gradle with recent changes, then tested that is builds properly when reverting d16ff3bd8b.
[INTERNAL] [MINOR] [RNTester] - Use react.gradle from repo root instead of copy in RNTester
Closes https://github.com/facebook/react-native/pull/18188
Differential Revision: D7155179
Pulled By: hramos
fbshipit-source-id: 15b461a63b841bf807e7d11ba3ead005ca5e33b0
Summary: for some reason metro was not able to find js module with just .android.js variant. To workaround some build issue, added an empty .ios.js variant
Reviewed By: mdvacca
Differential Revision: D7115360
fbshipit-source-id: 40b95cf2efc4d3d599f39b88813469b6d78e7b48
Summary:
This is an example showing how to use an InputAccessoryView to build an iMessage-like sticky text input
https://youtu.be/89PGsSqtmQU
Reviewed By: sahrens
Differential Revision: D7048456
fbshipit-source-id: 90314a85f3662c2b21aababe2dd46ea5e406604a
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 6114f863c3, 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
Summary:
Related to: #15454
Motivation: Improve tvOS feeling for TouchableHighlight
![changewithaniamtion](https://user-images.githubusercontent.com/7658664/29193477-b99b4a10-7e25-11e7-8b31-e0e4ca9d7720.gif)
- When you select the button he is focus and the underlay is show
- When you press the button, there is an animation, but after the animation, the focus is on the button and the underlay is show
Play with tvParallaxProperties on tvOS, test with and without patch just to see the actual behaviour
```
<TouchableHighlight
tvParallaxProperties={{
enabled: true,
shiftDistanceX: 0,
shiftDistanceY: 0,
tiltAngle: 0,
magnification: 1.1,
pressMagnification: 1.0,
pressDuration: 0.3,
}}
underlayColor="black"
onShowUnderlay={() => (console.log("onShowUnderlay")}
onHideUnderlay={() => (console.log("onHideUnderlay")}
onPress={() => (console.log("onPress")}
>
<Image
style={styles.image}
source={ uri: 'https://www.facebook.com/images/fb_icon_325x325.png' }
/>
</TouchableHighlight>
```
Closes https://github.com/facebook/react-native/pull/15455
Differential Revision: D6887437
Pulled By: hramos
fbshipit-source-id: e18b695068bc99643ba4006fb3f39215b38a74c1
Summary:
Hi! I would like to contribute to React Native, and I am just starting out. I forked the repo and found that it has quite a lot of ESLint warnings – many of which were automatically fixable. This PR is simply the result of running `yarn lint --fix` from the root folder.
Most changes are removing trailing spaces from comments.
Haven't really done any manual testing, since I haven't done any code changes manually. `yarn test` runs fine, `yarn flow` runs fine, `yarn prettier` is satisfied.
N/A
[INTERNAL][MINOR][] - Fix ESLint warnings
Closes https://github.com/facebook/react-native/pull/18047
Differential Revision: D7054948
Pulled By: hramos
fbshipit-source-id: d53e692698d1687de5821c3fb5cdb76a5e03b71e
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
Summary:
This PR adds support for Animated tracking to Animated Native Driver implementation on Android and iOS.
Animated tracking allows for animation to be started with a "dynamic" end value. Instead of passing a fixed number as end value we can pass a reference to another Animated.Value. Then when that value changes, the animation will be reconfigured to drive the animation to the new destination point. What is important is that animation will keep its state in the process of updating "toValue". That is if it is a spring animation and the end value changes while the previous animation still hasn't settled the new animation will start from the current position and will inherit current velocity. This makes end value transitions very smooth.
Animated tracking is available in JS implementation of Animated library but not in the native implementation. Therefore until now, it wasn't possible to utilize native driver when using animated tracking. Offloading animation from JS thread turns out to be crucial for gesture driven animations. This PR is a step forward towards feature parity between JS and native implementations of Animated.
Here is a link to example video that shows how tracking can be used to implement chat heads effect: https://twitter.com/kzzzf/status/958362032650244101
In addition this PR fixes an issue with frames animation driver on Android that because of rounding issues was taking one extra frame to start. Because of that change I had to update a number of Android unit tests that were relying on that behavior and running that one additional animation step prior to performing checks.
As a part of this PR I'm adding three unit tests for each of the platforms that verifies most important aspects of this implementation. Please refer to the code and look at the test cases top level comments to learn what they do.
I'm also adding a section to "Native Animated Example" screen in RNTester app that provides a test case for tracking. In the example we have blue square that fallows the red line drawn on screen. Line uses Animated.Value for it's position while square is connected via tracking spring animation to that value. So it is ought to follow the line. When user taps in the area surrounding the button new position for the red line is selected at random and the value updates. Then we can watch blue screen animate to that position.
You can also refer to this video that I use to demonstrate how tracking can be linked with native gesture events using react-native-gesture-handler lib: https://twitter.com/kzzzf/status/958362032650244101
[GENERAL][FEATURE][Native Animated] - Added support for animated tracking to native driver. Now you can use `useNativeDriver` flag with animations that track other Animated.Values
Closes https://github.com/facebook/react-native/pull/17896
Differential Revision: D6974170
Pulled By: hramos
fbshipit-source-id: 50e918b36ee10f80c1deb866c955661d4cc2619b
Summary:
A demo illustrated `base-line` metric exposure to layout system was added to RNTester.
And currently it shows that we don't support it at all.
https://cl.ly/1F0B0D430U3e
Reviewed By: sahrens
Differential Revision: D6957056
fbshipit-source-id: 28776300fc8e11950ac5ba1a5416f68d31d4e9fb
Summary:
Signed-off-by: Evan J Brunner <ej3@appitto.me>
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
Motivation can be found in #17899
This `RNTester/js/http_test_server.js` is part of a internal websocket test suite / devtool.
Can be tested with `curl -D - localhost:5556` observing that the `Set-Cookie: wstest=OK; Path=\` header is present, and the service throws no exceptions.. etc
[INTERNAL][MINOR][./RNTester/js/http_test_server.js] - fixed set cookie with connect framework
<!--
Help reviewers and the release process by writing your own release notes
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [-{Component}-]
[ INTERNAL ] [ ENHANCEMENT ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - MESSAGE
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/17900
Differential Revision: D6977087
Pulled By: hramos
fbshipit-source-id: af6205343fccf69c57e0c26a85a5b04d61288a23
Summary:
This is reimagining of interoperability layer between Yoga and ShadowViews (at least in Yoga -> RN part).
Goals:
* Make it clear and easy.
* Make clear separation between "what layout what", now parent always layout children, noone layout itself.
* Make possible to interleave Yoga layout with custom imperative layout (may be used in SafeAreaView, Text, Modal, InputAccessoryView and so on).
Reviewed By: mmmulani
Differential Revision: D6863654
fbshipit-source-id: 5a6a933874f121d46f744aab99a31ae42ddd4a1b
Summary:
This change enables built-in Yoga mechanism which rounds producing layout metrics to closest "pixel" values.
See previous diff for more context.
Reviewed By: fkgozali
Differential Revision: D6889762
fbshipit-source-id: bc2eea44704db4b377e2e14fab9f67be8c935719
Summary:
I've talked to several major community users, and they're all ok with deleting this
code. There's several doc fixes which will make it easier for third
party developers which should land about the same time this will.
Also buried along with it is RCTJSCExecutor.
Reviewed By: javache
Differential Revision: D6880781
fbshipit-source-id: b4cb1143def6fd23a96290e478fa728adbedacd3
Summary:
Fix issues with the react-native CLI when linking iOS and tvOS libraries to a project created with `react-native init`. (#13783)
Verified the changes against test project at https://github.com/dlowder-salesforce/react-native-link-test. Both `react-native link react-native-svg` and `react-native unlink react-native-svg` work correctly on this project. Added new unit test for the new file added to `local-cli/link/ios`.
[CLI] [BUGFIX] `react-native link` has been fixed to correctly link iOS and tvOS targets.
[IOS] [BUGFIX] `react-native link` has been fixed to correctly link iOS and tvOS targets.
Closes https://github.com/facebook/react-native/pull/17231
Differential Revision: D6837567
Pulled By: hramos
fbshipit-source-id: 234d3d3966ae1b89cd16a37c95d303553f7ba5f5
Summary:
`<Image resizeMode="center">` already works on iOS (implemented in #8792), but is neither tested nor documented the way the other `resizeMode` values are.
This PR primarily enables the relevant RNTester case on iOS, and secondarily copies over the doc comment from `Image.android.js` to `Image.ios.js`. A PR to `react-native-website` will follow shortly and it is there I will try and revise the wording a bit.
Updated RNTester screenshot (iOS):
<img src=https://user-images.githubusercontent.com/2246565/35470720-44b38282-0357-11e8-941c-1b3c5a1b2f3b.png width=300>
react-native-website PR coming soon.
[IOS] [MINOR] [Image] - Include resizeMode=center in RNTester
Closes https://github.com/facebook/react-native/pull/17759
Differential Revision: D6829051
Pulled By: hramos
fbshipit-source-id: c6e0000a75765e8bf3a1d0306aaafad002b14a58
Summary:
This PR is a followup to https://github.com/facebook/react-native/pull/11417 and should be merged after that one is merged.
1. Add support for creating blobs from strings, not just other blobs
1. Add the `File` constructor which is a superset of `Blob`
1. Add the `FileReader` API which can be used to read blobs as strings or data url (base64)
1. Add support for uploading and downloading blobs via `XMLHttpRequest` and `fetch`
1. Add ability to download local files on Android so you can do `fetch(uri).then(res => res.blob())` to get a blob for a local file (iOS already supported this)
1. Clone the repo https://github.com/expo/react-native-blob-test
1. Change the `package.json` and update `react-native` dependency to point to this branch, then run `npm install`
1. Run the `server.js` file with `node server.js`
1. Open the `index.common.js` file and replace `localhost` with your computer's IP address
1. Start the packager with `yarn start` and run the app on your device
If everything went well, all tests should pass, and you should see a screen like this:
![screen shot 2017-06-08 at 7 53 08 pm](https://user-images.githubusercontent.com/1174278/26936407-435bbce2-4c8c-11e7-9ae3-eb104e46961e.png)!
Pull to rerun all tests or tap on specific test to re-run it
[GENERAL] [FEATURE] [Blob] - Implement blob support for XMLHttpRequest
Closes https://github.com/facebook/react-native/pull/11573
Reviewed By: shergin
Differential Revision: D6082054
Pulled By: hramos
fbshipit-source-id: cc9c174fdefdfaf6e5d9fd7b300120a01a50e8c1
Summary:
This is a complete rewrite of RCTText, the part of React Native which manages Text and TextInput components.
Key points:
* It's understandable now. It follows a simple architectural pattern, and it's easy to debug and iterate. Text flow layout is a first-class citizen in React Native layout system now, not just a wired special case. It also brings entirely new possibilities such as nested interleaving <Text> and <View> components.
* All <Text>-specific APIs were removed from UIManager and co (it's about ~16 public methods which were used exclusively only by <Text>).
* It relies on new Yoga measurement/cloning API and on-dirty handler. So, it removes built-in dirty propagation subsystem from RN completely.
* It caches string fragments properly and granularly on a per-node basis which makes updating text-containing components more performant.
* It does not instantiate UIView for virtual components which reduces memory utilization.
* It drastically improves <TextInput> capabilities (e.g. rich text inside single line <TextInput> is now supported).
Screenshots:
https://cl.ly/2j3r1V0L0324https://cl.ly/3N2V3C3d3q3R
Reviewed By: mmmulani
Differential Revision: D6617326
fbshipit-source-id: 35d4d81b35c9870e9557d0211c0e934e6072a41e
Summary:
Builds off of cae7179c94
- Make the prop a dictionary for more configuration options
- Rename `maintainPositionAtOrBeyondIndex` -> `maintainVisibleContentPosition` + `minIndexForVisible`
- Add autoscroll threshold feature
Given the async native of RN JS and background layout, there is no way to trigger the scrollTo from JS without risking a delay, so we add the feature in native code.
== Test Plan ==
ScrollViewExample:
https://youtu.be/pmY8pxC9PRs
Reviewed By: shergin
Differential Revision: D6729160
fbshipit-source-id: 70f9bae460ce84567857a4f696da78ce9b3b834c
Summary: Trivial. Those lines were lost during rebasing of the original commit.
Reviewed By: priteshrnandgaonkar
Differential Revision: D6717696
fbshipit-source-id: a5dce25427c8977352b3ae7ea01e546a540e0c13
Summary:
== Problem / Background ==
Most lists paginate in a single direction (standard infinite list), but some paginate in both directions. Most common example is a chat thread where new messages show up on the bottom, and old content can be loaded by scrolling up. Comment threads are another example.
Right now, adding content to the bottom of a scroll view is smooth - the content doesn't jump. But when adding to the top of the scrollview, the content gets pushed down, which is jarring (note this may appear reversed because of inverting the list which is common for chat applications).
== Approach ==
The basic idea is simple - we set a flag in JS, then for every uimanager transaction, we record which is the first eligible and visible view in the ScrollView, and compare it's new origin to the old one. If it has changed, we update the contentOffset of the ScrollView to compensate.
This is done by observing `willPerformMounting` directly (only from scrollviews that have this new property set), and then observing the prev state with prependUIBlock and making the update synchronously in addUIBlock to avoid any flicker.
There is also a way to skip views that we don't care about, like a spinner at the top of the view that we don't want to stay in place - we actually want it to get pushed up by the new content, replaced visually in the viewport.
== Notes ==
Most chat applications will probably want to do a scrollToTop when new content comes in and the user is already scrolled at or near the bottom.
This is glitchy if visible children are re-ordered, which could be fixed with additional logic, but it doesn't come up in the type of applications we're targetting here so punting on that.
== Test Plan ==
https://youtu.be/4GcqDGz9eOE
Reviewed By: shergin
Differential Revision: D6696921
fbshipit-source-id: 822e7dfcb207006cd1ba098356324ea81f619428
Summary:
This implements onKeyPress for Android on TextInputs and addresses https://github.com/facebook/react-native/issues/1882.
**N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs.
I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :).
I think important to test this on the most popular keyboard types; maybe different languages too.
I have not yet added tests to test implementation, but will be happy to do that also.
- Build & run RNTester project for Android and open TextInput.
- Enter keys into 'event handling' TextInput.
- Verify that keys you enter appear in onKeyPress below the text input
- Test with autocorrect off, on same input and validate that results are the same.
Below is a gif of PR in action.
![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif)
Closes https://github.com/facebook/react-native/pull/14720
Differential Revision: D6661592
Pulled By: hramos
fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
Summary:
It's always bothered that we have this protocol and I figured it could just be merged with RCTWrapperViewController.
Closes https://github.com/facebook/react-native/pull/17290
Reviewed By: mmmulani
Differential Revision: D6611544
Pulled By: javache
fbshipit-source-id: a50b9d5adbeb2c48dbadbbfc1c77ccf6d1aae144
Summary:
This is a long story. Awhile ago awesome Nick Lockwood (Hey Nick!) introduced a special optimization for ReactNative rendering layer called "inherited background color".
He described this idea in D2811031:
>>>
Blending semitransparent pixels against their background is fairly a fairly expensive operation on mobile GPUs. To reduce blending, React Native has a system called "background color propagation", where the background color of parent views is automatically inherited by child views unless explicitly overridden. This means that translucent pixels can be blended directly against a known background color, avoiding the need to do this dynamically on the GPU.
In practice, this is only useful for views that do their own drawing, which is basically just <Image/> and <Text/> components, and for image components it only really matters when the image has an alpha component.
The automatic background propagation is a bit of a hack, and often does the wrong thing - for example if a view overflows its bounds, or if it overlaps a sibling, the background color will often be incorrect and need to be manually disabled. Because the only place that it provides a significant performance benefit is for text, this diff disables the behavior for everything except <Text/> nodes. It might still be useful for <Image/> nodes too, but looking through the examples in UIExplorer, the number of places where it does the wrong thing for images outnumbers the cases where it provides significant reduction in blending.
However. I think it is time to remove it. Why? There are several reasons:
* It drastically complicates rendering layer. DRASTICALLY. In many many unrelated places (try search for "backgroundColor"!);
* This mechanism is totally non-conceptual to RN and it prevents us to implement some new possible render optimization that we plan to do;
* This adopted only by two components now: Text and ART;
* This is not a significant performance drain anymore; from iOS 6 even UILabel has clear background color by default.
* I doubt that it even works now because `drawRect:` in Text component does not call super method.
So, this diff just turns this feature off for Text. If all performance metrics are neutral, I will delete this mechanism.
Peace.
Reviewed By: sahrens
Differential Revision: D6564199
fbshipit-source-id: 70524fdd955ca32bbf86d2d1ff5e73316b791219
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
Viewing RNTester on my iPhone X hurts my eyes
Opened RNTester on iPhone 7/X simulators as well as my physical X and visually confirmed the header was correctly rendered:
<img width="914" alt="simulator-screenshot" src="https://user-images.githubusercontent.com/1398555/33237093-4bc932ac-d237-11e7-9238-aed8c059fd5f.png">
[IOS] [ENHANCEMENT] [RNTester] - Update iOS RNTester header to utilize SafeAreaView
<!--
Help reviewers and the release process by writing your own release notes
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [-{Component}-]
[ INTERNAL ] [ ENHANCEMENT ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - MESSAGE
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/16981
Differential Revision: D6436215
Pulled By: hramos
fbshipit-source-id: 14f5361a365429e61c37b0b5e52b4adfb026bd60
Summary:
This feature was disabled for multiline textinputs in D3528202 ... seems without a good reason.
The broken autoscroll-to-cursor feature is terribly harmful and counter-intuitive in ALL cases.
I also add a contentSize tracking in the example app to make sure that it is unaffected by this change.
https://pxl.cl/9RHPhttps://github.com/facebook/react-native/issues/12799https://github.com/facebook/react-native/issues/15778
Special thanks to konradkierus!
Reviewed By: sahrens
Differential Revision: D6405985
fbshipit-source-id: 337a390a9db7b3528200ef66c4a079b87608294e
Summary:
`.sort()` will sort on the string value by default, so if you generate [18, 8], they will stay in that order. Adding comparer to ensure values are sorted numerically.
Found a bug in RNTester.
Ran RNTester and confirmed that bug could be reproduced.
[IOS][BUGFIX][RNTester] - patch test to implement desired behavior.
Closes https://github.com/facebook/react-native/pull/16871
Differential Revision: D6371550
Pulled By: shergin
fbshipit-source-id: 84866d1eb02c2be51cd15a60490604d28fa18973
Summary:
Pass scriptURL to RCTTestRunner.
If the scriptURL passed to RCTTestRunner is not nil, then RCTTestRunner will use it.
else, RCTTestRunner will use whatever it has before.
Differential Revision: D6215186
fbshipit-source-id: c3a5643021d60579fc8e60a69de150f6a4a39237
Summary:
It makes possible to just specify remote url for the <Image> and it will work.
`<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />`
Reviewed By: javache
Differential Revision: D5196055
fbshipit-source-id: aaf139c4518cc35d1f4cf810bbf0305aad73a55b
Summary:
Now intrinsic content size of <Image> is implemented natively on iOS and now it is actually
`intrinsicContentSize`, not just overrided `height` and `width` styles (which was incorrect and hacky).
This change also removes support of nested content inside <Image>.
This is a first commit in the row where we improve <Image> implementation.
Reviewed By: mmmulani
Differential Revision: D5189017
fbshipit-source-id: eab3defa3d86a5d4219b4f4925ab7460b58d760f
Summary:
CI is currently failing because of a lint issue, this fixes it and a bunch of other warnings that are auto-fixable.
**Test plan**
Quick manual test, cosmetic changes only.
Closes https://github.com/facebook/react-native/pull/16229
Differential Revision: D6009748
Pulled By: TheSavior
fbshipit-source-id: cabd44fed99dd90bd0b35626492719c139c89f34
Summary:
This is workaround for blury and thick borders on iOS when specified border size does not multiplier of pixel size.
Original problem is probably related to CALayer border drawing specifics; documented as T22099662 and
https://github.com/facebook/react-native/issues/14106
Before:
https://pxl.cl/9cJ7
After:
https://pxl.cl/9cJ4
Reviewed By: javache
Differential Revision: D5999752
fbshipit-source-id: ad6d1078c6ebf7c8e0a3bc3c150525480a5a7a5c
Summary:
If you are a product developer and you need to fix your app's issues related to iPhone X limitations asap,
you can temporary use `DeviceInfo.isIPhoneX_deprecated`.
You can, but you should not. Please consider use new <SafeAreaView>.
This prop was initially named so ugly because we are trying to discourage the community to use it.
However, we understand that sometimes we need a "band-aid" to prevent our apps bleeding.
Note: This prop (DeviceInfo.isIPhoneX_deprecated) will be removed completely after 06/18.
Reviewed By: fkgozali
Differential Revision: D5946329
fbshipit-source-id: 5d6dcaf0e2d175327d59cde4b5ec2e01cd77ec70
Summary:
After this diff the intrinsic content size of <TextInput> reflects the size of text inside EditText,
it means that if there is no additional style constraints, <TextInput> will grow with containing text.
If you want to constraint minimum or maximum height, just do it via Yoga styling.
Reviewed By: achen1
Differential Revision: D5828366
fbshipit-source-id: eccd0cb4ccf724c7096c947332a64a0a1e402673
Summary:
This is required for D5874536, wherein I'll be introducing direction-aware props for borders.
When a view's border changes due to a direction update, only the frames of its children update. Therefore, only the children `UIView`s get a chance to be re-rendered. This is incorrect because the view that's had its borders changed also needs to re-render. So, I keep a track of the layout direction in a property on all shadow views. Then, when I update that prop within `applyLayoutNode`, I push shadow views into the `viewsWithNewFrames` set.
Reviewed By: mmmulani
Differential Revision: D5944488
fbshipit-source-id: 3f23e9973f3555612920703cdb6cec38e6360d2d
Summary: ... because it was recently implemented for Android.
Reviewed By: mmmulani
Differential Revision: D5916305
fbshipit-source-id: b8af0f8712e36aee5c44f7ede41da25fc944134f
Summary:
As I was working on mimicking iOS animations for my ongoing work with `react-navigation`, one task I had was to match the "push from right" animation that is common in UINavigationController.
I was able to grab the exact animation values for this animation with some LLDB magic, and found that the screen is animated using a `CASpringAnimation` with the parameters:
- stiffness: 1000
- damping: 500
- mass: 3
After spending a considerable amount of time attempting to replicate the spring created with these values by CASpringAnimation by specifying values for tension and friction in the current `Animated.spring` implementation, I was unable to come up with mathematically equivalent values that could replicate the spring _exactly_.
After doing some research, I ended up disassembling the QuartzCore framework, reading the assembly, and determined that Apple's implementation of `CASpringAnimation` does not use an integrated, numerical animation model as we do in Animated.spring, but instead solved for the closed form of the equations that govern damped harmonic oscillation (the differential equations themselves are [here](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator), and a paper describing the math to arrive at the closed-form solution to the second-order ODE that describes the DHO is [here](http://planetmath.org/sites/default/files/texpdf/39745.pdf)).
Though we can get the currently implemented RK4 integration close by tweaking some values, it is, the current model is at it's core, an approximation. It seemed that if I wanted to implement the `CASpringAnimation` behavior _exactly_, I needed to implement the analytical model (as is implemented in `CASpringAnimation`) in `Animated`.
We add three new optional parameters to `Animated.spring` (to both the JS and native implementations):
- `stiffness`, a value describing the spring's stiffness coefficient
- `damping`, a value defining how the spring's motion should be damped due to the forces of friction (technically called the _viscous damping coefficient_).
- `mass`, a value describing the mass of the object attached to the end of the simulated spring
Just like if a developer were to specify `bounciness`/`speed` and `tension`/`friction` in the same config, specifying any of these new parameters while also specifying the aforementioned config values will cause an error to be thrown.
~Defaults for `Animated.spring` across all three implementations (JS/iOS/Android) stay the same, so this is intended to be *a non-breaking change*.~
~If `stiffness`, `damping`, or `mass` are provided in the config, we switch to animating the spring with the new damped harmonic oscillator model (`DHO` as described in the code).~
We replace the old RK4 integration implementation with our new analytic implementation. Tension/friction nicely correspond directly to stiffness/damping with the mass of the spring locked at 1. This is intended to be *a non-breaking change*, but there may be very slight differences in people's springs (maybe not even noticeable to the naked eye), given the fact that this implementation is more accurate.
The DHO animation algorithm will calculate the _position_ of the spring at time _t_ explicitly and in an analytical fashion, and use this calculation to update the animation's value. It will also analytically calculate the velocity at time _t_, so as to allow animated value tracking to continue to work as expected.
Also, docs have been updated to cover the new configuration options (and also I added docs for Animated configuration options that were missing, such as `restDisplacementThreshold`, etc).
Run tests. Run "Animated Gratuitous App" and "NativeAnimation" example in RNTester.
Closes https://github.com/facebook/react-native/pull/15322
Differential Revision: D5794791
Pulled By: hramos
fbshipit-source-id: 58ed9e134a097e321c85c417a142576f6a8952f8
Summary:
When we convert nested <Text> components to Spannable object we must enforce the order of spans somehow,
otherwise we will have Spannable object with unpredictable order of spans, which will produce unpredictalbe text layout.
We can do it only using `Spannable.SPAN_PRIORITY` feature because Spannable objects do not maintain the order of spans internally.
We also have to fix this to implement autoexpandable <TextInput>.
Reviewed By: achen1
Differential Revision: D5811172
fbshipit-source-id: 5bc68b869e58aba27d6986581af9fe3343d116a7
Summary:
**PR changes**
The RCTText class originally overrode the accessibilityLabel and returned the raw text of the class ignoring if the accessibilityLabel was set explicitly in code.
Example:
<Text accessibilityLabel="Example"> Hello World </Text> // returns "Hello World" instead of "Example" for the accessibility label
My update checks if the super's accessibilityLabel is not nil and returns the value else it returns the raw text itself as a default to mirror what a UIKit's UILabel does. The super's accessibilityLabel is nil if the accessibilityLabel is not ever set in code. I don't check the length of the label because if the value was set to an empty purposely then it will respect that and return whatever was set in code.
With the new changes:
<Text accessibilityLabel="Example"> Hello World </Text> // returns "Example" for the accessibilityLabel
This change doesn't support nested <Text> components with both accessibilityLabel's value set respectively. The parent's value will return.
Example:
// returns "Example" instead of "Example Test" for the accessibility label
<Text accessibilityLabel="Example">
Hello
<Text accessibilityLabel="Test">
World
</Text>
</Text>
The workaround is just to set the only the parent view's accessibilityLabel with the label desired for it and all its nested views or just not nest the views if possible.
I believe a bigger change would be needed to support accessibility for nested views, for now the changes I have made should satisfy the requirements.
Reviewed By: shergin
Differential Revision: D5806097
fbshipit-source-id: aef2d7cec4657317fcd7dd557448905e4b767f1a
Summary:
The icon size in the test/example cannot be rounded correctly as 3x image, causing redbox like:
```
-[RNTesterSnapshotTests testTabBarExample] : failed: caught "NSInternalInconsistencyException", "RedBox error: Error setting property 'icon' of RCTTabBarItem with tag #14: Image source flux@3x.png size {33, 33} does not match loaded image size {33.333333333333336, 33.333333333333336}."
```
This simply resizes them from 100x100 to 99x99
Reviewed By: javache
Differential Revision: D5747345
fbshipit-source-id: 084b4b028436b18dab324fef1fb0a4365072be75
Summary:
We have to have a way to track ownership of shadow view.
Previous solution with traversing the hierarchy to figure out the root view does not actually work in some cases when the view is temporary detached from hierarchy.
This is also how it work on Andorid.
Reviewed By: mmmulani
Differential Revision: D5686112
fbshipit-source-id: a23a10e8c29c7572ac69403289db136c9d5176a9
Summary:
This shows progress for the download of the JS bundle (different from the packager transform progress that we show already). This is useful especially when loading the JS bundle from a remote source or when developing on device (on simulator + localhost it pretty much just downloads instantly). This will be nice for the expo client since all bundles are loaded over the network and can take several seconds to load.
This depends on https://github.com/facebook/metro-bundler/pull/28 to work but won't crash or anything without it, it just won't show the progress percentage.
![img_05070155d2cc-1](https://user-images.githubusercontent.com/2677334/28293828-2c08d974-6b24-11e7-9334-e106ef3326d9.jpeg)
**Test plan**
Tested that bundle download progress is shown properly in RNTester on both localhost + simulator and on real device with network conditionner to simulate a slow loading bundle.
Tested that it doesn't cause issues if the packager doesn't send the Content-Length header.
Closes https://github.com/facebook/react-native/pull/15066
Differential Revision: D5449073
Pulled By: shergin
fbshipit-source-id: 43a8fb559393bbdc04f77916500e21898695bac5
Summary:
Hi React Native folks! Love your work!
To make contributing easier, this sets the indentation settings of all the Xcode projects to 2 spaces to match their contents.
Closes https://github.com/facebook/react-native/pull/15275
Differential Revision: D5526462
Pulled By: javache
fbshipit-source-id: cbf0a8a87a1dbe31fceed2f0fffc53839cc06e59
Summary:
**Motivation**
Properly support long presses on the Apple TV remote, and also enable dev menu functionality on a real Apple TV device (shaking an Apple TV doesn't work 😄 )
**Test plan**
New example added to `RNTester`.
Closes https://github.com/facebook/react-native/pull/15221
Differential Revision: D5526463
Pulled By: javache
fbshipit-source-id: a61051e86bc82a9561eefc1704bed6b1f2617e05
Summary:
Adds a queue to postMessage so that messages sent close together are not lost.
Setting location="a";location="b" results in only "b" reaching shouldStartLoadWithRequest. Making the second update asynchronous with setTimeout does not fix the issue unless a delay is added.
With this update, postMessage queues "b" until it gets a "message:received" event that confirms "a" has already been processed.
The included test sends two messages from a webview and checks that both are received. It fails against the preexisting code with the first message being dropped.
Closes https://github.com/facebook/react-native/pull/11304
Differential Revision: D5481385
Pulled By: hramos
fbshipit-source-id: 9b6af195eeff8f20c820e2fcdac997c90763e840
Summary: We're focusing the React Native core on a set of high quality essential components and will be removing any modules that do not belong in that set. If you're currently using AdSuppportIOS, it will remain available in the react-native-deprecated-modules archive. There's also alternative implementations such as https://github.com/ptomasroos/react-native-idfa/.
Reviewed By: hramos
Differential Revision: D5388632
fbshipit-source-id: ce6204512b61242a0ba8c731836f3b3b7239b4b0
Summary:
This is the first PR from a series of PRs grabbou and me will make to add blob support to React Native. The next PR will include blob support for XMLHttpRequest.
I'd like to get this merged with minimal changes to preserve the attribution. My next PR can contain bigger changes.
Blobs are used to transfer binary data between server and client. Currently React Native lacks a way to deal with binary data. The only thing that comes close is uploading files through a URI.
Current workarounds to transfer binary data includes encoding and decoding them to base64 and and transferring them as string, which is not ideal, since it increases the payload size and the whole payload needs to be sent via the bridge every time changes are made.
The PR adds a way to deal with blobs via a new native module. The blob is constructed on the native side and the data never needs to pass through the bridge. Currently the only way to create a blob is to receive a blob from the server via websocket.
The PR is largely a direct port of https://github.com/silklabs/silk/tree/master/react-native-blobs by philikon into RN (with changes to integrate with RN), and attributed as such.
> **Note:** This is a breaking change for all people running iOS without CocoaPods. You will have to manually add `RCTBlob.xcodeproj` to your `Libraries` and then, add it to Build Phases. Just follow the process of manual linking. We'll also need to document this process in the release notes.
Related discussion - https://github.com/facebook/react-native/issues/11103
- `Image` can't show image when `URL.createObjectURL` is used with large images on Android
The websocket integration can be tested via a simple server,
```js
const fs = require('fs');
const http = require('http');
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({
server: http.createServer().listen(7232),
});
wss.on('connection', (ws) => {
ws.on('message', (d) => {
console.log(d);
});
ws.send(fs.readFileSync('./some-file'));
});
```
Then on the client,
```js
var ws = new WebSocket('ws://localhost:7232');
ws.binaryType = 'blob';
ws.onerror = (error) => {
console.error(error);
};
ws.onmessage = (e) => {
console.log(e.data);
ws.send(e.data);
};
```
cc brentvatne ide
Closes https://github.com/facebook/react-native/pull/11417
Reviewed By: sahrens
Differential Revision: D5188484
Pulled By: javache
fbshipit-source-id: 6afcbc4d19aa7a27b0dc9d52701ba400e7d7e98f
Summary:
Adding a Babel plugin that will analyze the file looking for any potential candidate to use `regenerator-runtime`, and if so, will inject dynamically the module. The module is injected per file, so we avoid polluting the global environment. The plugin is also able to inject the `require` call beforehand, so that the inliner can pick them and inline them.
The Babel plugin is part of `react-native-babel-preset`, so as long as you are using this preset you are safe. If not, you should include the specific transformer into your list of plugins, as `react-native-babel-preset/transforms/transform-regenerator-runtime-insertion.js`.
Reviewed By: davidaurelio
Differential Revision: D5388655
fbshipit-source-id: dc403f3d5e2d807529eb8569a85c45fec36a6a3e
Summary: This fixes pretty bad issue when contentSize is calculated based on an intrinsic horizontal (width) limitation, not on a real/current horizontal (width) one.
Reviewed By: mmmulani
Differential Revision: D5422114
fbshipit-source-id: 0eb582aeb59d29530990d4faabf2f41baa79c058
Summary: The implementation of `clearsOnBeginEditing` was unified and moved to superclass.
Reviewed By: javache
Differential Revision: D5299396
fbshipit-source-id: 98c5494a782cbe4df5b2d6021828eb7b2012f6dc
Summary:
It's very important in complex UIs to be able to apply alpha channel-based masks to arbitrary content. Common use cases include adding gradient masks at the top or bottom of scroll views, creating masked text effects, feathering images, and generally just masking views while still allowing transparency of those views.
The original motivation for creating this component stemmed from work on `react-navigation`. As I tried to mimic behavior in the native iOS header, I needed to be able to achieve the effect pictured here (this is a screenshot from a native iOS application):
![iOS native navbar animation](https://slack-imgs.com/?c=1&url=https%3A%2F%2Fd3vv6lp55qjaqc.cloudfront.net%2Fitems%2F0N3g1Q3H423P3m1c1z3E%2FScreen%2520Shot%25202017-07-06%2520at%252011.57.29%2520AM.png)
In this image, there are two masks:
- A mask on the back button chevron
- A gradient mask on the right button
In addition, the underlying view in the navigation bar is intended to be a UIBlurView. Thus, alpha masking is the only way to achieve this effect.
Behind the scenes, the `maskView` property on `UIView` is used. This is a shortcut to setting the mask on the CALayer directly.
This gives us the ability to mask any view with any other view. While building this component (and testing in the context of an Expo app), I was able to use a `GLView` (a view that renders an OpenGL context) to mask a `Video` component!
I chose to implement this only on iOS right now, as the Android implementation is a) significantly more complicated and b) will most likely not be as performant (especially when trying to mask more complex views).
Review the `<MaskedViewIOS>` section in the RNTester app, observe that views are masked appropriately.
![example](https://d3vv6lp55qjaqc.cloudfront.net/items/250X092v2k3f212f3O16/Screen%20Recording%202017-07-07%20at%2012.18%20PM.gif?X-CloudApp-Visitor-Id=abb33b3e3769bbe2f7b26d13dc5d1442&v=5f9e2d4c)
Closes https://github.com/facebook/react-native/pull/14898
Differential Revision: D5398721
Pulled By: javache
fbshipit-source-id: 343af874e2d664541aca1fefe922cf7d82aea701
Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.
Fixes#14620
Refs #14712
Closes https://github.com/facebook/react-native/pull/14729
Differential Revision: D5321810
Pulled By: hramos
fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
Summary:
Adding a Babel plugin that will analyze the file looking for any potential candidate to use `regenerator-runtime`, and if so, will inject dynamically the module. The module is injected per file, so we avoid polluting the global environment. The plugin is also able to inject the `require` call beforehand, so that the inliner can pick them and inline them.
The Babel plugin is part of `react-native-babel-preset`, so as long as you are using this preset you are safe. If not, you should include the specific transformer into your list of plugins, as `react-native-babel-preset/transforms/transform-regenerator-runtime-insertion.js`.
Reviewed By: davidaurelio
Differential Revision: D5321193
fbshipit-source-id: fd4805b28c8a2b986842e23570a64003370d2067
Summary:
Standard only-numeric (number pad) keyboard on iOS does not have any "Done" or "Enter" button, and this is often very badly hurt user experience.
Usually it can be solved by implementing custom `inputAccessoryView`, but RN does not have built-in support for customizing it.
So, this commit introduced limited support only for "Done" button (returnKeyType="done") and it should suite very well for the vast majority of use cases.
This is highly requested feature, see more details here:
https://github.com/facebook/react-native/issues/1190
Reviewed By: mmmulani
Differential Revision: D5268020
fbshipit-source-id: 90bd5bffac6aaa1fb7c5c2ac539b35b04d45918f
Summary:
Fix this crash by making sure the RCTDeviceInfo is doing things on the main thread.
This fixes#14043.
Reviewed By: ashwinb
Differential Revision: D5286746
fbshipit-source-id: cce3426a6e7e7221cff82f8bca663d9a060dd358
Summary:
<details>
Thanks for submitting a PR! Please read these instructions carefully:
- [ ] Explain the **motivation** for making this change.
- [ ] Provide a **test plan** demonstrating that the code is solid.
- [ ] Match the **code formatting** of the rest of the codebase.
- [ ] Target the `master` branch, NOT a "stable" branch.
Please read the [Contribution Guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md) to learn more about contributing to React Native.
</details>
_What existing problem does the pull request solve?
In iOS when sending a silent push notification you need to configure the 'content-available' APS key to the value of 1 (When this key is present, the system wakes up your app in the background and delivers the notification to its app delegate, see [apple docs](https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/PayloadKeyReference.html#//apple_ref/doc/uid/TP40008194-CH17-SW1)).
This PR exposes this property to the notification event handler so app code can handle silent push scenario specifically. Currently this property is not available.
I've updated the PushNotificationIOSExample in the RNTester.
1. Open RNTester in xcode
2. Enable the push notifications capability
3. run on device
4. Go to PushNotificationIOS
5. click on "send fake notification"
6. verify alert message contains 'content-available' with a value of 1.
Closes https://github.com/facebook/react-native/pull/14584
Differential Revision: D5279181
Pulled By: shergin
fbshipit-source-id: d2288e147d89ba267f54265d819aa0a9969095e7
Summary:
Flashing scroll indicators is a standard behavior on iOS to show the user there's more content.
Launch RNTester on iOS, go to the ScrollView section, tap the "Flash scroll indicators" button.
You'll see this:
![Flash scroll indicators](https://cloud.githubusercontent.com/assets/57791/26250919/ebea607a-3cab-11e7-96c6-27579cc809ab.gif)
I've exposed the method `flashScrollIndicators` on all scrolling components that were already exposing a `scrollToXXX` method so it's usable from those components using a ref.
Let me know what you think.
Closes https://github.com/facebook/react-native/pull/14058
Differential Revision: D5103239
Pulled By: shergin
fbshipit-source-id: caad8474fbe475065418d771b17e4ea9766ffcdc
Summary:
lineBreakMode is a non-existing property (or maybe legacy?)
While reading the docs I encountered this prop being used in the example, but it doesn't exist in the codebase anymore.
Closes https://github.com/facebook/react-native/pull/13820
Differential Revision: D5189652
Pulled By: javache
fbshipit-source-id: 70e620fc094ae5e1628ab13ee9e410044e4f5291
Summary:
Sometimes, when we implement some custom RN view, we have to proxy all accessible atributes directly to some subview which actually has accesible content. So, in other words, this allows bypass some axillary views in terms of accessibility.
Concreate example which this approach supposed to fix:
https://github.com/facebook/react-native/pull/14200/files#diff-e5f6b1386b7ba07fd887bca11ec828a4R208
Reviewed By: mmmulani
Differential Revision: D5143860
fbshipit-source-id: 6d7ce747f28e5a31d32c925b8ad8fd4b98ce1de1
Summary:
The `requestIdleCallback` sometimes doesn't work in `Debug JS Remotely` mode if I use real device, the callback will never called. I guess it may be debugger worker and device caused by the time gap, or some cause websocket blocking, so it's just sometimes happening.
I think we can support [options](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/requestIdleCallback#Parameters) for that.
Added an example `Run requestIdleCallback with timeout option` for Timers of UIExplorer, it use `{ timeout: 100 }` option with burn CPU 100ms, we can see `didTimeout` is true.
Closes https://github.com/facebook/react-native/pull/13116
Differential Revision: D4894348
Pulled By: hramos
fbshipit-source-id: 29c4c2fe5634b30a8bf8d3495305cd8f635ed922
Summary:
Motivation:
* We maintain two different implementation of <TextInput> (multilined and singlelined), this change makes the implementations much similar which will help us to support and improve both of them in the (near) future;
* We have to have separated RCTView-based container view for (TextField) to support sofisticated bordering and so on;
* It opens to us possibility to unify UITextView and UITextField subclasses and remove code duplication across RCTTextView and RCTTextField;
* Making things decoupled in general will allow us to fix existing bugs with events.
Reviewed By: mmmulani
Differential Revision: D5083010
fbshipit-source-id: 2f2d42c2244d2b39256c51480c1f16f4e3947c01
Summary: Now padding, border and intinsic sizes are computed same way as for singlelined text input.
Reviewed By: mmmulani
Differential Revision: D5075880
fbshipit-source-id: 1bc2fd479c13a003c717b1fc3d9c69f4639d4444
Summary: Previosly `borderWidth` did not affect actual content inset (which was a problem).
Reviewed By: mmmulani
Differential Revision: D5072483
fbshipit-source-id: d43cba7414a9335b9f9fd4d1565d7aee403cce0e
Summary:
Singleline <TextInput> now has intrinsic size which is equal to size of placeholder.
And if <TextInput> does not have placeholder it still has intrinsic height.
So, we don't need to set the size up manually every single time anymore!
(Multiline <TextInput> already has this feature.)
Reviewed By: mmmulani
Differential Revision: D5069971
fbshipit-source-id: f65c1062a812259b66d287929314dc571dc1f3ee
Summary:
We found that `-[CALayer renderInContext:]` produces bad results in some cases (which is actually documented thing!),
so we decided to replace it with `-[UIView drawViewHierarchyInRect:]` which is more reliable (I hope).
As part of this change I completly removed support of `CALayer` from local fork of `RNTesterIntegrationTests`.
See https://github.com/facebook/react-native/pull/14011#issuecomment-303844580 for more details.
janicduplessis
Reviewed By: javache
Differential Revision: D5129492
fbshipit-source-id: 6a9227037c85bb8f862d55267f5301e177985ad9
Summary:
Follow up to #11973 to add support to Animated.loop with useNativeDriver on iOS.
**Test plan**
Test with new UIExplorer example
Run unit tests
Closes https://github.com/facebook/react-native/pull/13359
Differential Revision: D4960754
Pulled By: javache
fbshipit-source-id: caa840281f1b060df7a2b1c50405fcae1e1b0de6
Summary:
Previously <TextInput>'s onContentSizeChange event fires very rearly, usually just once after initial layout. This diff fixed that.
I also considered to a bunch of another things to get the native notification, but I found that overriding `onTextChanged` is the most reliable, easy and effitient way to implement this.
I tried/considered:
* onLayout (does not fire)
* OnPreDrawListener (fires to often)
* OnGlobalLayoutListener (does not fire)
* OnLayoutChangeListener (does not fire)
* isLayoutRequested (too hacky)
(I also fixed the <AutoExpandingTextInput> demo to illustrate the fix.)
And just heads up, we will remove `contentSize` info from `onChange` event very soon.
GH issue: https://github.com/facebook/react-native/issues/11692
Reviewed By: achen1
Differential Revision: D5132589
fbshipit-source-id: e7edbd8dc5ae891a6f4a87b51d9450b8c6ce4a1e
Summary:
What existing problem does the pull request solve?
Beginning in iOS9, Apple has deprecated `-application:openURL:sourceApplication:annotations:`
`- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(nullable NSString *)sourceApplication annotation:(id)annotation NS_DEPRECATED_IOS(4_2, 9_0, "Please use application:openURL:options:") __TVOS_PROHIBITED;`
This PR uses the newly recommended method:
`- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)`
while meanwhile, leaving the deprecated one for developers wishing to use the older `-application:openURL:sourceApplication:annotations:` for apps that support versions 8.x or less.
Benefits will include:
- [x] less warnings
- [x] official deprecation should happen when iOS 11 is deployed
- [x] TVOS support
Closes https://github.com/facebook/react-native/pull/13615
Differential Revision: D4987980
Pulled By: javache
fbshipit-source-id: ae07715a55ca627860262a9c8cf7df1e3c5e752b
Summary:
Fixes https://github.com/facebook/react-native/issues/13784
The section footer was only rendered with the last item of the section. However, that meant in sections where no items were rendered, no section footer would be rendered. This patch makes sure that when there are no items the section footer is rendered with the section header in addition to adding tests asserting the existance of section footers in empty lists.
One potential point of contention is whether or not a section separator (as defined by the `SectionSeparatorComponent` prop to `<SectionList>`) should be rendered in an empty list. I did not include a section separator for empty lists, but let me know if you think one should be included. See the test plan below for an image of an empty section rendered without a section separator.
I was also running into a lint error, `no-alert`, in `SectionListExample.js` around line 135 that blocked me from publishing. This error looks to be triggered when the `alert()` global function is called, so to fix the error I added an import for the `Alert` module and called the `alert()` function on that module.
To help debug the `scrollToLocation()` behavior that was modified as a part of this PR I added three buttons (can be seen in the test plan image) which scroll to arbitrary points in the list.
Reviewed By: sahrens
Differential Revision: D5084095
fbshipit-source-id: 4c98bebc1c3f1ceaa5a634fa144685d83d1072df
Summary:
**Motivation**
The ART library is part of the react-native repo, but is not included in UIExplorer and has no native testing. This PR adds the ART library to UIExplorer, adds an example tab for it, and adds a snapshot test.
**Test plan**
New snapshot test.
Closes https://github.com/facebook/react-native/pull/13621
Differential Revision: D4954082
Pulled By: javache
fbshipit-source-id: 83e21c5df1b766ff6ca9f8914eb3382f7323627d