Broken DrawerLaytout with useNativeAnimations = true

[Smoovsky]

Description

When the drawer opening animation is playing, if you hit the overlay to close the drawer, the display will stuck as the drawer is opened after the drawer closing animation is finished.

This is reproducible on various Android devices and iPhones (though all only tested with Expo Go).

When this bug occurs, the component's state and subcomponents' prop appear to be correct, i.e. the drawerStyle has correct translateX, but it just won't render correctly.

It could be get around by removing the animation at all:

    // Line:492, react-native-gesture-handler\src\components\DrawerLayout.tsx

    // Animated.spring(this.state.drawerTranslation, {
    //   velocity,
    //   bounciness: 0,
    //   toValue,
    //   useNativeDriver: this.props.useNativeAnimations!,
    //   speed: speed ?? undefined,
    // }).start(({ finished }) => {
    //   if (finished) {
        this.emitStateChanged(IDLE, willShow);
        this.setState({ drawerOpened: willShow });
        if (this.state.drawerState !== DRAGGING) {
          // it's possilbe that user started drag while the drawer
          // was settling, don't override state in this case
          this.setState({ drawerState: IDLE });
        }
        if (willShow) {
          this.props.onDrawerOpen?.();
        } else {
          this.props.onDrawerClose?.();
        }
      // }
    // });

Setting useNativeAnimations={false} when initializing <DrawerLayout /> could also get around with this.

Steps to reproduce

1. create-expo-app with the blank template
2. expo install react-native-gesture-handler
3. App.js:

import { Pressable, Text, View } from 'react-native';
import { useRef } from 'react';
import DrawerLayout from 'react-native-gesture-handler/DrawerLayout';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

handleDrawerSlide = (status) => {
  // outputs a value between 0 and 1
  console.log(status);
};

renderDrawer = () => {
  return (
    <View>
      <Text>I am in the drawer!</Text>
    </View>
  );
};

export default Drawerable = () => {

  const drawer = useRef(null);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <DrawerLayout
          // get around by setting useNativeAnimations={false} (which is true by default)
          // useNativeAnimations={false}
          ref={drawer}
          drawerWidth={200}
          drawerPosition={DrawerLayout.positions.Right}
          drawerType="front"
          drawerBackgroundColor="#ddd"
          renderNavigationView={renderDrawer}
          onDrawerSlide={handleDrawerSlide}>
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Pressable onPress={() => drawer.current?.openDrawer()}>
              <Text>Hello, it's me</Text>
            </Pressable>
          </View>
        </DrawerLayout>
      </View>
    </GestureHandlerRootView>
  );
}

Snack or a link to a repository

https://snack.expo.dev/@smokovsky/drawertest

Gesture Handler version

2.12.0

React Native version

0.72.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

Real device

Device model

No response

Acknowledgements

Yes

[Smoovsky]

Duplicated as #2208