How to use LayoutAnimation on Android using react native

515 views Asked by At

LayoutAnimation not working on android I didn't find any issues like this, and these errors are not found in google)

"react-native": "0.67.4"

I try to use LayoutAnimation, my code looks like this:

constructor(props) {
    super(props)
    this.state = {
        height: Dimensions.get('window').height,
        sliderTopPosition: Dimensions.get('window').height/2-50
    }
    
    if (Platform.OS === 'android') {
        UIManager.setLayoutAnimationEnabledExperimental &&
            UIManager.setLayoutAnimationEnabledExperimental(true);
    }

}

kbShow = (event) => {
    LayoutAnimation.configureNext(LayoutAnimation.create(
        event.duration,
        LayoutAnimation.Types[event.easing] //'keyboard'
    // LayoutAnimation.Types.easeInEaseOut
    ), () => {
        // console.log(finish, 'finish')
    }, () => {
        console.log('KEYBOARD SHOW ANIMATION DID FAIL')
    })
    this.setState({
    height: event.endCoordinates.screenY,
    sliderTopPosition: this.state.sliderTopPosition-event.endCoordinates.height+150,
    })
}

And it works fine on iOS, but if I try to run this code on android I get an error:

Unsupported interpolation type : keyboard

Ok, I replace this strings like this just for test:

//LayoutAnimation.Types[event.easing] //'keyboard'
LayoutAnimation.Types.easeInEaseOut

It still works on ios but not on android

And now error is like this:

Invalid layout animation : {NativeMap: {"type": easeInEaseOut}}

And no matter what type of easing I use it always throw this error

1

There are 1 answers

0
Tim Roberts On

To make it work on Android, you need to supply a property:

LayoutAnimation.configureNext(LayoutAnimation.create(
    event.duration,
    LayoutAnimation.Types[event.easing],
    'opacity'
)

The property can be either 'opacity', 'scaleX', 'scaleY' or 'scaleXY'.

It's a very misleading error message and the type checking should show that the property is required...