Summary: Add support inlining images into text inputs. For now this is only available on Android.
Reviewed By: andreicoman11
Differential Revision: D3470805
fbshipit-source-id: 14db05ec4d5af549bf314b903654314f39bf73ea
Summary: Found a couple of places where we were copy-pasting the logic `ResourceDrawableIdHelper` had. This class was only available on the image module and it had package visibility. I moved it to its own module so that we can easily use it from others.
Reviewed By: andreicoman11
Differential Revision: D3463697
fbshipit-source-id: 708058c5f2445e27b151d8a6f3b47fd23485bc88
Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?
This adds support for a text field that the user can click-and-drag to select text (which can then be copied using the native selected-text-hover-widget).
I'd love to add this to iOS too, but iOS appears to draw glyphs directly to the screen for its <Text> widget (versus using UITextField), so it might be too difficult to support there. But at least I can support my Android users with this change.
Let me know if/what kind of "demonstrate the code is solid" you would like for this. A screenshot of selected text with this property set?
Closes https://github.com/facebook/react-native/pull/8028
Differential Revision: D3474196
Pulled By: bestander
fbshipit-source-id: 8d3656681265a0e6229bfa13ff2ae021e894d3cd
Summary:
ImageView will now interrogate fresco cache for images that can be shown before
the one with the best fitting size is downloaded. Cache interrogation does not
take into account that the images from cache are smaller or bigger than the best
fit. Most of the cases, the smaller one will be displayed. It is also possible
that a bigger image is available for being displayed, but ideally we'd still
want the best fit to be shown, so as to not decode and resize images that are
too big.
I've added a ImageSource class to simplify things. This makes it easier to
lazy-parse the Uri's when necessary, and cache data related to that uri
and wether the image is local. This also gets rid of the Map, which makes
parsing the source a bit more elegant.
Reviewed By: foghina
Differential Revision: D3392751
fbshipit-source-id: f6b803fb7ae2aa1c787aa51f66297a14903e4040
Summary:
This adds support for specifying multiple sources for an image component, so that native can choose the best one based on the flexbox-computed size of the image.
The API is as follows: the image component receives in the `source` prop an array of objects of the type `{uri, width, height}`. On the native side, the native component will wait for the layout pass to receive the width and height of the image, and then parse the array to find the best fitting one. For now, this does not support local resources, but it will be added soon.
To see how this works and play with it, there's an example called `MultipleSourcesExample` under `ImageExample` In UIExplorer.
Reviewed By: foghina
Differential Revision: D3364550
fbshipit-source-id: 66c5aeb2794f2ffeff8da39a9c0b95155fb2d41f
Summary:
Reduce the public surface area of TextInput. It only exposes a secureTextEntry property, but on Android was also accepting password as a prop.
This removes that.
Reviewed By: javache
Differential Revision: D3392223
fbshipit-source-id: 67c36fbe16fe493e2841d5d9deb78e3be2209ebd
Summary:
Instead of passing the helper to each method that uses it, just pass it
to the image constructor.
Reviewed By: dmmiller
Differential Revision: D3364532
fbshipit-source-id: 949bdbf951875c9b8cd05d028a2c329e12d72042
Summary:
When the activity hosting a Modal goes away, we should dismiss the dialog from the stack and then reconstitute it when the activity comes back. This means that if an activity is paused because another activity is placed on top of it but our ui operation was delayed, it will not blow up finding no window since it is gone.
Also fixes a place where we should remove a listener for lifecycle events which we were not doing.
Reviewed By: halfjuice
Differential Revision: D3357286
fbshipit-source-id: c5c6dd8e5ef299762ed9aa15a6910ce9c0b111dc
Summary:
The API for `ActivityIndiatorIOS` and `ProgressBarAndroid` is very similar and can be merged in a cross platform component that displays a circular indeterminate loading indicator.
This deprecates `ActivityIndiatorIOS` and non-horizontal `ProgressBarAndroid` in favor of this new component.
**Test plan (required)**
Tested with the ActivityIndicator example in UIExplorer on android and ios. Also made sure that `ActivityIndicatorIOS` still works and displays a deprecation warning. Also tested that `ProgressBarAndroid` with `indeterminate == true` and `styleAttr != 'Horizontal'` displays a deprecation warning.
Closes https://github.com/facebook/react-native/pull/6897
Differential Revision: D3351607
Pulled By: dmmiller
fbshipit-source-id: b107ce99d966359003e8b3118cd97b90fa1d3d7d
Summary:
Improved version of #7317.
`setRefreshing` and `setProgressViewOffset` needs to be called after the view has been layed out. Instead of using `post` to do that we update the `refreshing` and `progressViewOffset` values in the first call to `onLayout`.
I also noticed that `progressViewOffset` default value wasn't exactly the same as when not calling `setProgressViewOffset` at all. Tweaked the values to match android defaults.
**Test plan (required)**
Make sure the integration test passes,
In UIExplorer: test RefreshControl with `refreshing = true` initially, test `progressViewOffset`.
Closes https://github.com/facebook/react-native/pull/7683
Differential Revision: D3334426
fbshipit-source-id: ddd63a5e9a6afe2b8b7fe6a25e875a40f4e888c6
Summary:
We want to give people the ability to log scroll performance (including Fb).
This adds an interface that can be enabled and disabled from the react scroll views.
This is a prerequisite to implementing the actual framerate logger that will log dropped
frames while scrolling in prod.
Reviewed By: astreet
Differential Revision: D3283588
fbshipit-source-id: ed9736cb9ed3f441511647f36b1460092bd91e56
Summary:
There was a race condition with `SwipeRefreshLayout` that cause the `RefreshControl` to keep refreshing when it shouldn't.
It was caused because we have to use `post` to set the refreshing state otherwise it doesn't work when setting `refreshing=true` on initial mount. What happened is that `post` doesn't guarantee the order the runnables will be called so calling post with `refreshing=true` followed by `refreshing=false` caused the `resfreshing=false` runnable to be called before the `resfreshing=true` one. This made it stay in refreshing state when it should not.
```
D/test ( 6171): setRefreshing true
W/ReactNativeJS( 6171): false
D/test ( 6171): setRefreshing false
D/test ( 6171): setRefreshing post false
D/test ( 6171): setRefreshing post true
```
This change adds an instance variable and uses it in the `post` runnable to make sure the last set value is always used.
**Test plan (required)**
Tested that it fixed the issue in the [original issue app](https://github.com/digisqu
Closes https://github.com/facebook/react-native/pull/7317
Differential Revision: D3290464
Pulled By: andreicoman11
fbshipit-source-id: 15cabcfc6d2f191443be96e8845b924ce66c369f
Summary:
This is a nice feature to have.
I've tested this by copying and renaming the ViewPager java and javascript files from the react-native repo and including them in a project. Whats the best way to test this directly from the repo?
Closes https://github.com/facebook/react-native/pull/5968
Differential Revision: D3240651
Pulled By: mkonicek
fbshipit-source-id: 5f1d157216df4f3314915496188a92aec1b85e91
Summary:
Currently the Modal component on Android is rendered below the Status Bar, which changes it's color to grey, and in the UIExplorer example the backdrop is just formatted to look the same color. In some scenarios users may want to preserve the color of their status bar and make it look as though the modal is appearing on top. This PR allows for that.
This GIF shows current behavior and new behavior with the translucentStatusBar prop set to true.
I've updated the UIExplorer app to demonstrate and the docs as shown below
Thanks!
Closes https://github.com/facebook/react-native/pull/7157
Differential Revision: D3264497
Pulled By: dmmiller
fb-gh-sync-id: 61346d99414d331d3420f44a4c5f6341b0973be6
fbshipit-source-id: 61346d99414d331d3420f44a4c5f6341b0973be6
Summary:
Add the possibility to define a progress view top offset to RefreshControl on android. As i comment in #6740, contentInset does the trick on IOS.
Looking android documentation seems that exists a possible solution:
http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html#setProgressViewOffset(boolean, int, int)
This pull request implement that but keeping it simple, only a top offset.
For example, now we could put navigation bar over the scrollview (or listview) and define a progressViewOffset on RefreshView in order to start behind the navigation. At this point we could make some kind of coordinator layout to hide/show navigation on scroll.
To maintain the default behavior, start point is equal to start point minus progress circle diameter in order to create that progress circle before the start point.
Closes https://github.com/facebook/react-native/pull/6759
Differential Revision: D3240664
Pulled By: mkonicek
fb-gh-sync-id: ccf866272e871811c1c6dcc2a34f5c217967feee
fbshipit-source-id: ccf866272e871811c1c6dcc2a34f5c217967feee
Summary:
This adds support for pagingEnabled to the HorizontalScrollView.
This is an initial implementation.
Because Android doesn't provide great details about what is happening with a scroll view after you are done touching it, we have some post touch handling. This is kicked off either by touch up or a fling call.
Once we are doing that handling, we start a runnable that basically checks if we are still scrolling. If we are, we just schedule that runnable again and check a frame later. If we are done scrolling (no onScrollChanged since we last fired), we could be in one of two states, the fling is done or we are done snapping to the page boundary. If we are in the fling done case, we then check if we need to scroll to a page boundary. If so, we call smoothScrollTo and schedule ourself to check onScroll events again until done with that scroll. If we are done with both (either we only did momentum scroll or we did that and then snapped to page), we can then fire the final event and stop checking. This logic is all in handlePostTouchScrolling.
Because of the decision to only do page scrolling after momentum ends, we do allow you to scroll through with momentum a number of pages and the transition can be a little strange where it stops a sec and then slides to be page aligned. As a follow up, we can probably smooth that up by changing the value we pass to super.fling() that would adjust it to be let momentum carry it to the page boundary.
Reviewed By: weicool
Differential Revision: D3207608
fb-gh-sync-id: 02f62970ed9a5e3a5f9c0d959402756bc4b3699e
fbshipit-source-id: 02f62970ed9a5e3a5f9c0d959402756bc4b3699e
Summary:
We have a crash in prod t11090540, urgent fix same way as in setFontStyle
Closes https://github.com/facebook/react-native/pull/7362
Reviewed By: foghina
Differential Revision: D3254158
Pulled By: dmmiller
fb-gh-sync-id: a497d0d4d0e4df9284e328ebb14fee74ba2f899b
fbshipit-source-id: a497d0d4d0e4df9284e328ebb14fee74ba2f899b
Summary:
textShadowOffset design is `ReactPropTypes.shape({width: ReactPropTypes.number, height: ReactPropTypes.number})`, so either width or height is optional.
Unfortunately, in Android implementation, it is my bad not handling optional case and lead to an exception.
Thanks kohver for reporting [this issue](https://github.com/facebook/react-native/pull/4975#issuecomment-213006641)
**Test plan (required)**
*Before this fix*
1. Modify TextExample.android.js to `<Text style={{fontSize: 20, textShadowOffset: {height: 10}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>` which really raise a redbox.
*After this fix*
1. Test original TextExample.android.js textShadowOffset works well.
2. Modify TextExample.android.js to `<Text style={{fontSize: 20, textShadowOffset: {height: 10}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>` which works well without redbox.
Closes https://github.com/facebook/react-native/pull/7119
Differential Revision: D3240607
Pulled By: mkonicek
fb-gh-sync-id: b13221ae1586594890b0f4aa644ace7c0d5d6c58
fbshipit-source-id: b13221ae1586594890b0f4aa644ace7c0d5d6c58
Summary:
**Motivation**: Arc drawing has been broken on Android for some time. dgladkov submitted a PR, which ended up having a bug and was never merged. This PR should fix that bug as well as provide screenshots to prove it works.
**Reproducing the Bug:** dgladkov made a simple test app which helps to illustrate the bug. The repo can be found [here](https://github.com/dgladkov/RNArtArcDrawingBug). The demo app illustrates that on iOS, wedges are drawn correctly, but Android only draws full circles. [Direct Link to iOS Before](https://github.com/dgladkov/RNArtArcDrawingBug/blob/master/images/ios.png). [Direct Link to Android Before](https://github.com/dgladkov/RNArtArcDrawingBug/blob/master/images/android.png).
**Proof The Bug is Fixed:** [Here is a direct link to Android After pic.](http://i.imgur.com/9dTU2Xn.png) You can see the wedges match the iOS Before screenshot.
**What went wrong:** dgladkov's solution relied on Java's modulus, which in fact, implements modulus in a non-standard way. Modulus should a
Closes https://github.com/facebook/react-native/pull/7049
Differential Revision: D3234404
Pulled By: spicyj
fb-gh-sync-id: 6b85eb42389da6c344ec9723c7f81f61473246b0
fbshipit-source-id: 6b85eb42389da6c344ec9723c7f81f61473246b0
Summary:
**Motivation**: Arc drawing has been broken on Android for some time. dgladkov submitted a PR, which ended up having a bug and was never merged. This PR should fix that bug as well as provide screenshots to prove it works.
**Reproducing the Bug:** dgladkov made a simple test app which helps to illustrate the bug. The repo can be found [here](https://github.com/dgladkov/RNArtArcDrawingBug). The demo app illustrates that on iOS, wedges are drawn correctly, but Android only draws full circles. [Direct Link to iOS Before](https://github.com/dgladkov/RNArtArcDrawingBug/blob/master/images/ios.png). [Direct Link to Android Before](https://github.com/dgladkov/RNArtArcDrawingBug/blob/master/images/android.png).
**Proof The Bug is Fixed:** [Here is a direct link to Android After pic.](http://i.imgur.com/9dTU2Xn.png) You can see the wedges match the iOS Before screenshot.
**What went wrong:** dgladkov's solution relied on Java's modulus, which in fact, implements modulus in a non-standard way. Modulus should a
Closes https://github.com/facebook/react-native/pull/7049
Differential Revision: D3234404
Pulled By: spicyj
fb-gh-sync-id: 4974b818dc49d9d16f2483c49b462c459a8bb479
fbshipit-source-id: 4974b818dc49d9d16f2483c49b462c459a8bb479
Summary: When the ModalHostView is added as a child of whatever view holds it, if accessibility is turned on, Android will walk up to the root and then walk all children of the child and verify that they are indeed children of the root. Since ModalHostView actually adds its children to a new ReactDialogViewGroup which has the Dialog as a parent, there is a disagreement about the tree deep in the bowels of View when it performs that walk. The trick is to stop from adding the children of the ModalHostView when walking for accessibility. The accessibility of those children views are properly handled by the hosting Dialog.
Reviewed By: andreicoman11
Differential Revision: D3230033
fb-gh-sync-id: 1e5ac334c996b1d5f50c75ded60805d8b871477a
fbshipit-source-id: 1e5ac334c996b1d5f50c75ded60805d8b871477a
Summary:Using TouchableNativeFeedback has been a problem for me because the ripples it makes don't follow the child view's border radii so the ripples stick out of the child view's rounded corners. This PR should fix this problem with a minor caveat: this only works for TouchableNativeFeedback.Ripple and not TouchableNativeFeedback.SelectableBackground. I searched how I could apply corner radius to selectableItemBackground and it doesn't seem to be possible (the prevalent advice is to create the ripple manually which is equivalent to using TNF.Ripple in our case), though I could be wrong.
I added [an example to UIExplorer (TouchableExample)](http://i.imgur.com/CHY9xjW.png). This is my first PR to this repo so let me know if something's wrong. Cheers!
Closes https://github.com/facebook/react-native/pull/6515
Differential Revision: D3126513
Pulled By: AaaChiuuu
fb-gh-sync-id: 4a00e7177ee4ffd8dffeca143f4f43f08c99b5a1
fbshipit-source-id: 4a00e7177ee4ffd8dffeca143f4f43f08c99b5a1
Summary:Fixes #5408 as per ide and vjeux suggestions here https://github.com/facebook/react-native/issues/529#issuecomment-107328799
Could've been probably done in a single `if` clause, but this is more explicit and leaves potential place for future implementation (if we ever decide to do so)
Closes https://github.com/facebook/react-native/pull/7197
Differential Revision: D3217740
Pulled By: vjeux
fb-gh-sync-id: aa08a5c42e43c1abe17b72a424ee96146f2667f6
fbshipit-source-id: aa08a5c42e43c1abe17b72a424ee96146f2667f6
Summary:Using TouchableNativeFeedback has been a problem for me because the ripples it makes don't follow the child view's border radii so the ripples stick out of the child view's rounded corners. This PR should fix this problem with a minor caveat: this only works for TouchableNativeFeedback.Ripple and not TouchableNativeFeedback.SelectableBackground. I searched how I could apply corner radius to selectableItemBackground and it doesn't seem to be possible (the prevalent advice is to create the ripple manually which is equivalent to using TNF.Ripple in our case), though I could be wrong.
I added [an example to UIExplorer (TouchableExample)](http://i.imgur.com/CHY9xjW.png). This is my first PR to this repo so let me know if something's wrong. Cheers!
Closes https://github.com/facebook/react-native/pull/6515
Differential Revision: D3126513
Pulled By: mkonicek
fb-gh-sync-id: 1d3e92243abf9706132ae47c485d9e04a9b47d81
fbshipit-source-id: 1d3e92243abf9706132ae47c485d9e04a9b47d81
Summary:**Motivation:** In my app, I'm using a WebView that loads content from my mobile site. What I want to do is when a user presses a link on the loaded page, I want to stop the WebView's request, hijack the URL and open the URL in a new WebView, pushed to the top of the navigator stack. To me, this gives the overall app a more native feel, instead of implementing a rudimentary navbar on the main WebView to go back.
**Attempted Workarounds:** I've attempted to get similar functionality by capturing the onNavigationStateChange event in the WebView, and then within calling goBack + pushing the new view to the navigator stack. From a functionality standpoint, this works. However, from a UI standpoint, the user can clearly see the webview change states to a new page + go back before having the new view pushed on top of their nav stack.
Closes https://github.com/facebook/react-native/pull/6886
Differential Revision: D3212447
Pulled By: mkonicek
fb-gh-sync-id: 05911e583d9ba54ddbd54a772153c80ed227731e
fbshipit-source-id: 05911e583d9ba54ddbd54a772153c80ed227731e
Summary: Similar to ScrollView, adds ability to set scrollEnabled={false}, which prevents dragging. Paging is still possible by updating initialPage.
Reviewed By: AaaChiuuu
Differential Revision: D3209743
fb-gh-sync-id: ce4140323a03f2257a9bb310c7285418b01abae7
fbshipit-source-id: ce4140323a03f2257a9bb310c7285418b01abae7
Summary:Fix a stroke bug.
Stroke path will be coverd by fill layer.
Fix it by stroke path after fill is done
Closes https://github.com/facebook/react-native/pull/7092
Differential Revision: D3203188
Pulled By: spicyj
fb-gh-sync-id: 9b950372822da4dc520552c0c31aa3435750a0a3
fbshipit-source-id: 9b950372822da4dc520552c0c31aa3435750a0a3
Summary:Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
(You can skip this if you're fixing a typo or adding an app to the Showcase.)
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
fix typo in comment
Closes https://github.com/facebook/react-native/pull/7027
Differential Revision: D3190693
Pulled By: dmmiller
fb-gh-sync-id: fe1eddaeb13deac6f93da7ec600c267df2599586
fbshipit-source-id: fe1eddaeb13deac6f93da7ec600c267df2599586
Summary:This issue was found by brentvatne in https://github.com/facebook/react-native/issues/6805
The problem is an ordering issue. The internal state of the TextView (Editor) is updated when we set the text value for a ReactTextInput. When removeClippedSubviews is false, we addView the view which attaches it to the window, and then set the text. When removeClippedSubviews is false, we defer adding the view (caching it in mAllChildren in ReactViewGroup) until we know whether the view is actually going to show. This means when we set the initial text, that there is no window attached. Not having a window attached means that the Editor can't display the popup for PASTE and thinks that the text is not selectable and won't respond to the long press. To fix this we explicitly call setTextIsSelectable in onAttachedToWindow. This will cause the underlying TextView to have the Editor update and all will be in agreement.
Note:
This also makes it really easy to expose a selectable property on both Text and TextInput at the js level now.
Reviewed By: andreicoman11
Differential Revision: D3173631
fb-gh-sync-id: a208214474a92ecc1277b3be0d38e2ef9327ea2e
fbshipit-source-id: a208214474a92ecc1277b3be0d38e2ef9327ea2e
Summary:Split out from PR #4252 - kmagiera I've made the changes to how the radii arrays are allocated, is the approach I've taken correct? also it looks like ImageStylePropTypes are needed so I left them in for the moment. I suppose this pull request will only be valid if iOS supports image corner radii, but at least it's here if/when needed. Attached an image of how it handles the existing case:
Closes https://github.com/facebook/react-native/pull/5197
Differential Revision: D3138725
Pulled By: mkonicek
fb-gh-sync-id: df772fd07fe85386ae4c681f9e79a19d2316d38b
fbshipit-source-id: df772fd07fe85386ae4c681f9e79a19d2316d38b
Andrei Coman
Martín Bigio
Mike Lambert
Chris Hopman
Ahmed El-Helw
Andrei Coman
Sokovikov
Dave Miller
Janic Duplessis
Emil Sjolander
Nathan Spaun
Konstantin Raev
Kevin Johnson
Olivier Notteghem
Jesse Sessler
UnoDeTantos
Jimmy Mayoukou
Kudo Chien
Michael Ortiz
Bruno Barbieri
Thomas Leplus
Jeff Chien
Mike Grabowski
Rui Chen
Andrew Gray
Angela Hess
Horcrux
hi大头鬼hi
mattds
Felix Oghina
