Commit Graph

133 Commits

Author SHA1 Message Date
rxb dcf245a9a2 Definable distance pagination for ScrollView
Summary: This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons:

![img_8726 2](https://cloud.githubusercontent.com/assets/451050/8017899/39f9f47c-0bd2-11e5-9c1d-889452f20cf7.PNG) ![img_8727 2](https://cloud.githubusercontent.com/assets/451050/8017898/39f962dc-0bd2-11e5-98b4-461ac0f7f21b.PNG)  ![img_8728 2](https://cloud.githubusercontent.com/assets/451050/8017900/39fd91a4-0bd2-11e5-8786-4cf0316295a0.PNG)

After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping.

This pull request uses `scrollViewWillEndDragging` in RCTScrollView.m to adjust `targetContentOffset` based on two new optional props added to ScrollView. `snapToInterval` sets the multiple that the
Closes https://github.com/facebook/react-native/pull/1532

Reviewed By: @​svcscm, @​trunkagent

Differential Revision: D2443701

Pulled By: @vjeux
2015-09-23 11:47:25 -07:00
Aaron Chiu e665acca4b pull in github css-layout into fbobjc react native
Reviewed By: @vjeux

Differential Revision: D2448929
2015-09-20 20:35:29 -07:00
Pieter De Baets 19067a8fbc Prevent setFrame:forView: being called for invalidated views
Reviewed By: @vjeux

Differential Revision: D2459295
2015-09-18 17:33:25 -07:00
Nick Lockwood 33036b1f01 Fixed DatePickerIOS onChange event
Reviewed By: @javache

Differential Revision: D2429598
2015-09-10 10:10:26 -07:00
Nick Lockwood 19e421a8dc Fixed segmented control
Reviewed By: @javache

Differential Revision: D2428947
2015-09-10 04:50:24 -07:00
Nick Lockwood ad0c97f25b Fixed PickerIOS onChange event 2015-09-08 03:34:33 -08:00
Alexey Lang bbeaac5d3b Automatically adjust content inset after view controller did layout subviews 2015-09-04 07:00:21 -08:00
Nick Lockwood 848839858b Added mechanism for directly mapping JS event handlers to blocks
Summary:
Currently, the system for mapping JS event handlers to blocks is quite clean on the JS side, but is clunky on the native side. The event property is passed as a boolean, which can then be checked by the native side, and if true, the native side is supposed to send an event via the event dispatcher.

This diff adds the facility to declare the property as a block instead. This means that the event side can simply call the block, and it will automatically send the event. Because the blocks for bubbling and direct events are named differently, we can also use this to generate the event registration data and get rid of the arrays of event names.

The name of the event is inferred from the property name, which means that the property for an event called "load" must be called `onLoad` or the mapping won't work. This can be optionally remapped to a different property name on the view itself if necessary, e.g.

  RCT_REMAP_VIEW_PROPERTY(onLoad, loadEventBlock, RCTDirectEventBlock)

If you don't want to use this mechanism then for now it is still possible to declare the property as a BOOL instead and use the old mechanism (this approach is now deprecated however, and may eventually be removed altogether).
2015-09-02 06:11:24 -08:00
Matt Mahoney 36c1064033 [rn] Pass props when creating a view in RCTViewManager 2015-08-25 08:08:17 -08:00
Nick Lockwood 88e0bbc469 Ran Convert > To Modern Objective C Syntax 2015-08-25 01:08:49 -08:00
Nick Lockwood 8d1e02b8bd Convert alloc/init to new to please linter 2015-08-17 08:46:00 -07:00
James Ide 12d5f0d6f4 [Views] Change rasterization scale to the main screen's scale
Summary:
`view.screen` can be nil if the view has not yet been added to the view hierarchy (e.g. new view), so we should use `[UIScreen mainScreen]` instead.

In the future, if we need to support multiple screens, one possible fix is to set the rasterization scale in didMoveToWindow/Superview. For now we have just one screen, though.
Closes https://github.com/facebook/react-native/pull/2334
Github Author: James Ide <ide@jameside.com>
2015-08-17 06:54:55 -07:00
Alexsander Akers 0f14933948 Enable transparent modal presentation with <Modal />
Summary:
Enable transparent modal backgrounds using `UIModalPresentationCustom` modal presentation style.
2015-08-14 04:47:12 -08:00
Pieter De Baets fa07736ee1 Remove isValid from RCTInvalidating
Summary:
We only actually use it on RCTBridge and RCTJavaScriptExecutor, so add it to these interfaces explicitly
2015-08-14 01:57:18 -08:00
Zack Gomez f5d68f6ecb [ReactNative] Fix pixel rounding
Summary:
Too many rounds, we only want/need one.
2015-08-13 18:04:49 -08:00
Pieter De Baets c084793e91 Fix ModalFullScreenView's window not dismissing after being removed 2015-08-13 08:55:40 -08:00
Alex Akers 672b77f355 Perform clip update on RCTScrollView in increments of 50 pt
Summary:
This diff removes calls to `-updateClippedSubviews` by only re-clipping when the scroll view moves by a certain number of pixels.

leeway = 50pt => 46.9% of calls removed
leeway = 10pt => 13.2% " " "
2015-08-13 07:56:41 -08:00
Nick Lockwood a86e6b76fb Fixed fuzzer app and ensured that React does not crash when fuzzed 2015-08-12 06:14:36 -08:00
Nick Lockwood 48af214216 Simplified event registration
Summary:
Our events all follow a common pattern, so there's no good reason why the configuration should be so verbose. This diff eliminates that redundancy, and gives us the freedom to simplify the underlying mechanism in future without further churning the call sites.
2015-08-11 06:41:04 -08:00
Nick Lockwood ffa7dbcbf1 Fixed onLayout redbox issue 2015-08-07 02:58:48 -08:00
Nick Lockwood deba13f698 Refactor RCTUIManager
Summary:
Moved the view creation & property binding logic out of RCTUIManager into a separate RCTComponentData class - this follows the pattern used with the bridge.

I've also updated the property  binding to use pre-allocated blocks for setting the values, which is more efficient than the previous system that re-contructed the selectors each time it was called. This should improve view update performance significantly.
2015-08-06 15:49:35 -08:00
James Ide d4eac3ddca [RFC][Rendering] Add shouldRasterizeIOS to View components
Summary:
Exposes the `shouldRasterize` property. Fixes #1986.
Closes https://github.com/facebook/react-native/pull/2226
Github Author: James Ide <ide@jameside.com>
2015-08-04 15:37:38 -08:00
Tj d8f43105ed [ListView] Fix RCTScrollView stickyHeader touch passing.
Summary:
Point must be converted to the stickyHeader's coordinate space and then passed to the stickyHeaders hitTest:withEvent: method in order to be correctly routed to any subviews of the stickyHeader.

This resolves this [issue](https://github.com/facebook/react-native/issues/2075).
Closes https://github.com/facebook/react-native/pull/2224
Github Author: Tj <tfallon@Tjs-MBP.local>
2015-08-04 17:10:19 -08:00
Brent Vatne f41663a2df [WebView] Replace RKWebView with RCTWebView in log message
Summary:
Easy merge, just a small change in log message
Closes https://github.com/facebook/react-native/pull/2061
Github Author: Brent Vatne <brentvatne@gmail.com>
2015-07-31 13:49:14 -08:00
Nick Lockwood 1fb26d4319 Cleanup 2015-07-31 11:33:22 -08:00
Nick Lockwood 407eb4ce85 NSNumber arguments must now be nonnull
Summary:
The bridge implementation on React Android does not currently support boxed numeric/boolean types (the equivalent of NSNumber arguments on iOS), nor does Java support Objective-C's nil messaging system that transparently casts nil to zero, false, etc for primitive types.

To avoid platform incompatibilities, we now treat all primitive arguments as non-nullable rather than silently converting NSNull -> nil -> 0/false.

We also now enforce that NSNumber * objects must be explicitly marked as `nonnull` (this restriction may be lifted in future if/when Android supports boxed numbers).

Other object types are still assumed to be nullable unless specifically annotated with `nonnull`.
2015-07-31 06:57:08 -08:00
Alex Akers f2b3057a7c Fix border width precedence issue 2015-07-30 06:18:17 -08:00
Zack Gomez 60c8abcc70 Revert "[ReactNative] revert "prevent ScrollView content offset from changing during layout"" 2015-07-29 17:23:18 -08:00
Kevin Gozali 87ce2d635b [ReactNative] revert "prevent ScrollView content offset from changing during layout" 2015-07-28 19:39:56 -08:00
Zack Gomez 068f396c9b [ReactNative] prevent ScrollView content offset from changing during layout
Summary:
-[UIScrollView setFrame:] changes the content offset, which we want to do manually.  Preserve the old offset during layout.
2015-07-28 14:36:27 -08:00
Alex Akers 7d19ff3dcb Add <Modal /> component
Summary:
Create Modal component that can be used to present content modally.
2015-07-28 07:21:50 -08:00
Tadeu Zagallo 49b55804b1 [ReactNative] Fix crash when reload during profile (attempt #2)
Summary:
Fixes #1642

When reloading during profiling, the profile wouldn't unhook from the instance
being deallocated.
2015-07-22 11:02:32 -08:00
Bill Fisher b56717ede9 [Storyline] SliderIOS responds to UIControlEventTouchUpOutside 2015-07-17 13:01:08 -08:00
Spencer Ahrens c43e93d1b4 Reverted ca9d1b3bf5a6f46ec29babe8685634690ff9a2bc to unbreak groups 2015-07-17 04:03:01 -08:00
James Ide b362072c83 [Rendering] Set allowsEdgeAntialiasing for transformed views
Summary:
By default, the edges of rotated layers on iOS have jagged edges because they are not antialiased. Setting `allowsEdgeAntialiasing` makes them look a lot nicer by smoothing out the jaggies. This is particularly important for UIs like Tinder cards, for example.

Closes https://github.com/facebook/react-native/pull/1999
Github Author: James Ide <ide@jameside.com>
2015-07-16 04:33:03 -08:00
Mr Speaker 2cb634bb0b Nav ios hide hairline
Summary:
For the current project I am working on I needed to add a boolean option (`shadowHidden`) to remove the 1px hairline shadow from the NavigationIOS component:

`<NavigatorIOS shadowHidden={true} initialRoute={...} />`

By default, or with `shadowHidden={false}` it looks like this:

![withhairline](https://cloud.githubusercontent.com/assets/129330/8145401/d2704956-11d4-11e5-86e8-a75435b68480.png)
Setting the shadow hidden  with `shadowHidden={true}` looks like this:

![nohairline2](https://cloud.githubusercontent.com/assets/129330/8145405/148ed56e-11d5-11e5-85d6-f8cd3453d5ac.png)

The code it uses to do the actual hiding is... a bit of a hack (*I* think), but it's the only way currently to do it, and is the way they do it in the iPhone calendar app: iterating through the subviews and removing the shadow image.

This removes the shadow *and* keeps the translucent blurry effect with a ScrollView (see this [SO discussion](http://stackoverflow.com/questions/18160173/how-to-remove-uinavigationbar-inner
Closes https://github.com/facebook/react-native/pull/1615
Github Author: Mr Speaker <mrspeaker@gmail.com>
2015-07-16 04:31:17 -08:00
chirag04 04fa09afef [Style] added backface-visibility. fixes #1973
Summary:
default behavior remains same(backface visible).

cc @sahrens
Closes https://github.com/facebook/react-native/pull/1977
Github Author: chirag04 <jain_chirag04@yahoo.com>
2015-07-14 17:38:05 -08:00
Jean Regisser 9936a2406d [TabBarIOS] Add translucent property to TabBarIOS
Summary:
To be on par with NavigatorIOS, I added the translucent property to TabBarIOS.

Usage:
```
<TabBarIOS
 translucent={false} // default is true
/>
```
Closes https://github.com/facebook/react-native/pull/1937
Github Author: Jean Regisser <jean.regisser@gmail.com>
2015-07-14 08:02:44 -08:00
Nick Lockwood 0c61b49f0a Improved RCTCache performance + fixed border color crash
Summary:
RCTCache had really bad insertion performance when the cache was full due to having to LRU-sort the entries. This was making color
animations very slow.

I've fixed this in two ways:

1) by removing the sort and doing a linear search to remove old entries, which changes insertion perf to O(n) in the worst case instead of O(n log n) or even (n2).

2) by reducing the size of the color cache to 128 from 1024, which should be fine for normal use, without penalising animation performance.

Separately, border colors were not being retained, which caused crashes when the color cache was cleared. I've fixed that by retaining the border colors inside RCTView.
2015-07-14 04:56:25 -08:00
Alex Akers eb06659711 [React Native] Update code comments about layout-only view 2015-07-14 02:52:45 -08:00
Nick Lockwood a886e4c66b Migrated RCTText into FBReactKit 2015-07-08 07:13:00 -08:00
Natansh Verma f21e79d5e1 Revert "[ReactNative] Fix crash when reload during profile" 2015-07-07 23:37:07 -08:00
Tadeu Zagallo 0ffb2d36eb [ReactNative] Fix crash when reload during profile
Summary:
Fixes #1642

When reloading during profiling, the profile wouldn't unhook from the instance
being deallocated.
2015-07-07 18:31:17 -08:00
Hedger Wang bb141e3a3c Rename prop "injectedJavascriptIOS" to "injectedJavaScript
Summary:
Android WebView now supports the prop "injectedJavaScript", too.
It's time to rename "injectedJavascriptIOS" to "injectedJavaScript" for API
consistency between IOS and Android.
2015-07-07 17:17:22 -08:00
Nick Lockwood 1b7699f671 Migrate unit tests from FBReactKitModules to FBReactKit 2015-07-07 16:39:35 -08:00
Martín Bigio 66d3f3c616 [rn] Keep native ListView child frames in sync on JS wrapper
Summary: At the moment the `ListView.js` `_childFrames` variable is only updated on scroll. As a consequence, `onChangeVisibleRows` won't get triggered for the initial render, nor any future render not trigered by scroll events. To fix this we need to make sure native and JS have the child frames in sync.
2015-07-07 07:40:56 -08:00
KJlmfe b57a14d07c <Text> module add textDecoration style attributes
Summary:
This is simply a rebased and squashed version of @KJlmfe's PR over at https://github.com/facebook/react-native/pull/845

It was actually already squashed into one commit, but for some reason that was hard to see from the original PR.
Closes https://github.com/facebook/react-native/pull/1869
Github Author: KJlmfe <kjlmfe@gmail.com>
2015-07-07 06:15:20 -08:00
Alexsander Akers 02db374e50 [React Native] Remove layout-only nodes (Take 2!)
Summary:
Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes.

This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this.

The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later.
2015-07-07 05:06:50 -08:00
Param Aggarwal 0f2d8e662e [ScrollView] Pick data from older event on coalescing.
Summary:
The `ScrollView` sends important `updatedChildFrames` data to the `ListView` to be able to implement `onChangeVisibleRows` method. Coalescing operates very strongly on older devices like the iPhone 4s where this data is then lost.

Fixes #1782.

`ListView` has a method called `onChangeVisibleRows` that is called whenever the rows visible on screen change. This method is critical to be able to implement deletion/creation of views and hence be conservative in memory usage. I have an infinite scrolling view which uses this method to only render the full rows for what is visible on screen and put placeholders for everything else.

In the `RCTEventDispatcher`, we [coalesce events](522fd33d6f/React/Base/RCTEventDispatcher.m (L135-L152)) that are meant to be sent across the bridge. They are [dequeued](522fd33d6f/React/Base/RCTEventDispatcher.m (L180-L188)) on each
Closes https://github.com/facebook/react-native/pull/1783
Github Author: Param Aggarwal <paramaggarwal@gmail.com>
2015-07-06 17:27:40 -08:00
Hedger Wang 54825b304a [WebView]: Kill `shouldInjectAJAXHandler`, and add `injectedJavascriptIOS`
Summary:
@public

The API and implementation of `shouldInjectAJAXHandler` is very opinionated, and it does not solve many of the use cases that we'd like to address.

Since  `shouldInjectAJAXHandler` is basically juts injecting JS to the web page, we should let developer inject whatever JS that address different issues that they want to fix.

Test Plan:
Test this snippet at <Playground />

```
<WebView
  url="http://www.facebook.com"
  injectedJavascriptIOS="document.body.style.border='solid 10px red'"
/>
```
2015-07-01 18:56:14 -08:00