Summary:
Set the initial opacity based on the style opacity instead of defaulting to 1. Without this change, if the opacity on the view is set to 0.5 (for example), the component will render with 1 opacity and then after a press and release it will set to 0.5. This fixes it to set to the correct value on mount.
**Test plan (required)**
Example code:
```
<TouchableOpacity
activeOpacity={1}
style={STYLES.Button}>
{...}
</TouchableOpacity>
```
```
const STYLES = StyleSheet.create({
Button: {
opacity: 0.5,
},
});
```
Before (notice starts out dark and then after click and release becomes light):
After (starts out light and is the same light color after a click and release):
Closes https://github.com/facebook/react-native/pull/12628
Differential Revision: D4641509
fbshipit-source-id: 3b6cf653fe837df704007f585c655d4450d14497
Summary:
I ran into confusion (#12581) because the docs for TouchableOpacity stated that it doesn't change the view hierarchy, but in fact it does, and the docs are just out of date.
- [20 Feb 2015](efae175a8e/Libraries/Components/Touchable/TouchableOpacity.js (L21)) Docs correctly reflected that the component was cloned so didn't affect hierarchy
- [25 Jul 2015](725053acfe) Component was changed to being wrapped but docs weren't updated.
Went to correct this in the docs and noticed they were a bit inconsistent with each other, so have made them more unified. Each one now clearly warns about:
- If it adds a view to the hierarchy, which will affect layout.
- If it can only accept a single child.
Closes https://github.com/facebook/react-native/pull/12583
Differential Revision: D4619837
Pulled By: ericvicenti
fbshipit-source-id: 4d1becd9f290cefcb4548a5ea2878be2d2c315fa
Summary:
Nothing about the web prevents people from providing good visual feedback on touch events. I'm not trying to be a punk, just coming across this language (several times now) gives me weird feelings since I come from "the web".
Closes https://github.com/facebook/react-native/pull/12484
Differential Revision: D4608430
Pulled By: hramos
fbshipit-source-id: 9ab72bffb300aa7bd76b6e07470dfe9763e50556
Summary:
iOS return all 0 metrics for <Text> inside <Text>, which results immediate `onPressOut` event on press in. These kind of response should be ignored
this solved issue #11462
Closes https://github.com/facebook/react-native/pull/11530
Differential Revision: D4541452
Pulled By: ericvicenti
fbshipit-source-id: efd7bf1b380b1aecf7301b23f1fbd5a77a9e9095
Summary:
findNodeHandle is considered an internal module. The one to use is ReactNative.findNodeHandle. We need to rely on this because we will have two different renderers and we need the renderers to inject themselves with findNodeHandle before it is used.
I use ReactNative.findNodeHandle from inside the module because I think this leads to a cycle somewhere or might not play well with inline require otherwise.
There is also one in UIManager but that is definitely a cycle so I'm going to try to avoid that one.
Reviewed By: spicyj, bvaughn
Differential Revision: D4533911
fbshipit-source-id: f771641ea5c5366ccbaff68c42202fa6f8c18cb3
Summary:
I was comparing `<TouchableOpacity>` to `UIButton` in iOS and it just doesn't feel native. The initial delay was fixed by https://github.com/facebook/react-native/pull/10866 but still there is a lag between button release and animation.
I'm also not sure what `_hideTimeout` was used for. When logging `touchableHandle*` events looks like `touchableHandleActivePressIn` is called first, then `touchableHandleActivePressOut` and then `touchableHandlePress`. Which means the fade in animation from `touchableHandleActivePressOut` was interrupted by `touchableHandlePress`.
Reviewed By: vjeux
Differential Revision: D4309789
fbshipit-source-id: b6d4df544952e11c2ade97d860531cbb2fada36b
Summary:
> Explain the **motivation** for making this change. What existing problem does the pull request solve?
When I'm referring to the `TouchableWithoutFeedback` documentation, I keep noticing this missing 's'.
Closes https://github.com/facebook/react-native/pull/11037
Differential Revision: D4211726
Pulled By: ericvicenti
fbshipit-source-id: 32adf03ec37733128039e064b8fdfa8b817e4a01
Summary:
On iOS, when you press down native fading components, they become
transparent instantly, but then have an animated fade in/out if you
move your finger in/out of their hit box.
On react-native currently, the touchdown fades, instead of providing
instant feedback, which doesn't feel right on iOS.
I'm less familiar with Android conventions, but it seems to use fading
components for buttons less often, instead using the ripple effect from
TouchableNativeFeedback. In either case, instant feedback seems better
for the user.
Closes https://github.com/facebook/react-native/pull/10866
Differential Revision: D4175854
Pulled By: hramos
fbshipit-source-id: d993231074e8190cf4ba7ca86dc24299f05d5d8f
Summary:
this brings back the previous commit that had to be reverted due to internal breakages.
original commit: 1bb323e256
Reviewed By: AaaChiuuu
Differential Revision: D4109811
fbshipit-source-id: b50de145eaf6851138429635bc0302518d656b75
Summary:
Now that native animations for opacity and springs have landed in both iOS and Android, we can enable native animations both for TouchableBounce and TouchableOpacity.
Closes https://github.com/facebook/react-native/pull/10583
Differential Revision: D4099819
Pulled By: jingc
fbshipit-source-id: de70f8732b84d4caf0e4adfb2ad0e95b3de5da0f
Summary:
Now that native animations for opacity and springs have landed in both iOS and Android, we can enable native animations both for TouchableBounce and TouchableOpacity.
Closes https://github.com/facebook/react-native/pull/10583
Differential Revision: D4099819
Pulled By: lacker
fbshipit-source-id: 247d7bff9a778e520af764f571caf6286b4a5749
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
Summary:
Warning: bind(): You are binding a component method to the component.
React does this for you automatically in a high-performance way, so you can safely remove this call. See TouchableOpacity
Closes https://github.com/facebook/react-native/pull/10349
Differential Revision: D4008552
Pulled By: javache
fbshipit-source-id: d98fe9a0d694dee74ea872e51b02fbd75a133e43
Summary:
Update to docs to indicate that TouchableHighlight must have exactly one child (i.e. not zero or more than one). Previously it was only indicated that it cannot have more than one.
Closes https://github.com/facebook/react-native/pull/10244
Differential Revision: D3970841
fbshipit-source-id: f1c4c223cfaf150fec9bbae1041567d0c81eb63b
Summary: Currently, for short touches (under 130ms by default), we don't trigger the highlight effect. This diff makes it so that if we're not highlighted when we invoke onPress, we highlight.
Reviewed By: astreet
Differential Revision: D3932019
fbshipit-source-id: c0ff7d4c646890507ce510f51c279c88aeba66ae
Summary:
While working on a feature in realized the buttons I built using `TouchableHighlight` were too dark when pressed.
When used white white views, `TouchableHighlight` produces the color `d4d5d5`. This is different from `dedede` which iOS uses.
Let's use opacity 0.85 instead of 0.8 to make the color match iOS. See a React Native view compared to iOS settings screen (same color for pressed items now): http://imgur.com/a/6CyL3
On Android, people should be using `TouchableNativeFeedback` everywhere.
Reviewed By: sahrens
Differential Revision: D3896168
fbshipit-source-id: a7dd12b4bde079b120faaffc36d25292533a2c6d
Summary:
Currently, text inputs do not scroll when inside other components like scroll
views. This fixes it by blocking any parent native component from taking the
responder when the text input is focused and is being scrolled. This fixes the
previous implementation, where the scroll view was not able to scroll on top of
other text inputs, even though they were not focused.
This makes the component similar to it's ios counterpart.
Reviewed By: foghina
Differential Revision: D3735237
fbshipit-source-id: 724f94a6e7332d03261a80f63ffa60d0e5846932
Summary:
Currently, text inputs do not scroll when inside other components like scroll
views. This fixes it by blocking any parent native component from taking the
responder when the text input is focused and is being scrolled. This fixes the
previous implementation, where the scroll view was not able to scroll on top of
other text inputs, even though they were not focused.
This makes the component similar to it's ios counterpart.
Reviewed By: foghina
Differential Revision: D3735237
fbshipit-source-id: 0e56b2bbd3f5636540b4c3cc7cc13aa0f4d2737e
Summary:
Just noticed the old syntax was used in the docs.
Closes https://github.com/facebook/react-native/pull/8765
Differential Revision: D3560355
Pulled By: mkonicek
fbshipit-source-id: 13db21a498be205a32921a89058167dd47e1bbdf
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
Summary:
With accessibility prop set to true, it is not possible to access
childern elements. This makes it impossible to test Components with
appium and releatives. This commit adds support to change accessiblity
property on Touchable elements to overcome the aforementioned issue.
Closes https://github.com/facebook/react-native/pull/8243
Differential Revision: D3462949
Pulled By: javache
fbshipit-source-id: 65ce6507a1619218ab5b527c970a74af197ef462
Summary:
Useful to know what the default value without having to dig into the library code.
Closes https://github.com/facebook/react-native/pull/7247
Differential Revision: D3228728
Pulled By: mkonicek
fb-gh-sync-id: 433ca41d5395bbfb0c4887641a9e8b99c87b5e2b
fbshipit-source-id: 433ca41d5395bbfb0c4887641a9e8b99c87b5e2b
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
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
Summary:Adding the react native renderer dependency and various fixes to support React 15.
Don't use dispatchID for touchableHandleResponderGrant
This callback argument was removed because "IDs" no longer exist. Instead, we'll
use the tag from the event target.
The corresponding PR on React Core is: https://github.com/facebook/react/pull/6338
Reviewed By: spicyj
Differential Revision: D3159788
fb-gh-sync-id: 60e5cd2aa0af69d83fcdac3dfde0a85a748cb7b9
fbshipit-source-id: 60e5cd2aa0af69d83fcdac3dfde0a85a748cb7b9
mlanter
James Isaac
Ryan Florence
Cristian Carlesso
Libin Lu
Sebastian Markbage
Horcrux
Pieter De Baets
Alex Kotliarskyi
Tim Yung
Justin
Aria Buckles
David Aurelio
Kevin Gozali
Adam Miskiewicz
Anthony Sherbondy
Konstantin Raev
Jan Kassens
leeight
pedramsaleh
Felix Oghina
Martin Konicek
Andrei Coman
Christoph Pojer
Ben Alpert
Simon Dohmen
Omeid
Basil Hosmer
Joshua Pinter
Jeff Chien
Spencer Ahrens
