I am trying to capture all click events outside of my SearchBar ponent so that I can then tell the dropdown menu to close when one clicks out of it. I looked up examples of how to do this online and I need to use the global variable 'document' in javascript. However, it seems react native does not support this. Does anyone know a work around to use the 'document' variable or a react native equivalent?

class Products extends Component {

    constructor(props) {
        super(props);

        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    }

    setWrapperRef(node) {
        this.wrapperRef = node;
    }

    handleClickOutside(event) {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
          alert('You clicked outside of me!');
        }
    }

    ponentWillMount() {
        this.props.dispatch(getProductList());
    }

    ponentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    ponentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    render() {
        const {isLoading, products} = this.props.products;

        if (isLoading) {
            return <Loader isVisible={true}/>;
        }

        return (
            <View ref={this.setWrapperRef} style={styles.wrapper}>
                <Header/>
                <View style={styles.bodyWrapper}>
                    <ScrollView style={styles.scrollView}>
                        <ProductsContainer data={{productsList: { results: products }}}/>
                    </ScrollView>
                    <SearchBar style={styles.searchBar}/>
                </View>
                <Footer/>
            </View>
        );
    }
}

function mapStateToProps(state) {
    const {products} = state;
    return {
        products
    };
}

export default connect(mapStateToProps)(Products);

I am trying to capture all click events outside of my SearchBar ponent so that I can then tell the dropdown menu to close when one clicks out of it. I looked up examples of how to do this online and I need to use the global variable 'document' in javascript. However, it seems react native does not support this. Does anyone know a work around to use the 'document' variable or a react native equivalent?

class Products extends Component {

    constructor(props) {
        super(props);

        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    }

    setWrapperRef(node) {
        this.wrapperRef = node;
    }

    handleClickOutside(event) {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
          alert('You clicked outside of me!');
        }
    }

    ponentWillMount() {
        this.props.dispatch(getProductList());
    }

    ponentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    ponentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    render() {
        const {isLoading, products} = this.props.products;

        if (isLoading) {
            return <Loader isVisible={true}/>;
        }

        return (
            <View ref={this.setWrapperRef} style={styles.wrapper}>
                <Header/>
                <View style={styles.bodyWrapper}>
                    <ScrollView style={styles.scrollView}>
                        <ProductsContainer data={{productsList: { results: products }}}/>
                    </ScrollView>
                    <SearchBar style={styles.searchBar}/>
                </View>
                <Footer/>
            </View>
        );
    }
}

function mapStateToProps(state) {
    const {products} = state;
    return {
        products
    };
}

export default connect(mapStateToProps)(Products);

• javascript
• reactjs
• react-native

• I don't know react, but can you access the window variable? If so you can do window.document. – Mark Baijens Commented Apr 18, 2018 at 12:14
• I just tried it and I get an error for window too. – FairyQueen Commented Apr 18, 2018 at 12:15
• 1 There's already an answer down there, but to elaborate a little on why you are seeing this... window and document are part of the web standard, not JavaScript (ECMA standard) itself. document is part of the DOM standard. React Native, although indeed runs on JavaScript for controlling the render, does not have a standards-pliant DOM implementation. So many (if not most) web-based (or DOM-based) React examples are not applicable to React Native, especially those doing DOM-manipulation. – John Weisz Commented Apr 18, 2018 at 14:13

1 Answer 1

You can't use document, it's an object on the window. The above answer is incorrect and hasn't taken into account this platform is React Native (answer has since been removed).

To handle click events, you you need to wrap everything in a TouchableWithoutFeedback.

<TouchableWithoutFeedback
  onPress={this.hideSearchBar}
/>

I would add a zIndex style to the TouchableWithoutFeedback and one in styles.scrollView. Make sure the zIndex inside of styles.scrollView is more than the one you added to the TouchableWithoutFeedback.