0

I am trying to add EventListner to document object but getting error as cant find variable document . Below is my code

import * as React from 'react';
import { Easing, Text, View, StyleSheet , Button , TextInput , TouchableOpacity , TouchableWithoutFeedback, Animated} from 'react-native';
import DateTimePicker from "react-native-modal-datetime-picker";
import { Platform, StatusBar} from 'react-native';
import ReactDOM from 'react-dom';
// You can import from local files

// or any pure javascript modules available in npm

export default class App extends React.Component {

  state = {
    menuwidth: new  Animated.Value(0)
  }

  showmenu = () => {
    Animated.timing(this.state.menuwidth,{
      toValue: 1,
      duration: 550,
      easing: Easing.linear
    }).start();
  }

  hidemenu = () => {

  }


  componentWillMount() {
    document.addEventListner('click',this.clickoutside,false)
  }

  componentWillUnMount(){
    document.removeEventListner('click',this.clickoutside,false)
  }

  render() {

    const menuwidth_interpole = this.state.menuwidth.interpolate({
      inputRange: [0,1],
      outputRange: ['-50%','0%']
    })

am i missing something ? . i am using this tutorial https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-with-react-hook-ba77c37c7e82 to resolve click outside component issue.

Sanjay Salunkhe
  • 2,665
  • 5
  • 28
  • 52
  • 1) You spelled "Listener" wrong. It should be addEventListener and removeEventListener. 2) I think you need to use window.addEventListener instead of document. Check out https://stackoverflow.com/questions/32896624/react-js-best-practice-regarding-listening-to-window-events-from-components – SteveB Oct 12 '19 at 15:58
  • Is document valid in React Native? – Thakur Karthik Oct 12 '19 at 16:04
  • You cannot use `document` in React Native, you can create a backdrop behind the menu then on press backdrop you can hide it. – fayeed Oct 12 '19 at 18:07

0 Answers0