Skip to content

Commit

Permalink
Fix Reanimated crashes in ReanimatedDrawerLayout (#3391)
Browse files Browse the repository at this point in the history
## Description

Direct references of react JS-only functions and classes lead to
reanimated crashes.
Converted those direct references into indirect calls, this fixes the
crashes.

Fixes
#3386

## Test plan

- use the `Reanimated Drawer Layout` example app to see how the props
are now used without crashing the app.
  • Loading branch information
latekvo authored Feb 12, 2025
1 parent 1d0cd2d commit 30e60e6
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 4 deletions.
3 changes: 2 additions & 1 deletion example/src/release_tests/reanimatedDrawerLayout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ export default function ReanimatedDrawerExample() {
renderNavigationView={() => <DrawerPage />}
drawerPosition={side}
drawerType={type}
drawerLockMode={lock}>
drawerLockMode={lock}
hideStatusBar={true}>
<View style={styles.innerContainer}>
<GestureDetector gesture={tapGesture}>
<View style={styles.box}>
Expand Down
10 changes: 7 additions & 3 deletions src/components/ReanimatedDrawerLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,10 @@ const defaultProps = {
statusBarAnimation: 'slide' as StatusBarAnimation,
};

// StatusBar.setHidden and Keyboard.dismiss cannot be directly referenced in worklets.
const setStatusBarHidden = StatusBar.setHidden;
const dismissKeyboard = Keyboard.dismiss;

const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
function DrawerLayout(props: DrawerLayoutProps, ref) {
const [containerWidth, setContainerWidth] = useState(0);
Expand Down Expand Up @@ -366,7 +370,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
runOnJS(setDrawerState)(DrawerState.SETTLING);

if (hideStatusBar) {
runOnJS(StatusBar.setHidden)(willShow, statusBarAnimation);
runOnJS(setStatusBarHidden)(willShow, statusBarAnimation);
}

const normalizedToValue = interpolate(
Expand Down Expand Up @@ -529,10 +533,10 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
emitStateChanged(DrawerState.DRAGGING, false);
runOnJS(setDrawerState)(DrawerState.DRAGGING);
if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
runOnJS(Keyboard.dismiss)();
runOnJS(dismissKeyboard)();
}
if (hideStatusBar) {
runOnJS(StatusBar.setHidden)(true, statusBarAnimation);
runOnJS(setStatusBarHidden)(true, statusBarAnimation);
}
})
.onUpdate((event) => {
Expand Down

0 comments on commit 30e60e6

Please sign in to comment.