How to call a function from another JS file in React Native?
So I have Drawer.Js using a react-native-off-canvas menu where the only purpose is to open and close the drawer. The problem is that this drawer will only open and close with a 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 the handleClick function 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 successful
*//After the Render Method
export function a() {
return this.handleClick();
}
I am also using react native router thread which my apps first route will be in Home.js where in Home.js I am going to put a button to start the drawer to open.
Here's my code for Home.js * // Some imports
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 on the button I got and an error like 'undefined is not a function (evaluting' this.handleClick ')'.
Well I guess I know the problem where my export function is probably the problem. Anyone have any idea how I can fix this? i read the tutorial and i can't figure out why it is so hard to call a function inside other Js files in my project
source to share
No one has answered this question yet
Check out similar questions: