No documentation on using DeviceEventEmitter

[d-vine]

After the release of 0.11.0 I migrated from react-native-keyboard-event to the built-in events but didn't find any documentation on how to use them. At all. After digging through the code for a while I found out how to add and (after some more digging) how to remove listeners. But there surely should be some documentation on that. If you provide a starting point I'd contribute a couple of paragraphs.

[mkonicek]

Can you share your code please?

[mkonicek]

If you look at:
https://github.com/facebook/react-native/blob/master/Libraries/Device/RCTDeviceEventEmitter.js

You'll find the documentation here:
https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js

[d-vine]

I have looked at those files to understand whats going on. But firstly I feel that this is an important enough subject to get covered in the main react-native docs, probably in the API section. Secondly it wasn't obvious to me at first how to remove the one listener again after registering it. The API only provides removeAllListeners and removeCurrentListener, both not covering what I want to do. My current solution looks as follows:

var React = require('react-native')
    , DeviceEventEmitter = React.DeviceEventEmitter
    , _keyboardWillShowSubscription
    , _keyboardWillHideSubscription
    ;

var component = React.createClass({

    componentDidMount: function() {
        _keyboardWillShowSubscription = DeviceEventEmitter.addListener('keyboardWillShow', (e) => console.log('keyboardWillShow', e));
        _keyboardWillHideSubscription = DeviceEventEmitter.addListener('keyboardWillHide', (e) => console.log('keyboardWillHide', e));
    },

    componentWillUnmount: function() {
        _keyboardWillShowSubscription.remove();
        _keyboardWillHideSubscription.remove();
    },

    //...
});

[d-vine]

Hm. Maybe something like the Reflux.listenTo mixin would be useful here.

[mkonicek]

Thanks for the example! I'm not very familiar with this API but just searched the fb codebase and I indeed found:

RCTDeviceEventEmitter.addListener(
  'keyboardWillShow',
  this.handleKeyboardWillShow
);

RCTDeviceEventEmitter.addListener(
  'keyboardWillHide',
  this.handleKeyboardWillHide
);

Handling keyboard show and hide events indeed does seem like an important topic to cover. Would you be up for sending a PR with documentation?

[mkonicek]

Here is the implementation showing all the available keyboard events: https://github.com/facebook/react-native/blob/master/React/Base/RCTKeyboardObserver.m

Looks like these events are not implemented on Android yet.

[d-vine]

Sure, I can try to spin up a little bit of documentation, but where do I put it? Just create a new file in the docs folder? Also I'm not sure if my example above with local variable inside the component really is best practice.

[grabbou]

I believe DeviceEventEmitter should get it's own section under APIs will all the events listed (description would be handy). There are plenty of events being sent during the app lifecycle, including these handy keyboard events.

[nicholasalanbrown]

I'm trying to get this to work with no luck. Following the examples above, I tried to attach a listener like so:

  componentWillMount: function() {
    DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
      console.log('keyboard opened');
    });
  },

I took those lines directly from the docs here:
https://facebook.github.io/react-native/docs/native-modules-android.html

While also declaring the necessary variable at the top of my fiel:

let React = require('react-native');

let {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableHighlight,
  TouchableOpacity,
  Image,
  TextInput,
  Animated,
  DeviceEventEmitter
} = React;

But I get nothing in my console upon opening the keyboard. Any idea?

[mkonicek]

@nicholasalanbrown I can't tell off the top of my head what's wrong with the code but I'd recommend using Stack Overflow for asking question. A lot of people from the community hang out there and someone might know.

[mkonicek]

Searching the RN codebase for keyboardWillShow. In ScrollResponder.js:

mixins: [Subscribable.Mixin],
...
componentWillMount: function() {
  this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', this.scrollResponderKeyboardWillShow);

[mkonicek]

@dvine-multimedia @grabbou Yes, creating a new file in /docs and adding it under APIs would be awesome.

[nicholasalanbrown]

I still think a section in the documentation would be nice but this one was totally my fault. The boilerplate I started with was using 0.10.0. Sorry!

[benvium]

@mkonicek Your mixin-based example is definitely the way to go here.
I vote for that in the docs rather than the _keyboardWillShowSubscription.remove(); method!
If there are two instances of the component things will break, and it's more fiddly.

Here's my example:

const Subscribable = require('Subscribable');
...
const LoginPage = React.createClass({
mixins: [Subscribable.Mixin,],
componentWillMount () {
        // Use mixin so the listener is removed again
        this.addListenerOn(DeviceEventEmitter, 'keyboardWillShow', this.keyboardWillShow, this);
        this.addListenerOn(DeviceEventEmitter, 'keyboardWillHide', this.keyboardWillHide, this);
}

[mkonicek]

Nice! Can you send a PR for the docs please?