React-native: [DeviceEventEmitter] How to use keyboard easing

Created on 16 Dec 2015  路  4Comments  路  Source: facebook/react-native

DeviceEventEmitter.addListener('keyboardWillShow', this._keyboardWillShow.bind(this));

when keyboardWillShow event fired.It will pass an argument with an easing attribute inside.
just like

_keyboardWillShow = (e) => {
    // e.easing === 'keyboard';
}

so.How to do animtion with keyboard easing,or this easing attribute has no usage at all?
If this easing attribute has nothing to do with Animated easing,what`s the point of passing it.

Locked

Most helpful comment

finally.
I found out how to use keyboard easing.
Its not for js animation: Animated Its used for native animation: LayoutAnimation

for example

DeviceEventEmitter.addListener('keyboardWillShow', e => {
        LayoutAnimation.configureNext(LayoutAnimation.create(
            e.duration,
            LayoutAnimation.Types[e.easing]
        ));
        this.setState({
            bottom: e.endCoordinates.height
        });
});

This works fine on IOS, haven`t have it tested on Android yet.

There should be a document about this.

All 4 comments

Hey magicismight, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

:+1:

finally.
I found out how to use keyboard easing.
Its not for js animation: Animated Its used for native animation: LayoutAnimation

for example

DeviceEventEmitter.addListener('keyboardWillShow', e => {
        LayoutAnimation.configureNext(LayoutAnimation.create(
            e.duration,
            LayoutAnimation.Types[e.easing]
        ));
        this.setState({
            bottom: e.endCoordinates.height
        });
});

This works fine on IOS, haven`t have it tested on Android yet.

There should be a document about this.

This works. But I have a listview above the keboard and listview does not respect layoutanimation.

677

So I need to know what must be done to mimic to easing of the keyboard in the animated api.

Was this page helpful?
0 / 5 - 0 ratings