Summary:We'd plan to build the `NavigationLegacyNavigator` that is meant to replace
Navigator seemlessly without API changes. While the APIs remain
compatible with Navigator, it should be built with the new
Navigation API such as `NavigationAnimatedView`...etc.
To ensure that the new NavigationLegacyNavigagtor delivers the same
UX and maintains APIs compability, we'd start with using the exact same
examples as the same ones that Navigator uses.
Reviewed By: ericvicenti
Differential Revision: D2955273
fb-gh-sync-id: b4723cf54ea2258e5589f39dceeaee88be2b93f0
shipit-source-id: b4723cf54ea2258e5589f39dceeaee88be2b93f0
Summary:Currently, we're not taking advantage of Flow's built-in type definitions for the React library in all cases because Flow's definition uses `declare module react` and this file uses `import('React')`, which Flow thinks is a different library. After this change, the following starts working which didn't before:
```js
import { Component } from 'react-native';
class MyText extends Component<void, {text: string}, void> {
render() { return <Text>{this.props.text}</Text> }
}
// Correctly throws a Flow error for the missing "text" prop
const renderedText = <MyText />;
```
Closes https://github.com/facebook/react-native/pull/5489
Differential Revision: D2856176
fb-gh-sync-id: 473ca188ad7d990c3e765526c4b33caf49ad9ffd
shipit-source-id: 473ca188ad7d990c3e765526c4b33caf49ad9ffd
Summary:Basic implementation of the component NavigationCardStack that animates
a list of NavigationCard.
This will be used to port the UX of teh current Navigator.
Reviewed By: ericvicenti, fkgozali
Differential Revision: D2967065
fb-gh-sync-id: a72920e141364fab328e45a083aef21ca5e6fe0c
shipit-source-id: a72920e141364fab328e45a083aef21ca5e6fe0c
Summary:Unfortunately the 'screen' option in the `UIManager.takeSnapshot` API appears to work only on the iOS simulator, not on an actual device.
This diff removes the 'screen' option until a solution can be found that works on the device.
(Taking a snapshot of the window still works fine - it just won't include the status bar, etc.)
Reviewed By: javache
Differential Revision: D2971091
fb-gh-sync-id: 026b9d4eb2f59f686f58c18a16381ff325df612b
shipit-source-id: 026b9d4eb2f59f686f58c18a16381ff325df612b
Summary:Follow-up PR for #5931: Adding missing `TouchableNativeFeedback` example.
**Test plan**
- Run UIExplorer on iOS and Android devices
[Android]
- Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. There are two new buttons there: `Enabled TouchableNativeFeedback` and `Disabled TouchableNativeFeedback`. Buttons should behave according their titles.
[iOS]
- Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. As far as `TouchableNativeFeedback` is supported on Android only, you **wouldn't see** any new buttons there
**Code formatting**
This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
cc mkonicek
Closes https://github.com/facebook/react-native/pull/6123
Differential Revision: D2971021
fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
Summary:This adds a `takeSnapshot` method to UIManager that can be used to capture screenshots as an image.
The takeSnapshot method accepts either 'screen', 'window' or a view ref as an argument.
You can also specify the size, format and quality of the captured image.
I've added an example of capturing a screenshot at UIExplorer > Snapshot / Screenshot.
I've also added an example of sharing a screenshot to the UIExplorer > ActionSheetIOS demo.
Reviewed By: javache
Differential Revision: D2958351
fb-gh-sync-id: d2eb93fea3297ec5aaa312854dd6add724a7f4f8
shipit-source-id: d2eb93fea3297ec5aaa312854dd6add724a7f4f8
Summary: Add a simple URL parser to add linking support for UIExplorer iOS. Android should be very similar
Reviewed By: javache
Differential Revision: D2931764
fb-gh-sync-id: 0b029106160620267b82bdba510635ce224c5381
shipit-source-id: 0b029106160620267b82bdba510635ce224c5381
Summary:Add setTiming prop for custom timing configuration
Also improve the current timing of the navigation animation to look more natural and less springy
Reviewed By: javache
Differential Revision: D2938500
fb-gh-sync-id: 3e6c6dd6077ff9d6a343f760f7b762096ce76600
shipit-source-id: 3e6c6dd6077ff9d6a343f760f7b762096ce76600
Summary: Revise APIs of reducers, and ensure the stack reducer can support sub-reducers
Reviewed By: javache
Differential Revision: D2959915
fb-gh-sync-id: 20b28b9ead7ace3373489a806486999048d32aef
shipit-source-id: 20b28b9ead7ace3373489a806486999048d32aef
Summary:Use the new Navigation library to make the UIExplorer navigation more flexible.
Deep linking examples are coming soon (hint: we just need to convert URIs to UIExplorerActions!)
Reviewed By: javache
Differential Revision: D2798050
fb-gh-sync-id: c7775393e2d7a30a161d0770192309567dcc8b0c
shipit-source-id: c7775393e2d7a30a161d0770192309567dcc8b0c
Summary:`ActionSheetIOS` now supports sharing images or other media via the `showShareActionSheetWithOptions` method. Simply specify a local file or data uri using the `url` argument to share the file.
NOTE: this mechanism doesn't currently support sharing images from the camera roll, however you can work around this by first saving the image to the ImageStore, and then fetching the base64 data.
Reviewed By: javache
Differential Revision: D2954273
fb-gh-sync-id: d5158f9d167fe92199933ca703f40f561732ac37
shipit-source-id: d5158f9d167fe92199933ca703f40f561732ac37
Summary:This also fixes the examples since the app lifecycle methods were renamed recently.
Closes https://github.com/facebook/react-native/pull/6053
Differential Revision: D2959525
Pulled By: mkonicek
fb-gh-sync-id: 4a445b5e69b55aa75a1063054cf4c78de1f15da6
shipit-source-id: 4a445b5e69b55aa75a1063054cf4c78de1f15da6
Summary:I forgot to add a deprecation warning to PullToRefreshViewAndroid when I worked on RefreshControl. This adds one as well as remove it from the website and remove the UIExplorer example. Now that we have versioned doc I think it is fine to remove deprecated stuff from the website so it is easier for users to know what component they should use. Last thing, I enabled flow in RefreshControl and fixed the one warning.
Closes https://github.com/facebook/react-native/pull/6055
Differential Revision: D2959502
Pulled By: mkonicek
fb-gh-sync-id: 9b23f84ea35c770bfe2a83d0fd3ec7e439669c33
shipit-source-id: 9b23f84ea35c770bfe2a83d0fd3ec7e439669c33
Summary:PR for https://github.com/facebook/react-native/issues/5958. The viewport meta tags if present, are overridden from the page and it is rendered according to the screen size. An example has been added in the Web View section of UIExplorer demo app.
Closes https://github.com/facebook/react-native/pull/6013
Differential Revision: D2953940
Pulled By: nicklockwood
fb-gh-sync-id: 012769f3a2a3f7dc942b60de02a9d1b80a27236e
shipit-source-id: 012769f3a2a3f7dc942b60de02a9d1b80a27236e
Summary:- modify ReactViewBackgroundDrawable.java to make each border a trapezoid
- disable anti-alias to eliminate white spaces between borders
- add examples to BorderExample.js (see last one)
Closes https://github.com/facebook/react-native/pull/5911
Differential Revision: D2953734
Pulled By: dmmiller
fb-gh-sync-id: dd103d80dec53ad35c9539ab1ceb93ef857feeb9
shipit-source-id: dd103d80dec53ad35c9539ab1ceb93ef857feeb9
Summary: There is a NavigationState type within this module so the name cannot be shared
Reviewed By: hedgerwang
Differential Revision: D2938311
fb-gh-sync-id: c5208755c9dfa5bf0e67666957c01e203ddd4218
shipit-source-id: c5208755c9dfa5bf0e67666957c01e203ddd4218
Summary: We want to use a different navigation system for UIExplorer
Reviewed By: javache
Differential Revision: D2948412
fb-gh-sync-id: 43f2ff5e00582f065a992e32ea6d6ef159b92f60
shipit-source-id: 43f2ff5e00582f065a992e32ea6d6ef159b92f60
Summary:New prop `hitSlop` allows extending the touch area of Touchable components. This makes it easier to touch small buttons without needing to change your styles.
It takes `top`, `bottom`, `left`, and `right` same as the `pressRetentionOffset` prop. When a touch is moved, `hitSlop` is combined with `pressRetentionOffset` to determine how far the touch can move off the button before deactivating the button.
On Android I had to add a new file `ids.xml` to generate a unique ID to use for the tag where I store the `hitSlop` state. The iOS side is more straightforward.
terribleben worked on the iOS and JS parts of this diff.
Fixes#110
Closes https://github.com/facebook/react-native/pull/5720
Differential Revision: D2941671
Pulled By: androidtrunkagent
fb-gh-sync-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
shipit-source-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
Summary:
public
I was looking into the missing panels at the bottom of the <ListView> - Grid Layout example, and found that it was caused by several problems, some in the example and some in ListView itself.
The first problem seemed to be a bug in the `_getDistanceFromEnd()` method, which calculates whether the ListView needs to load more content based on the distance of the visible content from the bottom of the scrollview. This was previously using the function
Math.max(scrollProperties.contentLength, scrollProperties.visibleLength) - scrollProperties.visibleLength - scrollProperties.offset
to calculate the amount the user could scroll before they run out of content. This sort-of works in most cases because `scrollProperties.contentLength` is usually longer than `scrollProperties.visibleLength`, so this would generally evaluate to
scrollProperties.contentLength - scrollProperties.visibleLength - scrollProperties.offset
which meant that it would be positive as long as there was content still to be displayed offscreen, and negative when you reached the end of the content. This logic breaks down if `contentLength` is less than `visibleLength`, however. For example, if you have 300pts of content loaded, and your scrollView is 500pts tall, and your scroll position is zero, this evaluates to
Math.max(300, 500) - 500 - 0 = 0
In other words, the algorithm is saying that you have zero pts of scroll content remaining before you need to reload. But actually, the bottom 200pts of the screen are empty, so you're really 200pts in debt, and need to load extra rows to fill that space. The correct algorithm is simply to get rid of the `Math.max` and just use
scrollProperties.contentLength - scrollProperties.visibleLength - scrollProperties.offset
I originally thought that this was the cause of the gap, but it isn't, because ListView has `DEFAULT_SCROLL_RENDER_AHEAD = 1000`, which means that it tries to load at least 1000pts more content than is currently visible, to avoid gaps. This masked the bug, so in practice it wasn't causing an issue.
The next problem I found was that there is an implict assumption in ListView that the first page of content you load is sufficient to cover the screen, or rather, that the first _ second page is sufficient. The constants `DEFAULT_INITIAL_ROWS = 10` and `DEFAULT_PAGE_SIZE = 1`, mean that when the ListView first loads, the following happens:
1. It loads 10 rows of content.
2. It checks if `_getDistanceFromEnd() < DEFAULT_SCROLL_RENDER_AHEAD` (1000).
3. If it is, it loads another `DEFAULT_PAGE_SIZE` rows of content, then stops.
In the case of the ListView Grid Layout example, this meant that it first loaded 10 cells, then loaded another 1, for a total of 11. The problem was that going from 10 to 11 cells isn't sufficient to fill the visible scroll area, and it doesn't change the `contentSize` (since the cells wrap onto the same line), and since ListView doesn't try to load any more until the `contentSize` or `scrollOffset ` changes, it stops loading new rows at that point.
I tried fixing this by calling `_renderMoreRowsIfNeeded()` after `_pageInNewRows()` so that it will continue to fetch new rows until the `_getDistanceFromEnd()` is less than the threshold, rather than stopping after the first page and waiting until the `contentSize` or `scrollOffset` change, but although this solves the problem for the Grid Layout example, it leads to over-fetching in the more common case of a standard row-based ListView.
In the end, I just increased the `pageSize` to 3 for the Grid Layout example, which makes more sense anyway since loading a page that is not a multiple of the number of cells per row confuses the `_renderMoreRowsIfNeeded` algorithm, and leads to gaps at the bottom of the view.
This solved the problem, however there was still a "pop-in" effect, where the additional rows were paged in after the ListView appeared. This was simply a misconfiguration in the example itself: The default of 10 rows was insufficient to fill the screen, so I changed the `initialListSize` prop to `20`.
Reviewed By: javache
Differential Revision: D2911690
fb-gh-sync-id: 8d6bd78843335fb091e7e24f7c2e6a416b0321d3
shipit-source-id: 8d6bd78843335fb091e7e24f7c2e6a416b0321d3
Summary:
public
- Intro new back action
- Add support in the two main reducers
- Use it in examples to support Android back button
- Disable NavigationCard gestures on Android
Reviewed By: hedgerwang
Differential Revision: D2914154
fb-gh-sync-id: d4dce6538e19613a2ffca21e2e3b2ecaded3d5dc
shipit-source-id: d4dce6538e19613a2ffca21e2e3b2ecaded3d5dc
Summary:
This is a cut down version of a previous pull request with just the 4 corners catered for.
Closes https://github.com/facebook/react-native/pull/4252
Reviewed By: svcscm
Differential Revision: D2911959
Pulled By: androidtrunkagent
fb-gh-sync-id: 7ddcd684d90d4d92ccefed906c0126e92818dcde
Summary:
A new API to unify internal navigation. Also addresses a highly-rated community 'pain': https://productpains.com/post/react-native/better-navigator-api-and-docs/
Offers the following improvements:
- Redux-style navigation logic is easy to reason about
- Navigation state can be easily saved and restored through refreshes
- Declarative navigation views can be implemented in native or JS
- Animations and gestures are isolated and now use the Animated library
public
Reviewed By: hedgerwang
Differential Revision: D2798048
fb-gh-sync-id: 88027ef9ead8a80afa38354252bc377455cc6dbb
Summary:
accessibilityLabels are missing in these touchable*.js files.
for #5322
ide This is not tested yet. I will update with test.
Closes https://github.com/facebook/react-native/pull/5346
Reviewed By: svcscm
Differential Revision: D2882061
Pulled By: gkassabli
fb-gh-sync-id: dff0ef373e5f5895027cb1cc08c8887a6ace8eee
Summary:
public
The packager currently assumes that all assets that are not JSON or JS files must be images. Although it is possible to add other extension types, they crash the packager if you try to require them, because it attempts to get their dimensions, assuming that they are an image.
This is a crude workaround for that problem, which skips the image-specific processing for non-image assets, but really it would be better if the packager was properly aware of different asset types and treated them differently (e.g. for sounds it could include the duration, for HTML pages it could parse and include linked CSS files, etc).
I've also added an example of using `require('...')` to load a packager-managed HTML page in the UIExplorer WebView example. In future I anticipate that all static asset types (sounds, fonts, etc.) could be handled in this way, which allows them to be edited or added/removed on the fly instead of needing to restart the app.
Reviewed By: martinbigio
Differential Revision: D2895619
fb-gh-sync-id: cd93794ca66bad838621cd7df3ff3c62b5645e85
Summary:
I started working on improving the `StatusBar` API and make it work on Android. I added support for `setColor`, `setTranslucent` (the status bar is still visible but the app can draw under) and `setHidden` on Android. Looking for feedback on how to improve the API before I put more time on this :).
Right now I went for a cross platform API and functions that don't exist on a platform are just a no-op but I'm not sure it is the best choice since at the moment what is supported is very different between both platforms. I was wondering what you guys think and if it would be better off as 2 different modules.
It is also possible to port some of the features I added for Android to iOS even if there is no 'standard' way to do it. Like `setColor` could be implemented by drawing a colored view under the status bar and translucent by adding/removing some padding.
Closes https://github.com/facebook/react-native/pull/5360
Reviewed By: svcscm
Differential Revision: D2840417
Pulled By: nicklockwood
fb-gh-sync-id: 5c8d988bccf8035341f0efe27e54dd8402c18d24
Summary:
public
This adds support to set the highlight color on TextInput on Android. See https://github.com/facebook/react-native/pull/5678 for the iOS implementation.
Note : We will merge these two properties with one name 'selectionColor' in a follow on diff, and may move it to a style.
Reviewed By: nicklockwood
Differential Revision: D2895253
fb-gh-sync-id: 6f2c08c812ff0028973185356a8af285f7dd7969
Summary:
Currently only scroll events are send through `sendEvent`, and all of them are can be coalesced. In future (further in the stack) touch events will go through there as well, but they won't support coalescing.
In order to ensure js processes touch and scroll events in the same order as they were created, we will flush the coalesced events when we encounter one that cannot be coalesced.
public
___
//This diff is part of a larger stack. For high level overview what's going on jump to D2884593.//
Reviewed By: nicklockwood
Differential Revision: D2884591
fb-gh-sync-id: a3d0e916843265ec57f16aad2f016a79764dcce8
Summary:
I want to use the `RCTEvent` protocol for touch events as well. That's why I'm removing not very well defined `body` property and replacing it with `arguments` method, which will return an array that will be passed directly to the js call.
I think this makes sense because there is no unified arguments format for all events and and the called js method (`moduleDotMethod`) is already event specific.
This way touch events and scroll events can result in calling a completely different js function with a completely different arguments (what they indeed currently do).
public
___
//This diff is part of a larger stack. For high level overview what's going on jump to D2884593.//
Reviewed By: nicklockwood
Differential Revision: D2884590
fb-gh-sync-id: 2c1885c3414e255d8572c0fbbbfe62a23d94dd06
Summary:
This property was never used, so I'm removing it.
public
___
//This diff is part of a larger stack. For high level overview what's going on jump to D2884593.//
Reviewed By: javache
Differential Revision: D2884587
fb-gh-sync-id: acd5e576cd13a02e77225f3b308232f8331d3b61
Summary:
`RCTBaseEvent` was never used. This diff removes it.
public
___
//This diff is part of a larger stack. For high level overview what's going on jump to D2884593.//
Reviewed By: javache
Differential Revision: D2884585
fb-gh-sync-id: 66a6afcda3b5baec7f768682da215570f6d33bb1
Summary:
public
The current `ScrollView.scrollTo()` API is confusing due to the `(y, x)` parameter order, and the boolean `animated` argument. E.g.
ScrollView.scrollTo(5, 0, true) // what do these arguments mean?
This diff replaces the API with a configuration object, so the arguments are all explicit:
ScrollView.scrollTo({x: 0, y: 5, animated: true}) // much better
The `scrollTo()` method checks the argument types, and provides backwards compatibility with the old argument format for now. Using the old API will generate a warning, and this will eventually be upgraded to an error.
Reviewed By: davidaurelio
Differential Revision: D2892287
fb-gh-sync-id: cec4d504242391267c6e863816b6180ced7a7d5e
Summary:
public
https://github.com/facebook/react-native/pull/5494 added a new `source` property to WebView on Android that provides a better API, as well as allowing for request headers to be set.
This diff ports that functionality over to iOS, so we can have a consistent API cross-platform.
I've also extended the API to include `method` (GET or POST) and `body` when setting the WebView content with a URI, and `baseUrl` when setting static HTML.
Reviewed By: javache
Differential Revision: D2884643
fb-gh-sync-id: 83f24494bdbb4e1408aa8f3b7428fee33888ae3a
Summary:
For my project it was required to receive a notification when the MapView annotation was deselected.
So I renamed `onAnnotationPress` to `onAnnotationSelected` and added a new method `onAnnotationDeselected`, this names was "inspired" by the underlaying iOS API. The old API was still called and marked as deprecated.
But maybe you have an idea for a better naming (onAnnotationFocus/-Blur?) -- or should a deselected call the press method again without an annotation (undefined)?
Closes https://github.com/facebook/react-native/pull/5167
Reviewed By: svcscm
Differential Revision: D2869695
Pulled By: nicklockwood
fb-gh-sync-id: 91795ac3f1e4533b250af8901534d8870729d9db
Summary:
The basic API is consistent with iOS; there are several platform-specific props.
Also fixed the flickering when a value is selected.
public
Reviewed By: bestander
Differential Revision: D2871092
fb-gh-sync-id: f5cdf6858cb7344b28ee46954cb6b0a3b144b646
Summary:
I have an issue when combining `PullToRefreshViewAndroid` and `ViewPagerAndroid`.
`ViewPagerAndroid` will not able to scroll that gesture handler is being taken by `PullToRefreshViewAndroid`
One solution is to disable `PullToRefreshViewAndroid` if `ViewPagerAndroid` is scrolling (i.e. not idle).
[Reference solution here](http://stackoverflow.com/a/29946734/2590265)
So here need to expose the `onPageScrollStateChanged` event.
Some code referenced from DrawerLayoutAndroid, especially the `VIEWPAGER_PAGE_SCROLL_STATES` array.
Please feel free give me comments.
Thanks.
Closes https://github.com/facebook/react-native/pull/5026
Reviewed By: svcscm
Differential Revision: D2830623
Pulled By: andreicoman11
fb-gh-sync-id: c2a6920c6f4c7daab0115f13864db83b93b31abf
Konstantin Raev
Hedger Wang
Kyle Corbitt
Nick Lockwood
Kureev Alexey
Eric Vicenti
Scott Dixon
Janic Duplessis
AbilashK
Huang Yu
Jesse Ruder
Satyajit Sahoo
Brent Vatne
mattds
fangmobile
Dave Miller
Martin Kralik
joranz
glevi@fb.com
Christoph Jerolimov
Martin Konicek
Kudo Chien
