Summary:
Previously, the example MyListItem never referenced the selected prop, leaving ambiguity about the intention of the demo.
By adding a concrete implementation with coloring based on the selected prop, we can see that this is a demo of a multi-select list for batch actions instead of, say, a click-to-navigate nested list.
Here is a working Snack demo for future reference:
https://snack.expo.io/BkRMRTGB-
References #14872
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14957
Differential Revision: D5892186
Pulled By: sahrens
fbshipit-source-id: c7b46b5f6eae8f36bd4bda7cbbd354cc22108b42
Summary:
- Enable logging so `console.log` shows up in Xcode console (and CI?)
- Allow loading from bundler for rapid JS iteration.
- Add option to enable JS debugging, although it's a little ghetto.
Reviewed By: mmmulani
Differential Revision: D5869085
fbshipit-source-id: 9c4831859f1491f7f75786f730d8549d69623888
Summary: Adds an onDismiss so that navigation events can be chained to the dismissing of a modal.
Reviewed By: sahrens
Differential Revision: D5852953
fbshipit-source-id: a86e36fdd5b0b206c2dd9fa248e2a88da22efa31
Summary: Apple changed what messages get logged when a web socket connection fails. Lets hide them to make life better for engineers.
Reviewed By: javache
Differential Revision: D5879306
fbshipit-source-id: cde06405b4af251159269218bf922916a79ac840
Summary:
As a new user it took me a while to figure out you can import these examples directly. The import statement completes the example for new users like me who have no idea these components can be imported. It is a very important piece of information and it is hard to find otherwise.
I think this should be added to all the other component examples as well.
Documentation only.
Closes https://github.com/facebook/react-native/pull/15501
Differential Revision: D5882436
Pulled By: hramos
fbshipit-source-id: 2da0fe4c7c41e2fdb6b13a945460e17e16442d62
Summary:
This change improves the documentation for `ActionSheetIOS.js`. It's a bit skimpy as is.
Closes https://github.com/facebook/react-native/pull/16030
Differential Revision: D5882446
Pulled By: hramos
fbshipit-source-id: b59ce299a9142ebf015ed674c59e1e435deb759a
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:
Opening a new PR for #10946 (see discussion there).
This PR builds upon #14775 (iOS ViewManager inheritance) and #14261 (more extensible Android WebView).
**Motivation**
When `WebView.android.js` and `WebView.ios.js` use `requireNativeComponent`, they are hard-coded to require `RCTWebView`. This means if you want to re-use the same JS-logic, but require a custom native WebView-implementation, you have to duplicate the entire JS-code files.
The same is true if you want to pass through any custom events or props, which you want to set on the custom native `WebView`.
What I'm trying to solve with this PR is to able to extend native WebView logic, and being able to re-use and extend existing WebView JS-logic.
This is done by adding a new `nativeConfig` prop on WebView. I've also moved the extra `requireNativeComponent` config to `WebView.extraNativeComponentConfig` for easier re-use.
**Test plan**
jacobp100 has been kind enough to help me with docs for this new feature. So that is part of the PR and can be read for some information.
I've also created an example app which demonstrates how to use this functionality: https://github.com/cbrevik/webview-native-config-example
If you've implemented the native side as in the example repo above, it should be fairly easy to use from JavaScript like this:
```javascript
import React, { Component, PropTypes } from 'react';
import { WebView, requireNativeComponent, NativeModules } from 'react-native';
const { CustomWebViewManager } = NativeModules;
export default class CustomWebView extends Component {
static propTypes = {
...WebView.propTypes,
finalUrl: PropTypes.string,
onNavigationCompleted: PropTypes.func,
};
_onNavigationCompleted = (event) => {
const { onNavigationCompleted } = this.props;
onNavigationCompleted && onNavigationCompleted(event);
}
render() {
return (
<WebView
{...this.props}
nativeConfig={{
component: RCTCustomWebView,
props: {
finalUrl: this.props.finalUrl,
onNavigationCompleted: this._onNavigationCompleted,
},
viewManager: CustomWebViewManager
}}
/>
);
}
}
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
CustomWebView,
WebView.extraNativeComponentConfig
);
```
As you see, you require the custom native implementation at the bottom, and send in that along with any custom props with the `nativeConfig` prop on the `WebView`. You also send in the `viewManager` since iOS requires that for `startLoadWithResult`.
**Discussion**
As noted in the original PR, this could in principle be done with more React Native components, to make it easier for the community to re-use and extend native components.
Closes https://github.com/facebook/react-native/pull/15016
Differential Revision: D5701280
Pulled By: hramos
fbshipit-source-id: 6c3702654339b037ee81d190c623b8857550e972
Summary:
Looks like `-[NSLayoutManager ensureLayoutForTextContainer:textContainer]` has a bug that cause infinite loop inside this method
during measuring some special characters AND when specified `width` equals NaN (which is useless anyways).
So, we cover this case in this diff.
Reviewed By: javache
Differential Revision: D5859767
fbshipit-source-id: 58a5910f21f282bf5b82494916b5b02ad72d357f
Summary:
This avoids a crash when we try to load a PHAsset with nil image url. Specifically, the following condition evaluates to true when `imageURL` is nil:
```objc
if ([imageURL.scheme caseInsensitiveCompare:@"assets-library"] == NSOrderedSame) {
assetID = [imageURL absoluteString];
results = [PHAsset fetchAssetsWithALAssetURLs:@[imageURL] options:nil];
}
```
The crash will be "attempt to insert nil object from objects[0]" when we build the `@[imageURL]` array literal.
We've seen this emerge as a very common crash among Expo users, so I wanted to at least provide a clear error message instead of terminating the app.
Load an image from the photo library with a nil request url.
Closes https://github.com/facebook/react-native/pull/15952
Differential Revision: D5835219
Pulled By: ericnakagawa
fbshipit-source-id: 7be00a15e674a0905cf5c27c526ce9085d1b308f
Summary:
Fixing https://github.com/facebook/react-native/issues/13578
<!--
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!
-->
(Write your motivation here.)
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15419
Reviewed By: sahrens
Differential Revision: D5795844
Pulled By: tomasreimers
fbshipit-source-id: 4cdf97a2f5e83e38f4e12af771b512e7dddd212a
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:
Previously type Options had excludeActivityTypes property, but in RCTActionSheetManager.m and docs this property is named excludedActivityTypes.
<!--
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!
-->
Want to fix error in flow types
Actually, it seems there aren't any need for test plan for this PR. Just fix a mistyping error.
Closes https://github.com/facebook/react-native/pull/15881
Differential Revision: D5813539
Pulled By: ericnakagawa
fbshipit-source-id: 7d1269d4c177f920869bf6554f14af6db7a741ee
Summary:
This line accidentally became a no-op when the Map was converted to an Object.
Closes https://github.com/facebook/react-native/pull/15891
Differential Revision: D5811069
Pulled By: TheSavior
fbshipit-source-id: 43ac1835d15e2bee67ee45646bc238f917013836
Summary:
Hi guys,
A small typo found in the doc :)
Closes https://github.com/facebook/react-native/pull/15888
Differential Revision: D5809251
Pulled By: TheSavior
fbshipit-source-id: 7a2ca8f2cbca81aa2059ee619a8c6087256e39a6
Summary:
Use <ImageBackground> instead or (even better), implement it yourself using container <View> and nested <Image> with `position: absolute;` styling.
This diff was decoupled from D5189017 for more granularity.
Reviewed By: mmmulani
Differential Revision: D5779989
fbshipit-source-id: e0a724008e679426f61ed0841f9eff6d62fb943b
Summary:
This change only affects tests run with Jest. `require('/images/image1.png')` will be replaced with
```
Object {
"testUri": "relative/path/to/images/image1.png",
}
```
in the Jest snapshot instead of always being 1 returned by RelativeImageStub. This change makes it possible to test conditional asset loading in components.
The problem with this change is that it will probably break a lot of existing snapshots, but that should be easily fixed when a project updates to a new version of React Native by running `jest -u` to update all snapshots.
A component can have conditional asset loading based on its props, this logic would be nice to test with Jest snapshots. This problem has been discussed in https://github.com/facebook/jest/issues/2838.
* **Who does this affect**: Everyone using `Image` in Jest snapshots
* **How to migrate**: Running `jest -u` will update the snapshots, the snapshots should be reviewed that they are correct.
* **Why make this breaking change**: It enables testing of conditional asset loading.
* **Severity (number of people affected x effort)**: Low.
Closes https://github.com/facebook/react-native/pull/13319
Reviewed By: rafeca
Differential Revision: D5708180
Pulled By: mjesun
fbshipit-source-id: 16ac42004d597db08545a21d4fffe95c5ee7e21f
Summary: FlatList only supports one viewability configuration and callback. This change extends FlatList and VirtualizedList to support multiple viewability configurations and corresponding callbacks.
Reviewed By: sahrens
Differential Revision: D5720860
fbshipit-source-id: 9d24946362fa9001d44d4980c85f7d2627e45a33
Summary:
Otherwise, you're met with a bewildering blank page. :D
<!--
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!
-->
(Write your motivation here.)
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15754
Differential Revision: D5768992
Pulled By: hramos
fbshipit-source-id: 39a9f7c208d635e089751015dcf2536144ec0176
Summary:
Fixed a typo in `ToastAndroid.js`'s comment.
No test plan. Just fix a typo.
Closes https://github.com/facebook/react-native/pull/15802
Differential Revision: D5767578
Pulled By: hramos
fbshipit-source-id: 4ccc708800f7d4259d266fba195981a85e6647a1
Summary:
Current Geolocation API docs do not mention using PermissionAndroid when working with API 23+. This updates the docs to reflect that requirement.
This a documentation change, so no testing is required.
Closes https://github.com/facebook/react-native/pull/14133
Differential Revision: D5767852
Pulled By: hramos
fbshipit-source-id: 25af70db864a50cdc5e3765eccdeecd49c084d9a
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!
-->
I was reading up on how to control the selected value of a `SegmentedControlIOS` component and noticed that the prop was written wrong in the description.
1. This PR changes only the content of a component description comment, and not any code.
Closes https://github.com/facebook/react-native/pull/15742
Differential Revision: D5757116
Pulled By: hramos
fbshipit-source-id: faccb95fb3a4ba2852c457c3559c066da09e6bb9
Summary:
Example for loading Media using CameraRoll getPhotos method
<!--
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!
-->
The cameraRoll API doesn't have a proper example of how to use the methods. So, I decided to provide a basic example with a use case.
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15647
Differential Revision: D5748965
Pulled By: hramos
fbshipit-source-id: df8ad50d597dcc745a7f6abcc52839695ffe452c
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!
-->
I am a web developer, who recently started coding for mobile apps using react-native. I was trying to use the `inlineImageLeft` props of TextInput, but I found that it's docs weren't sufficient. So a PR for it.
No code change. Updated the docs under website folder. Screenshot for the change below.
Closes https://github.com/facebook/react-native/pull/15708
Differential Revision: D5738795
Pulled By: hramos
fbshipit-source-id: b8b6cbac5c50abd4d8a6ef8089dc9d92bc0b7f6f
Taylor Kline
Spencer Ahrens
nicehacker
Mehdi Mulani
Nicholas Juntilla
Petter Hesselberg
Adam Miskiewicz
Naman Goel
Christian Brevik
Valentin Shergin
Brian Vaughn
Ben Roth
Kellie Medlin
Tomas Reimers
Joshua Alvarado
Maarten Schumacher
Anton Semenov
Elliott Sprehn
Alexandre Moureaux
Lincoln Hochberg
Miguel Jimenez Esun
m30do
Jiajie Zhu
Mandeep Baines
Jonathan Lee
Marshall Roch
Martin Yrjölä
Vince Oppedisano
bozdoz
Patrick
Tikhon Botchkarev
Mark Smith
Christopher Best
Shiva Pandey
Syed Haani Hasan
Wes Johnson
Eli White
