So i have a Drawer.Js using 'react-native-off-canvas-menu' where the sole purpose is to open and close the drawer. The problem is that this drawer will only open and close with gesture (slide left/right). I want to bind this open and close function with a button. The problem is it shows an error when i try to call function handleClick from Home.Js to my Drawer.Js
Inside my Drawer.Js
class FirstScreen extends Component {
constructor(props) {
super(props);
this.state = {
menuOpen: false
};
this.handleClick = this.handleMenu.bind(this);
}
handleMenu() {
const { menuOpen } = this.state;
this.setState({
menuOpen: !menuOpen
});
}
// Some Render Method Where i tried to create a button, and calling
this.handleMenu() on the onPress event, and it's successful
*//After the Render Method
export function a() {
return this.handleClick();
}
I am also using react native router flux which the first route of my apps is going to Home.js, where in Home.js i am going to put a button to trigger the drawer to open.
Here's my code for Home.js *//Some Import
import { a } from './Drawer';
class Home extends Component {
constructor(props) {
super(props);
this.handleKlik = this.handleKlik.bind(this);
}
handleKlik() {
a();
}
*// Render Method Start
<View>
<TouchableOpacity onPress={() => this.handleKlik()}>
<View style={styles.btnContainer}>
<Text style={styles.btnText}>{'Toggle'.toUpperCase()}
</Text>
</View>
</TouchableOpacity>
<View>
Well here in Home.js, when i tried to click the button, i received and error like 'undefined is not a function (evaluting 'this.handleClick')'.
Well i think i know the problem where my export function is probably the problem. Can anyone please elaborate on how can i fix this? i've read the tutorial and i can't seem to understand why it's so hard to call a function inside another Js Files in my project