Created
July 4, 2019 00:25
-
-
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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