Commit Graph

49 Commits

Author SHA1 Message Date
nossbigg 7ee13cc84c Refine Keyboard API Event typings (#23272)
Summary:
- Improve type inference of the `event.easing` keyboard event property with the `KeyboardEventEasing` type.
- Exporting `KeyboardEventName` and `KeyboardEventEasing` for others to use.
- Removing unnecessary optional property flag (ie.`?`) for all properties in `KeyboardEvent`. (I personally haven't seen any of the properties not being returned for all keyboard events).

[iOS] [Changed] - Refine Keyboard API Event typings
Pull Request resolved: https://github.com/facebook/react-native/pull/23272

Differential Revision: D13941758

Pulled By: cpojer

fbshipit-source-id: 4891898c29cf6963069dbe6b4d439694761fd9e7
2019-02-04 07:45:42 -08:00
nossbigg 05f35c296d Expose isLocalUserInfoKey to keyboard event notifications (#23245)
Summary:
Given two apps loaded side-by-side and when a `Keyboard` event is triggered, there is no way to ascertain which app triggered the keyboard event. This ambiguity can arise in slide over/split view scenarios.

This pull request exposes the `isLocalUserInfoKey` property of the native `UIKeyboard` iOS events to the `Keyboard` event listener; this property will return `true` for the app that triggered the keyboard event.

(Also, I threw in a couple of Keyboard.js tests just for fun 😅)

[iOS][Added] - Expose isLocalUserInfoKey to keyboard event notifications

1. Load two apps side-by-side, with the app on the left side subscribing to the keyboard events (and logging out the events as they happen)
1. Trigger a keyboard to appear with the left app. The logged keyboard event will contain the `isEventFromThisApp` property which will be true.
1. Dismiss the keyboard
1. Trigger a keyboard to appear with the right app. The left app will still log the keyboard event, but the event's `isEventFromThisApp` property will be false (because the left app didn't trigger the keyboard event)
Pull Request resolved: https://github.com/facebook/react-native/pull/23245

Differential Revision: D13928612

Pulled By: hramos

fbshipit-source-id: 6d74d2565e2af62328485fd9da86f15f9e2ccfab
2019-02-01 14:32:19 -08:00
Shaun Stanworth 745484c892 Remove height styling when keyboard closed (#16965)
Summary:
Closes #13754

Fixing previously reported bug #13754

Video here https://imgur.com/a/3IgqP

[GENERAL] [BUGFIX] [KeyboardAvoidingView] - Correct height behaviour when keyboard closed
Pull Request resolved: https://github.com/facebook/react-native/pull/16965

Differential Revision: D13860208

Pulled By: cpojer

fbshipit-source-id: 9ae7f81fd24999518a6ae85016d4f75dac3c4274
2019-01-29 07:31:47 -08:00
Rafael Melo e4d7fc06cb Fixed string ref which was causing alert on react <Strictmode> (#23146)
Summary:
Changelog:
----------
[General] [Fixed] - After using React's `<StricMode>` it was discovered that a string ref was set, which is bad practice.
Pull Request resolved: https://github.com/facebook/react-native/pull/23146

Differential Revision: D13802397

Pulled By: cpojer

fbshipit-source-id: c2744877b25ad59eb1e4e9ce48a45e762f227b56
2019-01-24 08:28:47 -08:00
Baldy Lukasz 87b6533937 Duration cannot be less then 10ms (#21858)
Summary:
Related to: #21853

Fixes #21853
Pull Request resolved: https://github.com/facebook/react-native/pull/21858

Differential Revision: D13322060

Pulled By: hramos

fbshipit-source-id: 00a8de018fce6507aa131a11ba3e95d57044e683
2018-12-04 14:45:59 -08:00
Christoph Nakazawa 4148976a83 Use `invariant` instead of `fbjs/lib/invariant`
Summary: This is one more step to remove `fbjs` from `react-native-github`. This changes both the internal and external code to use `invariant` from zertosh instead of the copy in fbjs.

Reviewed By: yungsters

Differential Revision: D13195941

fbshipit-source-id: 73564ca1715110e7da9c7ef56dc57374d61377e0
2018-12-03 00:07:02 -08:00
nd-02110114 fbc5a4f5e6 Turn Flow strict mode on for KeyBoard (#22114)
Summary:
Related to #22100

Turn Flow strict mode on for KeyBoard

- [x] npm run prettier
- [ ] npm run flow-check-ios
- [ ] npm run flow-check-android

This error was happend #22101 #22048

[GENERAL] [ENHANCEMENT] [Components/Keyboard/Keyboard.js] - Flow strict mode
Pull Request resolved: https://github.com/facebook/react-native/pull/22114

Differential Revision: D12920947

Pulled By: TheSavior

fbshipit-source-id: 8d72019efd4d30032ce4784764e5deb9c60e7b01
2018-11-04 23:05:54 -08:00
Ignacio Olaciregui ae8ec39397 Fix linting issues (#22062)
Summary:
Fixes lots of ESLint warnings. Many of them where in PR #20877 by janicduplessis which requested to split the linting fixes from configuration and package changes.

I solved only the issues that I was most certain about but I would love to get hands on all of them with a little bit of input.
Pull Request resolved: https://github.com/facebook/react-native/pull/22062

Differential Revision: D12889447

Pulled By: TheSavior

fbshipit-source-id: 35f7a08104a5b859c860afdde4af2b32c0685c50
2018-11-01 14:29:16 -07:00
Héctor Ramos 1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
Peter van der Zee 29fb2a8e90 Bump Prettier to 1.13.4 on xplat
Summary:
Bump Prettier to use version 1.13.4
All code changes are caused by running Prettier and should only affect files that have an `format` header.
All other changes caused by yarn.

Reviewed By: ryanmce

Differential Revision: D8251255

fbshipit-source-id: 0b4445c35f1269d72730f2000002a27c1bc35914
2018-06-06 05:32:06 -07:00
Tim Yung c017dcb0f2 RN: Switch KeyboardAvoidingView to Class Syntax
Summary:
Refactors `KeyboardAvoidingView` by using class syntax and fixing all Flow errors.

Note that there's still a bunch of sketchy stuff going on in this component with mutated instance variables (that are used in `render`!) and unsafe lifecycle methods. But at least now it's a little bit less painful on the eyes.

Reviewed By: TheSavior

Differential Revision: D7987443

fbshipit-source-id: f5c27a9dd383c430d9a5a9dc0b6e10e2c4fe8dd9
2018-05-14 17:52:25 -07:00
Tim Yung 752863629d RN: Fix Type for ReactNative.NativeComponent (2/2)
Reviewed By: TheSavior

Differential Revision: D7984936

fbshipit-source-id: d0477c54420b49220e9529fa70c2b2babce0b409
2018-05-13 01:05:57 -07:00
Eli White 188b118b60 Flow Type KeyboardAvoidingView
Reviewed By: yungsters

Differential Revision: D7978494

fbshipit-source-id: e21b4910470d3dc3fd35027f2f975b6842baa6ab
2018-05-12 10:35:27 -07:00
Eli White d01ab66b47 Prettier React Native Libraries
Reviewed By: sahrens

Differential Revision: D7961488

fbshipit-source-id: 05f9b8b0b91ae77f9040a5321ccc18f7c3c1ce9a
2018-05-10 19:10:38 -07:00
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
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
Wenjing Wang 85bd98ecac Wrap textInput with KeyboardAvoidingView
Differential Revision: D6693570

fbshipit-source-id: f6946074d82cef2c68454bfc829c30013d19a151
2018-01-10 13:24:22 -08:00
Spencer Ahrens 4d33080f0f better Keyabord event utils
Reviewed By: shergin

Differential Revision: D6639418

fbshipit-source-id: ef973cfebb94325579525bdcd3990737fe576ef8
2017-12-28 09:05:51 -08:00
Koen Punt ad4450ac13 prevent scheduling unnecessary layoutanimation
Summary:
when a hardware keyboard is connected, the virtual keyboard can be hidden (this can easily be demonstrated in the simulator), which means the height of the keyboard is 0. When in this case a `LayoutAnimation` is scheduled, the `KeyboardAvoidingView` won't be affected, but the next layout change will be animated, which can have unintended side-effects. This can also trigger the `Overriding previous layout animation with new one before the first began` warning.

<details>
<summary>Screenshot</summary>

![image](https://user-images.githubusercontent.com/351038/33261130-22cf2e0c-d362-11e7-8629-0cc70cda67d8.png)

</details>

Open the `KeyboardAvoidingView` example in the `RNTester` project, import `LayoutAnimation` and add something rendered conditionally to the content of the `Modal`, e.g.;

```jsx
{this.state.behavior === 'position' &&
  <Text>We're using position now</Text>
}
```

Then update the `onSegmentChange` handler with a `LayoutAnimation`;

```js
onSegmentChange = (segment: String) => {
  LayoutAnimation.easeInEaseOut();
  this.setState({behavior: segment.toLowerCase()});
};
```

Now open the example in the simulator and play with the "Toggle Software Keyboard" option;

![image](https://user-images.githubusercontent.com/351038/33262149-9ba182fa-d365-11e7-9491-890928656f5d.png)

Now when you focus the input, no keyboard should appear, and when you then press an option of the segmented control, you should get the beforementioned warning.

After this change this warning will no longer appear, but the component still behaves the same as before.

[IOS] [BUGFIX] [KeyboardAvoidingView] - prevent scheduling unnecessary `LayoutAnimation`
Closes https://github.com/facebook/react-native/pull/16984

Differential Revision: D6472300

Pulled By: shergin

fbshipit-source-id: c4041dfdd846cdc88b2e9d281517ed79da99dfe7
2017-12-03 21:15:29 -08:00
Garrett McCullough cb6ec7c321 improve docs for KeyboardAvoidingView
Summary:
The documentation for `KeyboardAvoidingView` was pretty thin. Tried to fill it out more and corrected a couple words.

n/a

[DOCS] [ENHANCEMENT] [KeyboardAvoidingView] - Improve the documentation for the props for KeyboardAvoidingView

* **Who does this affect**: Users that are manually calling the methods on KeyboardingAvoidingView.
* **How to migrate**: Add an underscore before the name of the method
* **Why make this breaking change**: These methods are not meant to be public. For example, the exposed `onLayout` function is not a prop that accepts a function like is typical of the rest of React Native but is the internal method that is called when the component's onLayout is triggered.
* **Severity (number of people affected x effort)**: Low
Closes https://github.com/facebook/react-native/pull/16479

Differential Revision: D6261005

Pulled By: hramos

fbshipit-source-id: 7e0bcfb0e7cb6bb419964bd0b02cf52c9347c608
2017-11-07 11:57:22 -08:00
Adam Dierkens 35ea34298c - Fixed link ref for NativeEventEmitter.js
Summary:
- Make it link to the right location for [NativeEventEmitter](https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js)

The docs are wrong.

Copy-paste the link. 404 === Bad, 200 === Good
Closes https://github.com/facebook/react-native/pull/16555

Differential Revision: D6184944

Pulled By: shergin

fbshipit-source-id: 0cbf2768c50439935bf0d18f8ca87b85dfedf1b5
2017-10-29 23:17:18 -07:00
ashoat 833b27483b Fix Flow errors at declaration of most major library components
Summary:
The relevant changes in the PR are to Libraries/StyleSheet/EdgeInsetsPropType.js; the rest are just removals of FlowIgnores.

The definition of the relevant types is [here](https://github.com/facebook/flow/blob/master/lib/react.js#L262-L271).

The long and short of it is that for whatever reason, Flow is unable to realize that `ReactPropsChainableTypeChecker` is a subtype of `ReactPropsCheckType` unless we assert it. Once we explicitly hint this to the typechecker, it realizes that `EdgeInsetsPropType` is indeed a valid React PropType, and stops complaining that it isn't.
Closes https://github.com/facebook/react-native/pull/16437

Differential Revision: D6109742

Pulled By: sahrens

fbshipit-source-id: e4e10720b68c912d0372d810409f389b65d7f4b1
2017-10-20 03:50:25 -07:00
Marshall Roch 91b6b4efb9 @allow-large-files Flow v0.54.0
Reviewed By: leebyron

Differential Revision: D5773490

fbshipit-source-id: 2c54bb6326f23edbe9a969f3010f79da8189923e
2017-09-06 03:33:43 -07:00
Spencer Ahrens 365aea3415 Libraries/Shared --> Libraries/www-shared, EventEmitter --> vendor/emitter
Reviewed By: fkgozali

Differential Revision: D5455575

fbshipit-source-id: 0eb4da4b1d8688b704f2f751143610e6ed836ce7
2017-07-21 09:40:15 -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
Pieter De Baets 9108f98ca7 Add type for onLayout
Reviewed By: sahrens

Differential Revision: D5364203

fbshipit-source-id: ad87179422b0e595fc78db21a3108d50ba31564c
2017-07-07 03:06:21 -07:00
Tino 3ba8e6a901 Keyboard will show documentation
Summary:
Clarified documentation for keyboardWillShow on Android as seen in issue #14275

Clarifies documentation of keyboardWillShow

None as it is just a comment that changed.
Closes https://github.com/facebook/react-native/pull/14350

Differential Revision: D5275173

Pulled By: shergin

fbshipit-source-id: d4fb08de71e6be40bb363dfc82d38b191570c476
2017-06-19 11:06:33 -07:00
Reem Helou a975c1e834 Fix Keyboard avoiding View component
Reviewed By: ericvicenti

Differential Revision: D5059434

fbshipit-source-id: 3720aa8ee60ed7cc9fd6c3ab7efa38986b806302
2017-05-22 13:18:22 -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
Héctor Ramos d69c85f878 Update Keyboard.js
Summary:
What existing problem does the pull request solve?

According to this issue: https://github.com/facebook/react-native/issues/3468 , only `keyboardDidShow`and `keyboardDidHide` events are available on android at this moment.

I think this information should be displayed in the documentation since default `android:windowSoftInputMode` is `adjustResize`.
Closes https://github.com/facebook/react-native/pull/13155

Differential Revision: D4795828

Pulled By: hramos

fbshipit-source-id: 2c114f3040808a5cc3cdeb29b2067877df353620
2017-04-05 15:32:48 -07:00
Brian Vaughn de8ce45258 Ran codemod to replace View.propTypes with ViewPropTypes
Reviewed By: yungsters

Differential Revision: D4764838

fbshipit-source-id: 0b47a0fdd6793dab9333bb73bb93053fccc27dae
2017-03-24 00:30:48 -07:00
Jeff Morrison 59257d6976 fbobjc
Reviewed By: gabelevi

Differential Revision: D4652687

fbshipit-source-id: 6069c8bc24f0b88da3537ada877cdb7d1d4eccfd
2017-03-04 19:30:34 -08:00
Slavik Manukyan ec6e274172 relativeKeyboardHeight works wrong in some cases
Summary:
relativeKeyboardHeight calculation is wrong when frame.y < keyboardFrame.y

Let's look at an example:

``` jsx
import React, { Component } from 'react';
import {
  KeyboardAvoidingView,
  TextInput,
  AppRegistry,
  Text,
  View
} from 'react-native';

export default class Test extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
      <View style={{flex: 1, marginTop: 20}}>
          <Text style={{ flex: 1, alignItems: 'center'}}>
            Hi! This is test.
          </Text>

          <KeyboardAvoidingView behavior={'position'} keyboardVerticalOffset={-20} >
            <TextInput
              style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            />
          </KeyboardAvoidingView>
      </View>
    );
  }
}

AppRegistry.registerComponent('Test', () => Test);
```

![rn-relativekb](https://cloud.githubusercontent.com/assets/13254349/17298119/b2192830-5819-11e6-968c-d9e95b6e4aba.gif)

How _relativeKeyboardHeight_ calculates positio
Closes https://github.com/facebook/react-native/pull/9139

Differential Revision: D4168431

Pulled By: hramos

fbshipit-source-id: 9181276355490452071b51b51ed7dc9ab80b2444
2016-11-14 11:58:58 -08:00
James Ide 5105c09f56 Fix missing methods in Keyboard module
Summary:
They keyboard module is an instance of `NativeEventEmitter` which is an instance of `EventEmitter`. But the exported module only has a small subset of the APIs. This broke existing codebases which are using the methods not exported currently.

The PR just reassigns the variable before exporting so that the actual module is exported instead of the dummy object used for documentation. It also fixes a layout issue in the documentation.
Closes https://github.com/facebook/react-native/pull/10671

Differential Revision: D4110355

fbshipit-source-id: a6757f3ca8c2494970ba221b10a7e6e9a5f2d64d
2016-11-01 08:58:39 -07:00
Konstantin Raev 6ea26c01de Reverted commit D4027388
Reviewed By: yungsters

Differential Revision: D4027388

fbshipit-source-id: 8e3341b6f393ccf432c1a4e22a7cbf422284a06f
2016-10-16 04:13:42 -07:00
Jan Kassens e58d17e68b React.Element<any> » React.Element<*>
Reviewed By: yungsters

Differential Revision: D4027388

fbshipit-source-id: 5bc178eab1ab72283622b4b7d418f9fd43ec0792
2016-10-15 17:58:38 -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 e8198aed8d Cleanup: Prefer `React.Element` over `React$?Element`
Reviewed By: vjeux

Differential Revision: D4013049

fbshipit-source-id: 18a447fdbc584418d6a51770363bcd221e7fb7dc
2016-10-14 08:59:37 -07:00
Isak Dunér 770091f3c1 add null check for keyboardFrame variable in KeyboardAvoidingView component
Summary:
This is a critical change and should be pushed to stabel asap

The reason for the pull request is to prevent crashes that can occure if the function relativeKeyboardHeight(keyboardFrame: ScreenRect) got null as an input variable which sometimes does happen.
Closes https://github.com/facebook/react-native/pull/10287

Differential Revision: D3988359

Pulled By: bestander

fbshipit-source-id: 0d1052b590b2684907ea6f7d6b4fe9b89989d4dd
2016-10-08 20:28:42 -07:00
sunnylqm 1941450649 no "window" in react native
Summary:
There is no "window" in react native. And by the way fix the indent.
Closes https://github.com/facebook/react-native/pull/10182

Differential Revision: D3974090

Pulled By: javache

fbshipit-source-id: e0e47e15364abff5bcb136d988e234fc8e1f0a8b
2016-10-05 04:43:45 -07:00
Gant Laborde 542ab8643e adds `Keyboard.dismiss()` function and document Keyboard
Summary:
Simple and elegant.  Now someone can dismiss a keyboard in a way that makes sense.

```js
import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()
```

+ docs
Closes https://github.com/facebook/react-native/pull/9925

Differential Revision: D3935357

fbshipit-source-id: ecd2fb5c72c4dd769951d308e9bb6ee5d888052a
2016-09-28 18:13:37 -07:00
Sokovikov 0a1d7280eb add missing KeyboardAvoidingView documentation
Summary: Closes https://github.com/facebook/react-native/pull/9667

Differential Revision: D3791743

Pulled By: hramos

fbshipit-source-id: 823bf44028d8fb01f13510753362b8da3692f936
2016-08-30 10:43:33 -07:00
David Aurelio 94666f16c7 Auto-fix lint errors
Reviewed By: bestander

Differential Revision: D3683952

fbshipit-source-id: 9484d0b0e86859e8edaca0da1aa13a667f200905
2016-08-09 06:43:46 -07:00
Slavik Manukyan 54d8f221c2 Way to pass styles to nested view
Summary:
Ability to pass styles to nested view for _position_ behavior.

Use case:

``` jsx
<KeyboardAvoidingView
          behavior={'position'}
          style={{ flex: 1 }}
          contentContainerStyle={{ flex: 1 }}
          keyboardVerticalOffset={ - VERTICAL_OFFSET }
>
          <SomeContainer   />
</KeyboardAvoidingView>
```
Closes https://github.com/facebook/react-native/pull/9065

Differential Revision: D3662876

Pulled By: javache

fbshipit-source-id: 9b08a04449431c4e563ef4464b5a7dba1fc02e4b
2016-08-03 11:28:58 -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
Nick Lockwood 8b78846a95 Open sourced KeyboardAvoidingView
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
2016-06-07 07:43:49 -07:00
Nick Lockwood 2525feb37f Updated Websocket to use new event system
Reviewed By: javache

Differential Revision: D3292473

fbshipit-source-id: f9a9e0a1b5a12f7fa8b36ebdba88405370f91c54
2016-05-12 08:30:24 -07:00
Nick Lockwood 9ee1f37bad Added native event emitter
Summary:
This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/

I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already).

Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`.

JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing:

    const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
    RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... });

You'd now write:

    const Keyboard = require('Keyboard');
    Keyboard.addListener('keyboardWillShow', (event) => { ... });

Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of:

     this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...);

Write:

    this.addListenerOn(Keyboard, 'keyboardWillShow', ...);

This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module.

As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff.

For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface.

Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem).

Reviewed By: javache

Differential Revision: D3269966

fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 06:27:29 -07:00