Commit Graph

25 Commits

Author SHA1 Message Date
Anthony Sherbondy f930270b00 Fix for TouchableNativeFeedback having Animated.Component direct child
Summary:
Fixes #7996.
Test included.
Not sure this is the best way to go, just a simple solution since the TouchableNativeFeedback is trying to clone the component with a Native component, then seems like it should wrap it with Animated.Component if the incoming child was.
Closes https://github.com/facebook/react-native/pull/10081

Differential Revision: D4073603

fbshipit-source-id: 7827198a3e4697c14e37762cdca93f46a5a1d716
2016-10-25 00:28:37 -07:00
Tim Yung 7263c349c7 RN: Stop Deep Linking `ReactPropTypes`
Reviewed By: sebmarkbage

Differential Revision: D4025448

fbshipit-source-id: 4e9b6ee002a86f638fc57a4bbeb45bf35fabf74c
2016-10-14 18:59:10 -07:00
Tim Yung c4fc13b997 RN: Change `onlyChild => React.Children.only`
Reviewed By: sebmarkbage

Differential Revision: D4025440

fbshipit-source-id: efbcb44dcc89a6059688cf5a00cf28ada8a6a4c4
2016-10-14 18:59:10 -07:00
Tim Yung 331c13d4dc RN: Require {react/lib/ => }ReactNative
Reviewed By: sebmarkbage

Differential Revision: D4024375

fbshipit-source-id: cd2226a3580a7a4ff319d6a93b67b68f2942eb00
2016-10-14 18:59:10 -07:00
Felix Oghina 6d175f2c25 Android: enable foreground ripple
Reviewed By: astreet

Differential Revision: D3932066

fbshipit-source-id: ee2f019cb9ba41e32cbbd8c1cd07c9ed5263fddc
2016-10-03 04:28:46 -07:00
Simon Dohmen d73446c549 Fixed position of ripple-effect
Summary:
I recognised that the ripple effect was always located at the bottom of my buttons. So i started to search for other ppl having the same problem. I also found this bug on the f8 app.

The gifs show the behaviour before and after my changes:

[The ripple effect is always on the bottom of the element, because pageY is used instead of the relative pos]
![before](https://cloud.githubusercontent.com/assets/956410/16042805/df49d97e-323c-11e6-8ce2-b0658ec85b27.gif)

![after](https://cloud.githubusercontent.com/assets/956410/16042804/df483a60-323c-11e6-862f-e8c97b835339.gif)

Before, the absolute position of the touch was used to update the position during movement but it should be the relative position. Just some small calculation changes were needed to achieve the correct behaviour :)
Closes https://github.com/facebook/react-native/pull/8111

Differential Revision: D3539652

fbshipit-source-id: dd8c8f3c7402d0d435f1c2ca67c1a59b474efda3
2016-07-08 19:33:20 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Jeff Chien 475f1b5796 Reverted commit D3126513
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
2016-04-24 15:45:19 -07:00
Jeff Chien e438954938 Modify TouchableNativeFeedback (Ripple) to follow borderRadius
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
2016-04-22 09:07:50 -07:00
Spencer Ahrens 5c9b46c15e Improve touchable debugging
Summary:Set `Touchable.TOUCH_TARGET_DEBUG` to see colored borders/text to all touchables.

Different touchable types are color-coded differently.

If there is `hitSlop`, it will be rendered with an extra view with a dashed border of the same color (not visible on
Android because `overflow: 'hidden'`).

`Text` with `onPress` directly set is just colored.

Added some extra checks to `TouchableWithoutFeedback` since it could silently break if the child is not a native
component.

Also added better error output for `ensureComponentIsNative` so it's easier to track down issues. I really wish there
was a cleaner way to get the component and owner names consistently, it would help make good debug messages way easier
to write.

Reviewed By: ericvicenti

Differential Revision: D3149865

fb-gh-sync-id: 602fc3474ae7636e32af529eb7ac52ac5b858030
fbshipit-source-id: 602fc3474ae7636e32af529eb7ac52ac5b858030
2016-04-14 14:28:31 -07:00
Janic Duplessis 49fdd99633 Display component methods on the website and tweak the documentation
Summary:The website now displays public methods on components. This was implemented mostly in react-docgen via #66. This adds a <Method> component that is used by the component and API doc pages to display documentation for a method.

It also adds some missing documentation and tweak some existing one to integrate with this feature. I also prefixed some component methods with an '_' so they don't show up in the doc.

**Test plan (required)**

Tested every component page locally to make sure the methods doc was displayed properly.
Tested an API page to make sure it still worked properly.
Closes https://github.com/facebook/react-native/pull/6890

Differential Revision: D3159911

Pulled By: vjeux

fb-gh-sync-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
fbshipit-source-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
2016-04-09 11:13:28 -07:00
Sebastian Markbage 613ca14612 React.findNodeHandle -> ReactNative.findNodeHandle
Summary:Since the React 0.14 split of modules, the findNodeHandle feature is part of the
renderer and not the generic React API.

This just greps for React.findNodeHandle and replace them with ReactNative.findNodeHandle. I fixed up the imports manually.

I also found two callers each of ReactNative.createClass and React.render with the exception of downstream and examples will fix them separately.

I'll need to find more things like `var { PropTypes } = ReactNative;` separately. I think this is a good start though.

Reviewed By: vjeux

Differential Revision: D3149356

fb-gh-sync-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
fbshipit-source-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
2016-04-07 19:44:31 -07:00
mangogogos 06a41c3785 Forward touchable events to TouchableNativeFeedback
Summary:Fixes #6256
Closes https://github.com/facebook/react-native/pull/6344

Differential Revision: D3021478

Pulled By: mkonicek

fb-gh-sync-id: 350cf72ad73d06d97cc1663e0d69c0c97977689e
shipit-source-id: 350cf72ad73d06d97cc1663e0d69c0c97977689e
2016-03-08 12:12:39 -08:00
Jesse Ruder 0176ac488e Add hitSlop prop on iOS and Android
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
2016-02-16 16:51:39 -08:00
fangmobile 33d8db599e added accessibility props for touchables
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
2016-02-04 05:13:32 -08:00
Jeff Berg 48117ce6c4 Fix TouchNativeFeedback so that the ripple starts from where a person touches
Summary:
It needs the touch coordinates for with-in the element, not for on the page.
Closes https://github.com/facebook/react-native/pull/5400

Reviewed By: svcscm

Differential Revision: D2848834

Pulled By: androidtrunkagent

fb-gh-sync-id: 88cf0fd7bd2332eb3db835b26438064412c8358c
2016-01-20 20:36:38 -08:00
Alex Kotliarskyi 28c0240361 Fix `background` warning in TouchableNativeFeedback
Summary:
The problem: no matter what value `background` prop has, it always triggers a warning

![screen shot 2016-01-05 at 1 20 35 pm](https://cloud.githubusercontent.com/assets/192222/12128053/c0a8754a-b3af-11e5-92c6-921e2e0c7cc4.png)

Looks like this happens because we use `createStrictShapeTypeChecker` prop types inside `PropTypes.oneOfType` instead of `PropTypes.shape`.
Closes https://github.com/facebook/react-native/pull/5132

Reviewed By: svcscm

Differential Revision: D2804478

Pulled By: mkonicek

fb-gh-sync-id: 32ce964047bddd9d92c214baaff5422dbcfd7e90
2016-01-06 05:58:31 -08:00
Nick Lockwood 60db876f66 Wrapped UIManager native module for better abstraction
Summary: public

RCTUIManager is a public module with several useful methods, however, unlike most such modules, it does not have a JS wrapper that would allow it to be required directly.

Besides making it more cumbersome to use, this also makes it impossible to modify the UIManager API, or smooth over differences between platforms in the JS layer without breaking all of the call sites.

This diff adds a simple JS wrapper file for the UIManager module to make it easier to work with.

Reviewed By: tadeuzagallo

Differential Revision: D2700348

fb-gh-sync-id: dd9030eface100b1baf756da11bae355dc0f266f
2015-11-27 07:00:32 -08:00
Krzysztof Magiera f2545bafc9 Use requireNativeComponent everywhere.
Reviewed By: sahrens

Differential Revision: D2663780

fb-gh-sync-id: 94a7e2265f6f869a2bdf1576dd8ea76b4c5f0b34
2015-11-18 09:43:28 -08:00
James Ide f331d2a844 Expose the touch-retention offset as a prop
Summary: The touch-retention offset defines a rect around a touchable component in which the touch is retained. Easiest way to see this is to touch a button in a real navigation bar and slide your finger out of the range and back in. This diff exposes the offset as a prop (I thought touchRetentionOffset was a more informative name than pressRectOffset)

Fixes #198
Closes https://github.com/facebook/react-native/pull/713

Reviewed By: svcscm

Differential Revision: D2115370

Pulled By: shayne

fb-gh-sync-id: c3f57940dfa3806f9c88df03a01d4d65bb58cf32
2015-11-16 13:53:31 -08:00
Ben Alpert 84df87ef64 Fix React warnings
Reviewed By: @sebmarkbage

Differential Revision: D2548854

fb-gh-sync-id: 9ace9ce57641e2dcaae997358e6404044d871f82
2015-10-16 03:41:14 -07:00
Jason Als f762a55abd Wrong function name
Summary: RippleAndroid is actually Ripple
Closes https://github.com/facebook/react-native/pull/2710

Reviewed By: @​svcscm

Differential Revision: D2452607

Pulled By: @mkonicek
2015-09-21 09:00:34 -07:00
ChristianHersevoort b6cb0e1246 Fixed typo in TouchableNativeFeedback docs
Summary: Closes https://github.com/facebook/react-native/pull/2843

Reviewed By: @​svcscm

Differential Revision: D2457197

Pulled By: @foghina
2015-09-18 10:32:25 -07:00
Alexsander Akers 9a2d05d9b2 Move color processing to JS
Reviewed By: @vjeux

Differential Revision: D2346353
2015-09-17 17:20:45 -07:00
Martin Konicek 42eb5464fd Release React Native for Android
This is an early release and there are several things that are known
not to work if you're porting your iOS app to Android.

See the Known Issues guide on the website.

We will work with the community to reach platform parity with iOS.
2015-09-14 18:13:39 +01:00