Question 190766 in React native Question posted in
The official React Native documentation can be found here.

React Native – Resize Drawer with Drag Handle

In React Native, is there any way to resize a Drawer with a resize handle by dragging the edge of the Drawer. For example, like in the Slack screenshot here. This is a very common use case but see no implementation of it anywhere online.

Slack Example Screenshot

I think it’s possible with Pan Gestures but don’t see a way to get a divider between the Drawer and Screen View.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks SugarFreeBeef, based on that I made a slight modification so it works by dragging a handle on the edge. Here is a working example

    import {Animated, PanResponder, StyleSheet, Text, View} from "react-native";
import React, {useState} from "react";
import {PanGestureHandler} from "react-native-gesture-handler";

export default function Page(state) {

  const [drawerWidth, setdrawerWidth] = useState(200)

  const panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderMove: (_, { dx }) => {
      const newDrawerWidth = drawerWidth + dx;
      setdrawerWidth(newDrawerWidth);
    },
  });

  return (
      <View style={styles.container}>
        <View style={[ styles.drawer, { width: drawerWidth } ]}>
          <Text>Content of the resizable drawer</Text>
        </View>
        <PanGestureHandler>
          <Animated.View style={[ styles.drawerHandle ]} {...panResponder.panHandlers}>
          </Animated.View>
        </PanGestureHandler>
        <View style={styles.screen}>
          <Text>Content of Screen</Text>
        </View>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  drawer: {
    backgroundColor: '#F2F2F2',
    borderRightWidth: 1,
    borderRightColor: '#CCCCCC',
    zIndex: 1
  },
  drawerHandle: {
    height: 50,
    width: 10,
    marginTop: 100,
    marginLeft: -5,
    backgroundColor: '#000',
    borderRightWidth: 1,
    borderRightColor: '#000',
    zIndex: 2
  },
  screen: {
    flex: 1,
  },
});

  2. 0

    To achieve a resizable drawer with a resize handle in React Native, you can utilize the PanResponder API to handle the pan gestures and update the width of the drawer dynamically. Here’s a general approach to implementing this feature:

    1. Set up the initial state:
    state = {
  drawerWidth: INITIAL_DRAWER_WIDTH,
};
    1. Create a pan responder to handle the gestures:
    panResponder = PanResponder.create({
  onMoveShouldSetPanResponder: () => true,
  onPanResponderMove: (_, { dx }) => {
    const newDrawerWidth = this.state.drawerWidth - dx;
    // You can add additional checks here to ensure the drawer width stays within desired limits

    this.setState({ drawerWidth: newDrawerWidth });
  },
});
    1. Render the components with the resizable drawer:
    render() {
  return (
    <View style={styles.container}>
      <View
        style={[
          styles.drawer,
          { width: this.state.drawerWidth },
        ]}
        {...this.panResponder.panHandlers}
      >
        {/* Content of the resizable drawer */}
      </View>
      <View style={styles.screen}>
        {/* Content of the screen view */}
      </View>
    </View>
  );
}
    1. Style the components:
    const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  drawer: {
    backgroundColor: '#F2F2F2',
    borderRightWidth: 1,
    borderRightColor: '#CCCCCC',
  },
  screen: {
    flex: 1,
  },
});

    In the above code, INITIAL_DRAWER_WIDTH represents the initial width of the drawer, and you can customize it to suit your requirements. The onPanResponderMove function is responsible for updating the drawer width based on the horizontal movement during the pan gesture.

    By attaching the pan responder to the resizable drawer view and updating its width dynamically, you can achieve the desired resizable behavior with a resize handle in React Native.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search