react-native-gesture-handler#DrawerLayout JavaScript Examples

The following examples show how to use react-native-gesture-handler#DrawerLayout. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
FilterDrawer = ({
  children,
}) => {
  const drawerRef = useRef(null);
  const handleOpenDrawer = () => {
    drawerRef.current.openDrawer();
  };

  const childrenWithProps = Children.map(children, (child) => {
    if (isValidElement(child)) {
      return cloneElement(child, { handleOpenDrawer });
    }
    return child;
  });

  return (
    <DrawerLayout
      ref={drawerRef}
      drawerWidth={wp('60%')}
      keyboardDismissMode="on-drag"
      drawerPosition={DrawerLayout.positions.Left}
      drawerType="front"
      drawerBackgroundColor="white"
      renderNavigationView={() => <RecordTypeFilters />}
      edgeWidth={-wp('100%')}
    >
      <View style={styles.childrenContainer}>
        {childrenWithProps}
      </View>
    </DrawerLayout>
  );
}
Example #2
Source File: Page.js    From Legacy with Mozilla Public License 2.0 5 votes vote down vote up 
export default function UserActivityScreen() {
  var theme = useSelector(i => i.themes[i.theme]);
  var [size, onLayout] = useComponentSize();
  var [open, setOpen] = React.useState(false);
  var [filters, setFilters] = React.useState({
    activity: new Set(),
    state: new Set(),
    category: new Set()
  });
  var drawerRef = React.useRef();
  function toggleDrawer() {
    console.log('toggle', open)
    if (!open) {
      drawerRef.current?.openDrawer()
    } else {
      drawerRef.current?.closeDrawer()
    }
  }
  return <View style={{ flex: 1, height: "100%" }} onLayout={onLayout}>
    {size?.width > 750 ? <View style={{ flexDirection: "row", flex: 1 }}>
      <View style={{ flex: 1 }}>
        <UserActivityPage filters={filters} />
      </View>
      <View style={{ width: 250, backgroundColor: theme.page_content.bg }}>
        <Sidebar filters={filters} onFiltersChange={setFilters} />
      </View>
    </View> : <DrawerLayout
      drawerLockMode={(Platform.OS === "web" && !open) ? "locked-closed" : "unlocked"}
      ref={drawerRef}
      drawerWidth={250}
      drawerPosition={DrawerLayout.positions.Right}
      drawerType='front'
      drawerBackgroundColor={theme.page_content.bg}
      onDrawerOpen={() => setOpen(true)}
      onDrawerClose={() => setOpen(false)}
      renderNavigationView={() => <Sidebar filters={filters} onFiltersChange={setFilters} />}>
        <UserActivityPage filters={filters} toggleDrawer={toggleDrawer} />
      </DrawerLayout>}
  </View>
}