Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create ReanimatedDrawerLayout component #3146

Merged
merged 98 commits into from
Nov 8, 2024

Conversation

latekvo
Copy link
Contributor

@latekvo latekvo commented Oct 9, 2024

Description

This PR adds ReanimatedDrawerLayout component.

Test plan

  • use the newly added Reanimated Drawer Layout example to see how the drawer layout functions
  • use the provided sample code to test how the legacy one used to work
Collapsed code - legacy component preview
import React, { useRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  DrawerLayout,
} from 'react-native-gesture-handler';
import { SharedValue } from 'react-native-reanimated';

const DrawerPage = ({ progress }: { progress?: SharedValue }) => {
  progress && console.log('Drawer opening progress:', progress);
  return <View style={styles.drawerContainer} />;
};

export default function ReanimatedDrawerExample() {
  const drawerRef = useRef<any>(null);

  const tapGesture = Gesture.Tap()
    .runOnJS(true)
    .onStart(() => drawerRef.current?.openDrawer());

  return (
    <DrawerLayout ref={drawerRef} renderNavigationView={() => <DrawerPage />}>
      <GestureDetector gesture={tapGesture}>
        <View style={styles.innerContainer}>
          <Text>Open drawer</Text>
        </View>
      </GestureDetector>
    </DrawerLayout>
  );
}

const styles = StyleSheet.create({
  drawerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
  },
  innerContainer: {
    margin: 'auto',
    padding: 35,
    paddingHorizontal: 25,
    backgroundColor: 'pink',
  },
});

latekvo added 30 commits October 9, 2024 14:37
…shared values into shared values, reduce amount of shared values used
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedDrawerLayout.tsx Outdated Show resolved Hide resolved
Copy link
Member

@j-piasecki j-piasecki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Please wait for GH actions before merging.

Copy link
Contributor

@m-bert m-bert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things that I've noticed:

  1. Drawer sometimes flickers (i.e. closes and immediately opens). Unfortunately I'm not exactly sure how to reproduce it.
  2. In the provided example, when drawer is opened on web it is possible to click buttons in background. It doesn't work like this on android and iOS

but I think we don't have to worry about it in this PR as it is already quite large 😅

@latekvo latekvo requested a review from m-bert November 8, 2024 15:08
@latekvo latekvo merged commit 18969fd into main Nov 8, 2024
3 checks passed
@latekvo latekvo deleted the @latekvo/reanimate-drawer-component branch November 8, 2024 15:50
latekvo added a commit that referenced this pull request Nov 18, 2024
## Description

This PR adds documentation page for the new `ReanimatedDrawerLayout`
component.

wait for
#3146

## Test plan

- open the documentation page for `ReanimatedDrawerLayout`
latekvo added a commit that referenced this pull request Nov 27, 2024
## Description

Bump prettier version to 3.3.3.
Required for
[this](#3146 (comment))
issue to be resolved.

## Test plan

- confirm all CIs are passing
- confirm none of the examples are crashing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants