I am making an android app using react native.
I created a drawer on the main page via DrawerLayoutAndroid and applied it to ref={} using useRef .
I made it possible to open the drawer with ref.current.openDrawer(); on certain buttons.
It works fine when running the app for the first time, but when you return to the main page after moving the screen using the stack navigation and press the button, it doesn't work well.
The screen just darkens and the drawer doesn't appear.
Works with the swipe gesture still works fine.
Are any of you experiencing the same problem as me?
To simplify my code, it looks like this:
const Main = ({navigation}) => {
const drawer = useRef(null);
return(
<DrawerLayoutAndroid
ref={drawer}
drawerWidth={300}
drawerPosition={'left'}
renderNavigationView={() => <MainDrawer />}
>
<TouchableOpacity onPress={() => drawer.current.openDrawer()} />
</DrawerLayoutAndroid>
);
}
Version information is as follows.
{
"name": "App",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@babel/plugin-syntax-flow": "^7.18.6",
"@bam.tech/react-native-make": "^3.0.3",
"@flarelane/react-native-sdk": "^1.0.11",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-native-fontawesome": "^0.2.7",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/cameraroll": "^4.1.2",
"@react-native-community/checkbox": "^0.5.12",
"@react-native-community/geolocation": "^2.1.0",
"@react-native-community/netinfo": "^9.3.0",
"@react-native-community/slider": "^4.2.4",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"dependencies": "^0.0.1",
"fbjs": "^3.0.4",
"iamport-react-native": "^2.0.1",
"install": "^0.13.0",
"peer": "^0.6.1",
"prop-types": "^15.8.1",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera.git",
"react-native-chart-kit": "^6.12.0",
"react-native-config": "^1.4.6",
"react-native-dotenv": "^3.3.1",
"react-native-fade-in-out": "^1.0.6",
"react-native-modal": "^13.0.1",
"react-native-paper": "^4.12.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1",
"react-native-send-intent": "^1.3.0",
"react-native-share": "^7.6.6",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^12.3.0",
"react-native-swipe-gestures": "^1.0.5",
"react-native-view-shot": "^3.3.0",
"react-native-webview": "^11.22.3",
"recoil": "^0.7.3",
"resolve-url": "^0.2.1",
"source-map-resolve": "^0.6.0",
"uglify-es": "^3.3.9",
"uuid": "^8.3.2"
},
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/runtime": "^7.17.9",
"@react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^28.1.0",
"escape-string-regexp": "^5.0.0",
"eslint": "^8.15.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"jest": "^28.1.0",
"metro-react-native-babel-preset": "^0.70.3",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}