Summary:
This adds proper support for tracking a TextInput content size as discussed in #6552 by adding a new callback that is called every time the content size changes including when first rendering the view.
Some points that are up for discussion are what do we want to do with the onChange callback as I don't see any use left for it now that we can track text change in onChangeText and size changes in onContentSizeChange. Also a bit off topic but should we consider renaming onChangeText to onTextChange to keep the naming more consistent (see [this naming justification](https://twitter.com/notbrent/status/709445076850597888)).
This is split in 2 commits for easier review, one for iOS and one for android.
The iOS implementation simply checks if the content size has changed everytime we update it and fire the callback, the only small issue was that the content size had several different values on initial render so I added a check to not fire events before the layoutSubviews where at this point the value is g
Closes https://github.com/facebook/react-native/pull/8457
Differential Revision: D3528202
Pulled By: dmmiller
fbshipit-source-id: fefe83f10cc5bfde1f5937c48c88b10408e58d9d
Summary:
Add an example for Pager built with NavigationTransitioner & Animated.View
This example demostrates how to apply pre-defined gesture handling and
animation styles to the <Animated.View /> to build a Pager navigator.
Reviewed By: ericvicenti
Differential Revision: D3495807
fbshipit-source-id: 08e275010888925bc9fd1840e7052f975c95ad63
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:
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:
This adds a new resize mode for iOS 'repeat' that tiles the image over it's frame. This allow to easily create a view with a repeating background pattern which there is no way to do at the moment without including a bunch of different sized assets.
I'm not 100% sure it should be a resizeMode or a separate prop but I went with resizeMode since it made more sense to me and the are not really any use cases where we'd want to use this with another resizeMode other than 'stretch'.
**Test plan**
Tested mainly by adding a UIExplorer example, also tested that changing the resizeMode prop from and to 'repeat' worked properly.
I'd like to implement this on Android too but it is a bit trickier since Fresco's ImageView doesn't support image tiling and would require submitting a PR there too :(
Closes https://github.com/facebook/react-native/pull/7968
Differential Revision: D3469119
Pulled By: javache
fbshipit-source-id: ab9dbfe448a5b0771dbf0c41fcceeb366210f583
Summary:
Add an example for <NavigationTransitioner /> that shows how to use
<NavigationTransitioner /> and <Animated.View /> to build a stack of
animated scenes that render the navigation state.
This also defines the generic method for NavigationTransitioner to render scenes.
Reviewed By: ericvicenti
Differential Revision: D3422322
fbshipit-source-id: b9ff4c5102442a110739a546565552496349d473
Summary:
This diff translates implementation of transform matrix decomposition from JS to java. This is to support offloading animations of transform property, in which case it is required that we can calculate decomposed transform in the UI thread.
Since the matrix decomposition code is not being used for other platform I went ahead and deleted parts that are no longer being used.
**Test plan**
Run UIExplorer Transform example before and after - compare the results
Closes https://github.com/facebook/react-native/pull/7916
Reviewed By: ritzau
Differential Revision: D3398393
Pulled By: astreet
fbshipit-source-id: 9881c3f565e2050e415849b0f76a0cefe11c6afb
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.)
UIExplorerActivity.java and MoviesActivity.java should override `getReactNativeHost` method. And this PR will fix https://github.com/facebook/react-native/issues/8215.
**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).
For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/8223
Differential Revision: D3456957
fbshipit-source-id: cc0b51e5bfaec71d210bfba81b1f7cd06a723d8c
Summary:
This moves into open source the PermissionsModule and the activity and listener interfaces
necessary to make permissions work.
It also moves the PermissionsExample into the UIExplorer. In order to make this
work, the device has to be Android M and above, and the target sdk of the app has to be 23+, so I changed the uiexplorer manifest to
target that API. This has the unfortunate consequence that people testing on
devices with API 23+ will have to enable the `draw over other apps` setting that
react needs for RedBoxing. The app will automatically send the user to that screen,
so enabling the setting and resuming the app should be trivial.
For testing, try requesting permission for a permission that is currently
revoked. If a permission is granted, it can be revoked via adb (`adb shell pm
revoke com.your.app android.permission.PERMISSION_NAME`), and then requested.
Reviewed By: bestander
Differential Revision: D3431324
fbshipit-source-id: 8cbaea676d2b5727cb5191cdb77a02e213bf9ba3
Summary:
This replaces ActivityIndicatorIOS and indeterminate ProgressBar that were deprecated recently with ActivityIndicator across the codebase and examples and a few other cleanups.
This also make a small tweak to ActivityIndicator so it uses the Android theme color instead of gray when no color is specified.
Use Slider instead of SliderIOS in CameraRoll example.
Remove the line about unifying ActivityIndicator and ProgressBar.
**Test plan**
Tested the affected components in UIExplorer on iOS and Android, tested the changes made in Movies example on iOS and Android.
Closes https://github.com/facebook/react-native/pull/8082
Differential Revision: D3429770
fbshipit-source-id: 3b2e1196a8b9fe00d47a7aa1bbc079b094796421
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:
Remove prop `onNavigate` from these views.
- NavigationAnimatedView
- NavigationCardStack
- NavigationCard
Also, the `sceneProps` onject that is passed to the `renderScene` function
no longer contains `onNavigate`.
The contract that `onNavigate` expects has been vague. Different data flow
system may expect complete different params for such function
For instance,
* onNavigate({type: 'back'});
* onNavigate({type: 'BACK'});
* onNavigate('back'});
We have no intention to unify such generic API since it's more likely to be
constrained by the data flow frameworks such as redux or flux.
Also, passing the prop `onNavigate` all the way down to the component that
invokes the navigation action can be really tedious. We'd expect developer
to either pass such callback (onNavigate) via context or just set up some
kind of static actions that any component can call directly.
`onNavigate` was previously added as a part of (redux-like) reducers-friendly
feature but that's no longer the case.
This new prop `onNavigateBack` is used to explicitly handle the case when the back button or back gesture
is performed.
Reviewed By: ericvicenti
Differential Revision: D3410873
fbshipit-source-id: a703cf0debd474cff33d6610e858b9c4bb3ecbf5
Summary:
Currently on iOS animations are being performed on the JS thread. This ports animations over to the native thread and performs them natively. A lot of this work has already been done on Android, but this PR enables a few animation nodes that Android doesn't yet support such as Transform, Multiplication, and Addition nodes.
Also there is a demo of the native animations added to the UIExplorer app.
Closes https://github.com/facebook/react-native/pull/7884
Reviewed By: javache
Differential Revision: D3409179
Pulled By: nicklockwood
fbshipit-source-id: ef2d8840032e0c32f49e4a16ba86d448662e1751
Summary:
== API Breaking Change ==
- Add unit tests to ensure that NavigationStateUtils does the right thing.
- Remove the logics that lets NavigationStateUtils accept empty value as input
and return a new state.
- Remove the method `NavigationStateUtils.getParent`, `NavigationStateUtils.set`. These methods are rarely used and they can be replaced by other methods.
Reviewed By: ericvicenti
Differential Revision: D3374934
fbshipit-source-id: 0fdf538d014d7c5b4aa1f15a0ee8db9dc91e33cd
Summary:
For navigation actions at high level, reducers from NavigationReducers does not
know anything about the app-specific state thus people won't use these reducers.
Instead, people should build their own reducers.
There are a lot of good libraries available that help people to reducing things if that's
what they really need.
At the low level, for navigation state changes that don't involve app-specific state,
`NavigationStateUtils` should server that kind of need.
`NavigationReducers` serves little benefit cause it does not know the app state, it does
not know how to traverse the navigation states which can be a tree, a list or a map.
That said, we hold no interest in owning in the core navigation library.
Reviewed By: ericvicenti
Differential Revision: D3372910
fbshipit-source-id: 797382b46e7d64b7ad578b51dd37e2b941faa83d
Summary:
Currently on iOS animations are being performed on the JS thread. This ports animations over to the native thread and performs them natively. A lot of this work has already been done on Android, but this PR enables a few animation nodes that Android doesn't yet support such as Transform, Multiplication, and Addition nodes.
Also there is a demo of the native animations added to the UIExplorer app.
Closes https://github.com/facebook/react-native/pull/7884
Differential Revision: D3401811
Pulled By: nicklockwood
fbshipit-source-id: 709e533243130153febef03ddd60d39e9fe70e3e
Summary:
Currently on iOS animations are being performed on the JS thread. This ports animations over to the native thread and performs them natively. A lot of this work has already been done on Android, but this PR enables a few animation nodes that Android doesn't yet support such as Transform, Multiplication, and Addition nodes.
Also there is a demo of the native animations added to the UIExplorer app.
Closes https://github.com/facebook/react-native/pull/7884
Differential Revision: D3401811
Pulled By: nicklockwood
fbshipit-source-id: c8d750b75e4410923e17eaeb6dcaf079a09942e2
Summary:
KeyboardAvoidingView is a component we built internally to solve the common problem of views that need to move out of the way of the virtual keyboard.
KeyboardAvoidingView can automatically adjust either its position or bottom padding based on the position of the keyboard.
Reviewed By: javache
Differential Revision: D3398238
fbshipit-source-id: 493f2d2dec76667996250c011a1c5b7a14f245eb
Summary:
This diff implement the CSS z-index for React Native iOS views. We've had numerous pull request for this feature, but they've all attempted to use the `layer.zPosition` property, which is problematic for two reasons:
1. zPosition only affects rendering order, not event processing order. Views with a higher zPosition will appear in front of others in the hierarchy, but won't be the first to receive touch events, and may be blocked by views that are visually behind them.
2. when using a perspective transform matrix, views with a nonzero zPosition will be rendered in a different position due to parallax, which probably isn't desirable.
See https://github.com/facebook/react-native/pull/7825 for further discussion of this problem.
So instead of using `layer.zPosition`, I've implemented this by actually adjusting the order of the subviews within their parent based on the zIndex. This can't be done on the JS side because it would affect layout, which is order-dependent, so I'm doing it inside the view itself.
It works as follows:
1. The `reactSubviews` array is set, whose order matches the order of the JS components and shadowView components, as specified by the UIManager.
2. `didUpdateReactSubviews` is called, which in turn calls `sortedSubviews` (which lazily generates a sorted array of `reactSubviews` by zIndex) and inserts the result into the view.
3. If a subview is added or removed, or the zIndex of any subview is changed, the previous `sortedSubviews` array is cleared and `didUpdateReactSubviews` is called again.
To demonstrate it working, I've modified the UIExplorer example from https://github.com/facebook/react-native/pull/7825
Reviewed By: javache
Differential Revision: D3365717
fbshipit-source-id: b34aa8bfad577bce023f8af5414f9b974aafd8aa
Summary:
This diff refactors the view update process into two stages:
1. The `reactSubviews` array is set, whose order matches the order of the JS components and shadowView components, as specified by the UIManager.
2. The `didUpdateReactSubviews` method is called, which actually inserts the reactSubviews into the view hierarchy.
This simplifies a lot of the hacks we had for special-case treatment of subviews: In many cases we don't want to actually insert `reactSubviews` into the parentView, and we had a bunch of component-specific solutions for that (typically overriding all of the reactSubviews methods to store views in an array). Now, we can simply override the `didUpdateReactSubviews` method for those views to do nothing, or do something different.
Reviewed By: wwjholmes
Differential Revision: D3396594
fbshipit-source-id: 92fc56fd31db0cfc66aac3d1634a4d4ae3903085
Summary:
As per https://twitter.com/olebegemann/status/738656134731599872, our use of "main thread" to mean "main queue" seems to be unsafe.
This diff replaces the `NSThread.isMainQueue` checks with dispatch_get_specific(), which is the recommended approach.
I've also replaced all use of "MainThread" terminology with "MainQueue", and taken the opportunity to deprecate the "sync" param of `RCTExecuteOnMainThread()`, which, while we do still use it in a few places, is incredibly unsafe and shouldn't be encouraged.
Reviewed By: javache
Differential Revision: D3384910
fbshipit-source-id: ea7c216013372267b82eb25a38db5eb4cd46a089
Summary:
When using FormData upload images or files, in Android version, network module cannot send an event for showing progress.
This PR will solve this issue.
I changed example in XHRExample for Android, you can see uploading progress in warning yellow bar.
Closes https://github.com/facebook/react-native/pull/7256
Differential Revision: D3390087
fbshipit-source-id: 7f3e53c80072fff397afd6f5fe17bf0f2ecd83b2
Summary:
Allows developers to specify headers to include in the HTTP request
when fetching a remote image. For example, one might leverage this
when fetching an image from an endpoint that requires authentication:
```
<Image
style={styles.logo}
source={{
uri: 'http://facebook.github.io/react/img/logo_og.png',
headers: {
Authorization: 'someAuthToken'
}
}}
/>
```
Note that the header values must be strings.
Works on iOS and Android.
**Test plan (required)**
- Ran a small example like the one above on iOS and Android and ensured the headers were sent to the server.
- Ran a small example to ensure that \<Image\> components without headers still work.
- Currently using this code in our app.
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/7338
Reviewed By: javache
Differential Revision: D3371458
Pulled By: nicklockwood
fbshipit-source-id: cdb24fe2572c3ae3ba82c86ad383af6d85157e20
Summary:
The recent and upcoming API refactoring works makes maintaining
the examples harder and harder.
This removes the old examples that use too much deprecated APIs such as
Reducers, Animated View.
The new examples will be forcus on using new API with all-in-one sample
codes and detailed documentation.
Reviewed By: ericvicenti
Differential Revision: D3354711
fbshipit-source-id: ac6360b1573989eb075d91cb9bf1ae8357dce7fa
Summary:
Previously, only Text and Image could be nested within Text. Now, any
view can be nested within Text. One restriction of this feature is
that developers must give inline views a width and a height via
the style prop.
Previously, inline Images were supported by using iOS's built-in support
for rendering images with an NSAttributedString via NSTextAttachment.
However, NSAttributedString doesn't support rendering arbitrary views.
This change adds support for nesting views within Text by creating one
NSTextAttachment per inline view. The NSTextAttachments act as placeholders.
They are set to be the size of the corresponding view. After the text is
laid out, we query the text system to find out where it has positioned each
NSTextAttachment. We then position the views to be at those locations.
This commit also contains a change in `RCTShadowText.m`
`_setParagraphStyleOnAttributedString:heightOfTallestSubview:`. It now only sets
`lineHeight`, `textAlign`, and `writingDirection` when they've actua
Closes https://github.com/facebook/react-native/pull/7304
Reviewed By: javache
Differential Revision: D3365373
Pulled By: nicklockwood
fbshipit-source-id: 66d149eb80c5c6725311e1e46d7323eec086ce64
Pieter De Baets
Nathan Azaria
Skotch Vail
Janic Duplessis
Jeff Morrison
Ian Childs
Jing Chen
Konstantin Raev
Hedger Wang
Tucker Connelly
Martín Bigio
alvaromb
Mike Lambert
Emil Sjolander
Krzysztof Magiera
leeight
Andrei Coman
Sokovikov
Fabian Eichinger
Brandon Withrow
Nick Lockwood
tantan
Paul Shen
Basil Hosmer
Adam Comella
Emilio Rodriguez
