Skip to content

Instantly share code, notes, and snippets.

@dliff
Created July 4, 2019 00:25
Show Gist options
  • Save dliff/159a3f6350e6865665892ade36376417 to your computer and use it in GitHub Desktop.
Save dliff/159a3f6350e6865665892ade36376417 to your computer and use it in GitHub Desktop.
Setting React Navigation (React Native) drawerLockMode to `locked-closed` only when drawer is closed. (Don't allow open gesture, only close gesture).
Add Redux action setDrawerOpen to set a boolean Redux variable (drawerOpen).
In your contentComponent update the Redux store when drawer open/close is detected:
componentDidUpdate(prevProps) {
if (
prevProps.navigation.state.isDrawerOpen !=
this.props.navigation.state.isDrawerOpen
) {
this.props.setDrawerOpen(this.props.navigation.state.isDrawerOpen);
}
}
}
Wrap the "Screen" component with this HoC which sets navigationOptions for drawerLockMode to a navigation param and updates when the Redux store updates:
import React, { Component } from "react";
import { connect } from "react-redux";
export default function withDrawer(Wrapped) {
class Wrap extends Component {
constructor(props) {
super(props);
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.drawerOpen != this.props.drawerOpen) {
this.props.navigation.setParams({
isOpen: this.props.drawerOpen
});
}
}
static navigationOptions = ({ navigation }) => {
let drawerLocked = true;
if (navigation.state.params && navigation.state.params.isOpen) {
drawerLocked = false;
}
return {
drawerLockMode: drawerLocked ? "locked-closed" : ""
};
};
render() {
return <Wrapped {...this.props} />;
}
}
const mapStateToProps = state => {
return { drawerOpen: state.drawerOpen };
};
const mapDispatchToProps = {};
return connect(
mapStateToProps,
mapDispatchToProps
)(Wrap);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment