Commit Graph

56 Commits

Author SHA1 Message Date
Rubén Norte d5e9e55fa3 Remove @providesModule from all modules
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.

It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)

* Checked the Flow configuration by running flow on the project root (no errors):

```
yarn flow
```

* Checked the Jest configuration by running the tests with a clean cache:

```
yarn jest --clearCache && yarn test
```

* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:

```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```

[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995

Reviewed By: mjesun

Differential Revision: D7729509

Pulled By: rubennorte

fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
2018-04-25 07:37:10 -07:00
Krzysztof Ciombor b7bb2e5745 Add support for Android TV devices
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

* To be on par with Apple TV support, this makes it possible to run React Native apps on Android TV devices (See also: https://react-native.canny.io/feature-requests/p/android-tv-support)
* These changes also make it possible to navigate through the app using D-PAD buttons that are present on some mobile devices
* Since these changes affect, among others, `ReactRootView.java` and `Touchable.js` code and are closely related to Apple TV implementation, it makes sense for them to be included in the core

 - React native apps can be launched on Android TV devices and properly render their content
 - Navigation is possible using left, right, top, bottom arrows from the remote (or D-PAD)
 - Touchable components can handle D-PAD center button press events and correctly fire their `onPress` handlers
 - Touchable components will receive `onPressIn` and `onPressOut` events and can react to focus/blur changes appropriately (just like on Apple TV)
 - `Platform` constants allow to check if the react-native app is running on TV (`Platform.isTV`)
 - `ScrollView`s behave correctly (same as native implementation) when switching to view outside bounds – that is, the container would scroll such that the newly focused element is fully visible
 - Native "clicking" sounds are played when moving between focusable elements
 - Play/Pause click event is send to `TVEventHandler`
 - Rewind and FastForward events are send to `TVEventHandler`
 - Back button behaves as a normal Android back button
 - Diagonal buttons work correctly on Android TV, e.g. if there is no button directly to the right from the focused one, but there is one to the right but a bit higher/lower it will grab focus
 - Dev menu can be accessed by long pressing fast forward button

A demo showing RNTester app running on Android TV device (Amazon Fire TV Stick) can be found here:
[![RNAndroidTVDemo](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)](http://www.youtube.com/watch?v=EzIQErHhY20)

- `TextInput` will not work on Android TV devices. There's an issue with native `ReactEditText` implementation that prevents it from receiving focus. This makes it impossible to navigate to `TextInput`.
This will be fixed next, but will be included in a separate Pull Request
- ~Overlay permissions cannot be granted on Android TV devices running Android version >= 6.0
This is because the overlay permission can only be granted by firing an Intent to open settings page (`ACTION_MANAGE_OVERLAY_PERMISSION`). Since this page does not exist on TV devices the permission cannot be requested. This will make the app crash when trying to open dev menu (⌘+M) or displaying a redbox error.
Note: This does not affect devices running Android version < 6.0 (for example Amazon Fire TV Stick)~
This is now fixed by: https://github.com/facebook/react-native/pull/16596

* Launch the RNTester app on Android TV device.
  * Ensure it launches without a crash
  * Ensure basic navigation is possible
  * Ensure Touchable components can receive select events
* Ensure the changes do not break current Android and iOS mobile devices functionality.
* Ensure the changes do not break current Apple TV functionality.

[RNAndroidTVDemo video](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)

* Added `ReactAndroidTVViewManager` that handles TV `KeyEvent`s and dispatches events to JS - This is the core that enables basic navigation functionality on Android TV devices
* Following the above change we copy `TVEventHandler.ios.js` into `TVEventHandler.android.js` to enable JS to pick up those native navigation events and dispatch them further to subscribed views. (Note: We do not have a native `TVNavigationEventEmitter` implementation on Android, thus this file is slightly modified, e.g. it does pass `null` to `NativeEventEmitter` constructor)
* Added `uiMode` to `AndroidInfoModule`. (**Note**: This required changing `extends BaseJavaModule` to `extends ReactContextBaseJavaModule` to be able to use `getSystemService` which requires `Context` instance!
* Added `isTV` constants to both `Platform.ios.js` (keeping the deprecated `isTVOS` as well) and `Platform.android.js`
* Changed condition check on `Touchable.js` to use the newly added `isTV` flag to properly handle TV navigation events on Android as well
* Added `LEANBACK_LAUNCHER` to `RNTester` `intent-filter` so that it is possible to launch it on Android TV devices.
* See also a PR to `react-native-website` repo with updated docs for Android TV: https://github.com/facebook/react-native-website/pull/59

 - [ ] Fix `TextInput` components handling by allowing them to be focused and making a proper navigation between them (and/or other components) possible. One thing to note here that the default behavior to immediately open software keyboard when focused on `TextInput` field will need to be adjusted on Android TV as well)
 - [x] Fix overlay permissions issue by changing the way redbox/dev menu are displayed (see: https://github.com/facebook/react-native/pull/16596)
 - [ ] Adjust placement of TV-related files (e.g. the `TVEventHandler.js` file is placed inside `AppleTV` directory which is not accurate, since it does handle Android TV events as well)

Previous discussion: https://github.com/SoftwareMansion/react-native/pull/1
<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAl  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->

[ANDROID] [FEATURE] [TV] - Added support for Android TV devices
Closes https://github.com/facebook/react-native/pull/16500

Differential Revision: D6536847

Pulled By: hramos

fbshipit-source-id: 17bbb11e8583b97f195ced5fd9762f8902fb8a3d
2018-03-06 10:47:02 -08:00
Maksym Komarychev 9366ce416f Update opacity when `disabled` prop is changed
Summary:
fixes #17105

If you render

```
    <TouchableOpacity
        disabled={true}
        style={{opacity: 0.5}}
    >
        ...
    </TouchableOpacity>
```

and then

```
    <TouchableOpacity
        disabled={false}
        style={{opacity: 1}}
    >
        ...
    </TouchableOpacity>
```

The content of `TouchableOpacity` will still have opacity = 0.5 because real
opacity is controlled by animated property which should be properly updated
when `disabled` prop changes.

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Usually when a button or other UI component is built with `TouchableOpacity` you may want to change it's opacity if state of component is changed (enabled/disabled). Opacity provided in props is overridden with internally-managed animated value. Add extra check when component is updated to trigger opacity animation upon change of `disabled` flag.

You can use code from https://github.com/facebook/react-native/issues/17105.

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.)

[GENERAL][BUGFIX][TouchableOpacity] - trigger animation on `opacity` upon change in `disabled` prop.
<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/17106

Differential Revision: D7158549

Pulled By: hramos

fbshipit-source-id: 209cc433b829b129810e8a884964c8853ca3fe8f
2018-03-05 16:12:00 -08:00
Eli White 3152e93095 Converting Libraries/Components to not use var
Reviewed By: sahrens

Differential Revision: D7117137

fbshipit-source-id: a55a04928a0073a17e0709e851aa8b11678042ba
2018-03-03 15:38:18 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Brian Vaughn 6f007e8957 Ran rename-unsafe-lifecycles codemod on xplat/js
Reviewed By: trueadm

Differential Revision: D6889214

fbshipit-source-id: e815cda4b09f3650ae3b0b9a44ae6f5fcb48fe25
2018-02-08 10:58:31 -08:00
dlowder-salesforce c1223c5530 Apple TV: TouchableOpacity and Button need hasTVPreferredFocus support
Summary:
**Motivation**

Give `TouchableOpacity` and `Button` the same TV focus support as is already present in `TouchableHighlight`.

**Test plan**

Manual testing on TV simulator and devices.
Closes https://github.com/facebook/react-native/pull/15561

Differential Revision: D5665976

Pulled By: hramos

fbshipit-source-id: 0d5c588e1c82471f23617a3df1b77abc589a7c63
2017-10-18 12:18:12 -07:00
nicehacker f7f347329e Add example on Components
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Adding example on components section with [react-native-web-player](https://github.com/dabbott/react-native-web-player)

- ActivityIndicator
- TouchableOpacity
- TouchableHighlight

Screenshot on http://localhost:8079/react-native/docs/activityindicator.html
![react-native-activityindicator](https://user-images.githubusercontent.com/13135332/30432801-adca0982-9988-11e7-8e70-94ad9e42ea43.png)

Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html
![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30432718-80570554-9988-11e7-9c81-15ab98327fed.png)

Screenshot on http://localhost:8079/react-native/docs/touchablehighlight.html
![react-native-touchablehighlight](https://user-images.githubusercontent.com/13135332/30432733-8290fbb8-9988-11e7-94a1-86c3166e544d.png)
Closes https://github.com/facebook/react-native/pull/15950

Differential Revision: D5881366

Pulled By: hramos

fbshipit-source-id: 2926071723defedf9ed5cb1b1128204256c71dd9
2017-09-21 17:37:07 -07:00
nicehacker fa1b533c56 Add Example for TouchableOpacity.js
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Adding example with [react-native-web-player](https://github.com/dabbott/react-native-web-player)

Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html
![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30335218-bd32fb0e-9807-11e7-976d-5235402fdba8.png)
Closes https://github.com/facebook/react-native/pull/15911

Differential Revision: D5817180

Pulled By: TheSavior

fbshipit-source-id: 6399a53dabf8e3f0cf680aeb41d8afbaa2ce11e8
2017-09-12 20:32:07 -07:00
levi serebryanski 85247f9986 Remove unused focusedOpacity prop and function
Summary:
The `focusedOpacity` prop is only used inside `_opacityFocused` which is not used anywhere. This pr removes this unused code.
The code was added in https://github.com/facebook/react-native/pull/10427 but it does not appear to be used in the final version of the pr.
Closes https://github.com/facebook/react-native/pull/14984

Differential Revision: D5430611

Pulled By: shergin

fbshipit-source-id: 0bc4fdef04304eae9785caaf76ae1fb12ce6651e
2017-07-14 21:03:53 -07:00
Seth Fitzsimmons 9afb71fde8 Replace React.createClass with create-react-class
Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.

Fixes #14620
Refs #14712
Closes https://github.com/facebook/react-native/pull/14729

Differential Revision: D5321810

Pulled By: hramos

fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
2017-07-07 14:36:01 -07:00
Brian Vaughn 6564edce5e Ran PropTypes -> prop-types codemod against Libraries/FBReactKit/js/react-native-github
Reviewed By: acdlite

Differential Revision: D4876709

fbshipit-source-id: 3a5e92bfc74287b7a9054546c438580bed0147af
2017-04-12 16:15:15 -07:00
Andrew Y. Chen 909af08f24 Add a nativeID prop to allow native code to reference react managed views
Reviewed By: sahrens

Differential Revision: D4786713

fbshipit-source-id: af9cef0737c010b429d52d00181c00bd81f13f5b
2017-04-07 12:00:40 -07:00
mlanter f66fba83cf Set initial opacity based on style
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):
![before](https://cloud.githubusercontent.com/assets/19673711/23444255/c120cbb0-fde8-11e6-8c03-ef4f0f25736b.gif)

After (starts out light and is the same light color after a click and release):
![after](https://cloud.githubusercontent.com/assets/19673711/23444254/c106a6e0-fde8-11e6-8181-def45b7bb84f.gif)
Closes https://github.com/facebook/react-native/pull/12628

Differential Revision: D4641509

fbshipit-source-id: 3b6cf653fe837df704007f585c655d4450d14497
2017-03-01 21:46:40 -08:00
James Isaac 64c8f22343 Correct/consistent docs for Touchable components
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
2017-02-27 14:04:57 -08:00
Pieter De Baets c92ad5f6ae Apple TV support 4: support for input (tvOS focus engine)
Reviewed By: shergin

Differential Revision: D4333546

fbshipit-source-id: 8655070e81dbb62a80ab1f00a43ef6c2d9654618
2016-12-19 06:28:40 -08:00
Alex Kotliarskyi 41f2169629 Improve TouchableOpacity
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
2016-12-13 11:28:30 -08:00
Aria Buckles fa8c536b31 TouchableOpacity: Respond instantly to first touch
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
2016-11-14 09:43:34 -08:00
David Aurelio 3683beb88a RN: Update React (2/2)
Reviewed By: kentaromiura

Differential Revision: D4026114

fbshipit-source-id: 67808af91454d95941fea01eef58a4d9086f46e1
2016-11-04 05:43:44 -07:00
Kevin Gozali 8bb707b686 Use native animations in TouchableBounce and TouchableOpacity
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
2016-11-01 15:58:41 -07:00
Adam Miskiewicz 426e66cfe6 Reverted commit D4099819
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
2016-10-29 13:59:02 -07:00
Adam Miskiewicz 1bb323e256 Use native animations in TouchableBounce and TouchableOpacity
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
2016-10-28 17:58:41 -07:00
Martin Konicek 70ac81f0b5 Update Touchable docs with new image require syntax
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
2016-07-13 23:13:22 -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
Omeid 4f187074bf Components:Touchables: Expose Accessibility prop. Fix #6550
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
2016-06-21 08:28:23 -07:00
Joshua Pinter 5e5cbda682 Show default `activeOpacity` value in docs.
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
2016-04-29 03:45:26 -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
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
Gabe Levi 892dd5b86a Fix errors uncovered by v0.19.0
Reviewed By: mroch

Differential Revision: D2706663

fb-gh-sync-id: 017c91bab849bf18767cacd2ebe32d1a1b10c715
2015-12-01 20:11:26 -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
facebook-github-bot-6 0d09f22dbf Get back 100% in sync with fb codebase 2015-09-16 10:30:53 -07:00
Christopher Chedeau a9607901e2 Updates from Tue 8 Sep 2015-09-08 16:54:44 -07:00
Chace Liang 836e4c03fc [RN][Accessibility] Expose accessibilityTraits and accessibilityComponentType props to Touchable* component 2015-09-03 12:16:21 -08:00
Spencer Ahrens d7b13fb32b Updates from Thu Sep 3rd. 2015-09-03 12:55:40 -07:00
Hedger Wang 36dfd402b2 [madman] Supports `onLayout` for `AdsManagerTouchableHighlight`.
Summary:
Supports `onLayout` for Touchable*` by piping onLayout
through to the native component inside since only native components support
it by default.
2015-09-01 10:22:47 -08:00
Martin Konicek da7ac11c53 Updates from Tue 25 Aug 2015-08-25 19:21:59 +01:00
Bill Fisher debca6d24f [ReactNative] Pass events through to touchable handlers
Summary:
We want to be able to access the touch data within our components' event handlers, so we need to thread the event object all the way through to them.
2015-08-21 03:03:32 -07:00
Spencer Ahrens bb7aa500d7 Updates from Thurs July 23rd 2015-07-23 01:16:05 +02:00
Christopher Chedeau 725053acfe [Animated][BREAKING_CHANGE] Convert <TouchableOpacity> to Animated
Summary:
Because we don't want to integrate Animated inside of the core of React, we can only pass Animated.Value to styles of <Animated.View>. TouchableOpacity unfortunately used cloneElement. This means that we should have asked every single call site to replace their children to Animated.View. This isn't great.

The other solution is to stop using cloneElement and instead wrap the children inside of an <Animated.View>. This has many advantages:
- We no longer use cloneElement so we're no longer messing up with elements that are not our own.
- Refs are now working correctly for children elements
- No longer need to enforce that there's only one child and that this child is a native element

The downside is that we're introducing a <View> into the hierarchy. Sadly with CSS there is no way to have a View that doesn't affect layout. What we need to do is to remove the inner <View> and transfer all the styles to the TouchableOpacity. It is annoying but fortunately a pretty mechanical process.

I think that having a wrapper is the best solution. I will investigate to see if we can make wrappers on TouchableHighliht and TouchableWithoutFeedback as well.

**Upgrade Path:**

If the child is a View, move the style of the View to TouchableOpacity and remove the View itself.

```
<TouchableOpacity onPress={...}>
  <View style={...}>
    ...
  </View>
</TouchableOpacity>

-->

<TouchableOpacity onPress={...} style={...}>
  ...
</TouchableOpacity>
```

If the child is an Image or Text, on all the examples at Facebook it worked without any change. But it is a great idea to double check them anyway.
2015-07-20 16:44:36 -08:00
Eric Vicenti 0293def7a9 Updates from Fri 5 Jun 2015-06-05 15:11:57 -07:00
jmstout 074fa759a6 [Touchable] Add custom delay props to Touchable components
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.
2015-06-03 12:57:28 -08:00
Patrick Williams 0466bbd616 Add doc warning stating that TouchableOpacity can only support a single child 2015-05-25 22:03:43 -07:00
Ben Alpert 5e51fac8d5 [react-native] In TouchableOpacity, access .props on element, not component 2015-05-08 08:31:04 -08:00
Eric Vicenti 61bd008ea0 [ReactNative] Fix TouchableOpacity crash when child props are missing 2015-05-07 18:04:19 -08:00
Brent Vatne 0b844feedb [TouchableOpacity] Reset opacity to the inactiveValue rather than always 1.0
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:
![bug](https://cloud.githubusercontent.com/assets/90494/7287207/52d6a686-e907-11e4-8e16-04b2ddd0582c.gif)

After:
![after](https://cloud.githubusercontent.com/assets/90494/7287689/5aca4776-e90c-11e4-8c40-aa6bd3e822d8.gif)

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.
2015-05-06 17:27:12 -08:00
James Ide 6638713d3c [Touchable] Change default `activeOpacity` to 0.2 to match iOS
Summary:
Closes https://github.com/facebook/react-native/pull/296
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-03-31 21:09:22 -08:00
Ryan Warren a587525c2d Fixing TouchableOpacity and TouchableHighlight documentation
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.
2015-03-28 15:18:31 -08:00
Basil Hosmer 95deed578c flowified Libraries from Avik 2015-03-25 12:44:28 -08:00