Summary:
@public
This PR adds quite a bit of functionality to the Touchable components, allowing the ms delays of each of the handlers (`onPressIn, onPressOut, onPress, onLongPress`) to be configured.
It adds the following props to `TouchableWithoutFeedback, TouchableOpacity, and TouchableHighlight`:
```javascript
/**
* Delay in ms, from the release of the touch, before onPress is called.
*/
delayOnPress: React.PropTypes.number,
/**
* Delay in ms, from the start of the touch, before onPressIn is called.
*/
delayOnPressIn: React.PropTypes.number,
/**
* Delay in ms, from the release of the touch, before onPressOut is called.
*/
delayOnPressOut: React.PropTypes.number,
/**
* Delay in ms, from onPressIn, before onLongPress is called.
*/
delayOnLongPress: React.PropTypes.number,
```
`TouchableHighlight` also gets an additional set of props:
```javascript
/**
* Delay in ms, from the start of the touch, before the highlight is shown.
*/
delayHighlightShow: React.PropTypes.number,
/**
* Del
...
```
Closes https://github.com/facebook/react-native/pull/1255
Github Author: jmstout <git@jmstout.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
ActivityIndicator was forwarding all of its props except `style` to the inner native view. This meant that onLayout would report a zero-sized frame that was relative to the wrapper view instead of the parent of the ActivityIndicator.
This diff adds `onLayout` to the wrapper view instead of the native view.
In general, all components that forward props need to be audited in this manner.
Closes https://github.com/facebook/react-native/pull/1292
Github Author: James Ide <ide@jameside.com>
Test Plan: `<ActivityIndicator onLayout={...} />` reports the size of the spinner plus a position relative to its parent view.
Summary:
`TextInput` does not automatically forward all props using the spread operator so we need to explicitly forward the `onLayout` prop.
Closes https://github.com/facebook/react-native/pull/1296
Github Author: James Ide <ide@jameside.com>
Test Plan:
Mount a TextInput component with an `onLayout` prop and see that the callback handler is invoked with the TextInput's frame.
Summary:
Pretty sure this shouldn't be @provides
Closes https://github.com/facebook/react-native/pull/837
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Simply add an `onLayout` callback to a native view component, and the callback
will be invoked with the current layout information when the view is mounted and
whenever the layout changes.
The only limitation is that scroll position and other stuff the layout system
isn't aware of is not taken into account. This is because onLayout events
wouldn't be triggered for these changes and if they are desired they should be
tracked separately (e.g. with `onScroll`) and combined.
Also fixes some bugs with LayoutAnimation callbacks.
@public
Test Plan:
- Run new LayoutEventsExample in UIExplorer and see it work correctly.
- New integration test passes internally (IntegrationTest project seems busted).
- New jest test case passes.
{F22318433}
```
2015-05-06 15:45:05.848 [info][tid:com.facebook.React.JavaScript] "Running application "UIExplorerApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF"
2015-05-06 15:45:05.881 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":123,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.882 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":122,"width":50,"height":50}}
2015-05-06 15:45:05.883 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":204}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":287.5}}
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "layout animation done."
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":82,"width":50,"height":50}}
2015-05-06 15:45:09.848 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":110.5,"x":60,"width":214,"height":287.5}}
2015-05-06 15:45:09.862 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":120,"height":68}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":55,"width":50,"height":50}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":128,"x":60,"width":160,"height":337.5}}
```
Summary:
NavigatorIOS supports four new properties:
- **rightButtonImageSource:** The source of an image to display in the top right. This must be a static image since UINavigationController only supports UIImages. Adding support for UIImageViews (or arbitrary views) is more complicated because custom views do not fade on touch and do not have hit slop the same way that UIImage buttons do. Usage: `rightButtonImageSource: ix('ImageName')`
- **backButtonImageSource:** Use a custom image for the back button. This does not replace the back caret (`<`) but instead replaces the text next to it.
- **leftButtonTitle**: Text for the left nav button, which supersedes the previous nav item's back button when specified. The main use case for this is your initial screen/UIVC which has nothing to go back to (since it is the first VC on the stack) but need to display a left button. This does hide the back button if there would have been one otherwise.
- **leftButtonImageSource:** Image source for the left button, super
Closes https://github.com/facebook/react-native/pull/263
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Simple one character change - add a missing space
Closes https://github.com/facebook/react-native/pull/1112
Github Author: Brent Vatne <brent.vatne@madriska.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
As per #941 - fixes bug with `TouchabeOpacity` always reseting child opacity to `1.0` after press.
A note about the code: we could probably use a general `getNativeProp(propName, callback)` function rather than `getOpacity` but just used that as it was simpler for this specific PR, perhaps that refactor could be left to another - or maybe there is a way to do this already that I missed.
Before:
After:
Example code:
```javascript
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
} = React;
var TestIt = React.createClass({
render() {
return (
<View style={styles.container}>
<TouchableOpacity activeOpacity={0.3}>
<View style={styles.searchButton}>
<Text>
Closes https://github.com/facebook/react-native/pull/977
Github Author: Brent Vatne <brent.vatne@madriska.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Fixes#534:
```jsx
<SegmentedControlIOS
tintColor="#ff0000"
values={['One', 'Two', 'Three', 'Four']}
selectedtIndex={0}
momentary={false}
enabled={true}
onValueChange={ (value) => console.log(value) } />
```
This only supports string-based segments, not images. Also doesn't support full customization (no separator images etc); I figure this is a good MVP to lock-down a basic API
I also included a snapshot test case, but the images keep coming out funky. When I look at the sim, I see that the text labels show up for the selected segment, but the snapshot keeps coming out with no text on those segments. I tried forcing a delay, but same result. Is that explainable?
Obviously happy to change anything about the API, code-style nitpicks, etc
Closes https://github.com/facebook/react-native/pull/564
Github Author: Clay Allsopp <clay.allsopp@gmail.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
NavigatorIOS with custom nav bar custom colors, working example included in
UIExplorer.
Based on pull request #318 to complete pending work based on comments.
Closes https://github.com/facebook/react-native/pull/695
Github Author: Eduardo <edo.lomeli@gmail.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
There are still many other props that can be added to further customize the SliderIOS component, but I had a specific need for these two so I just went ahead and added them.
Closes https://github.com/facebook/react-native/pull/799
Github Author: Brent Vatne <brent.vatne@madriska.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Enables overwriting of underlying colors for WebViews. Especially useful if you want to give your WebView a transparent background.
Closes https://github.com/facebook/react-native/pull/767
Github Author: Lochlan Wansbrough <lochie@live.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Currently, the documentation shows both `password` and `secureTextEntry` as props for TextInput. However, the `password` prop is only passed to the Android component, so it does not work as expected for iOS developers. This PR prefers `password` over `secureTextEntry` but won't break anybody's code.
Closes https://github.com/facebook/react-native/pull/622
Github Author: Will Piers <wpiers@rallydev.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Added constraint of child type to touchablewithoutfeedback to match touchablehighlight (this would have failed silently previously), also added the cloneWithProps as by note of @vjeux
Closes https://github.com/facebook/react-native/pull/517
Github Author: Daniele Zannotti <d.zannotti@me.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
I'd love to add annotations letting people know that this function and a few others take `SyntheticEvent`s but that may be inconsistent with the rest of the docs. For now, this particular annotation should be removed
Closes https://github.com/facebook/react-native/pull/592
Github Author: Will Piers <wpiers@rallydev.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
@vjeux Making the renderError and renderLoading props optional for WebView by setting the default to be what's shown for the WebView example in UIExplorer. issue #349
Closes https://github.com/facebook/react-native/pull/512
Github Author: Don Yu <donyu8@gmail.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Implementing the consensus approach from the comments on
this PR:
https://github.com/facebook/react-native/pull/486
We use a boolean flag in the Obj-C code to determine whether
to animate or not, and then provide two public JS functions
that call the Obj-C with or without the flag.
Closes https://github.com/facebook/react-native/pull/509
Github Author: Charlie Cheever <ccheever@gmail.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
The `bounces` property lets you disable rubber-banding. It was already exposed on the native side so this diff is just documenting it in JS.
Closes https://github.com/facebook/react-native/pull/264
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Allows setting of HTML directly on webview to support #506. This is a starting point, and feedback/improvement is requested.
1. if `startInLoadingState` is true, the HTML content will never show since the load event never fires
2. Neither html nor url are set as required props any more
Closes https://github.com/facebook/react-native/pull/542
Github Author: Colin Ramsay <colinramsay@gmail.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
This diff completes adding support for the following UITextField properties:
- returnKeyType: what the return key on the keyboard says
- enablesReturnKeyAutomatically: the return key is disabled iff there is no text entered. This too could be implemented in React but it feels better in UIKit right now because it is handled synchronously.
- secureTextEntry: obscure passwords
- keyboardType: added all the keyboard types, they are useful in different scenarios
There were varying degrees of support for these properties so it looks like this diff continues some unfinished work. I also updated the keyboardType enum to use native constants instead of strings like the other properties here.
Added examples to the UIExplorer.
Closes https://github.com/facebook/react-native/pull/265
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Found a typo in the TouchableOpacity and TouchableHighlight documentation
Closes https://github.com/facebook/react-native/pull/292
Github Author: Ryan Warren <ryan@war.re>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
I think this line is a legacy code from `NativeModulesDeprecated`.
Closes https://github.com/facebook/react-native/pull/340
Github Author: Edward Kim <onward.edkim@gmail.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
If you give a TouchableHighlight component some styling (e.g. a background color) with the `underlayStyle` prop, the style is wiped away after touching the component. This diff restores the `underlayStyle`.
Closes https://github.com/facebook/react-native/pull/129
Github Author: James Ide <ide@jameside.com>
Test Plan:
Create a TouchableHighlight that receives `underlayStyle={{style:
'blue'}}`. It initially has a blue background. Touch it and let go. See the blue background now comes back as expected.
Summary:
Summary:
Makes sure that it looks good in the website
Closes https://github.com/facebook/react-native/pull/160
Github Author: Christopher Chedeau <vjeux@fb.com>
Test Plan:
Run the website
CC:
Task ID: #
Summary:
Summary:
Instead of having a separate TouchablePropTypes, put those in TouchableWithoutFeedback and have the other ones use ...TouchableWithoutFeedback.propTypes. This makes it work with the docs parsing.
Closes https://github.com/facebook/react-native/pull/159
Github Author: Christopher Chedeau <vjeux@fb.com>
Test Plan:
Run the website, make sure all the touchable components have the right prop types
CC:
Task ID: #
Summary:
The following props are now supported on TouchableHighlight/Opacity components:
- onPress (was there before)
- onPressIn
- onPressOut
- onLongPress
There is a `TouchableFeedbackPropType` that is shared amongst the Touchable family for consistency.
Added UIExplorer example to demonstrate and test.
Fixes#101.
Closes https://github.com/facebook/react-native/pull/102
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Andrei Coman
Gabe Levi
Adam Krell
Gabe Levi
Spencer Ahrens
Eric Vicenti
Nick Lockwood
Alex Kotliarskyi
jmstout
Christopher Chedeau
Tadeu Zagallo
Krzysztof Magiera
Alex Akers
Stan Chollet
Changgeng Li
James Ide
Patrick Williams
Georgiy Kassabli
James Ide
Ben Alpert
Brent Vatne
Peter Zich
Hedger Wang
Clay Allsopp
Maksim Bunkow
Bill Fisher
Eduardo
Philipp von Weitershausen
Lochlan Wansbrough
Andy Street
guru inamdar
Will Piers
Kureev Alexey
Daniele Zannotti
Don Yu
Kevin Gozali
Basil Hosmer
Jake Boone
Sumeet Vaidya
Jiajie Zhu
Charlie Cheever
Colin Ramsay
Ryan Warren
Edward Kim
Tadeu Zagallo
Felix Kling
Amjad Masad
Martin Konicek
