Can touch out side a View Component be detected in react native?

Question

My React native application screen has View component with few text inputs. How can touch be detected on screen outside that View? Please help.

Thanks

Soupspoon

What do you mean by 'outside' of the View? Is your View the root component or is it nested in another? More importantly, what are you trying to achieve? – Theressa

The view is a nested view. I want a show hide functionality of a view which has few text inputs. It's like ..when it is loaded it looks like a single input text but as u click on that it expands to become a form having multiple text inputs and when u click on any part outside that view the form collapse. I hope i elaborated it better now – Soupspoon

Answer 1

As Andrew said: You can wrap your View with TouchableWithoutFeedback and adding a onPress you can detect when the view is tapped.

Another way to achieve that is having responses for touch events from the view.

 /* Methods that handled the events */
handlePressIn(event) {
  // Do stuff when the view is touched
}

handlePressOut(event) {
    // Do stuff when the the touch event is finished
}

...

    <View
      onStartShouldSetResponder={(evt) => true}
      onMoveShouldSetResponder={(evt) => true}
      onResponderGrant={this.handlePressIn}
      onResponderMove={this.handlePressIn}
      onResponderRelease={this.handlePressOut}
    >
         ...
    </View>

The difference between Grant and move is that Grant is just when the user press, and Move is when the user is pressing and moving the position of the press

Absa

It's not working for me, when I do inside a scrollview – Hyson

Answer 2

I don't take no for an answer, so I dug up a lot to find a solution matching my needs.

• In my situation I have multiple components which need to collapse when I open another one.
• This behavior has to be automatic, and easy to code-in by any contributor.
• Passing parent refs to the children or calling a special global method are not acceptable solutions in my circumstances.
• Using a transparent background to catch all clicks will not cut it.

This Question perfectly illustrates the need.

Demo

Here is the final result. Clicking anywhere except the component itself will collapse it.

WARNING The solution includes usage of private React components properties. I know the inherent risks of using such an approach and I'm happy to use them as long as my app does what I expect and all other constraints are satisfied. Short disclaimer, probably a smarter, cleaner solution exists out there. This is the best I could do with my own limited knowledge of React.

First we need to capture all click in the UI, both for Web and Native. It seems that this is not easily done. Nested TouchableOpacityseem to allow only one responder at a time. So I had to improvise a bit here.

app.tsx (trimmed down to essentials)

import * as div from './app.style';
import { screenClicked, screenTouched } from './shared/services/self-close-signal.service';
// ... other imports

class App extends React.Component<Props, State> {

    public render() {

        return (
            <div.AppSafeArea 
                onTouchStart={e => screenTouched(e)}
                onClick={e => screenClicked(e)}>

                {/* App Routes */}
                <>{appRoutes(loginResponse)}</>

            </div.AppSafeArea>
        );
    }
}

self-close-signal.service.ts This service was built to detect all clicks on the app screen. I use reactive programming in the entire app so rxjs was employed here. Feel free to use simpler methods if you want. The critical part here is detecting if the clicked element is part of the hierarchy of an expanded component or not. When I write a mess like this I usually fully document why this was built this way in order to protect it from "eager" developers doing cleanups.

import { AncestorNodeTrace, DebugOwner, SelfCloseEvent } from '../interfaces/self-close';
import { GestureResponderEvent } from 'react-native';
import { Subject } from 'rxjs';

/**
 * <!> Problem:
 * Consider the following scenario:
 * We have a dropdown opened and we want to open the second one. What should happen?
 * The first dropdown should close when detecting click outside.
 * Detecting clicks outside is not a trivial task in React Native.
 * The react events system does not allow adding event listeners.
 * Even worse adding event listener is not available in react native.
 * Further more, TouchableOpacity swallows events.
 * This means that a child TouchableOpacity inside a parent TouchableOpacity will consume the event.
 * Event bubbling will be stopped at the responder.
 * This means simply adding a backdrop as TouchableOpacity for the entire app won't work.
 * Any other TouchableOpacity nested inside will swallow the event.
 *
 * <!> Further reading:
 * https://levelup.gitconnected.com/how-exactly-does-react-handles-events-71e8b5e359f2
 * https://mcmap.net/q/537395/-touchableopacity-swallow-touch-event-and-never-pass
 *
 * <!> Solution:
 * Touch events can be captured in the main view on mobile.
 * Clicks can be captured in the main view on web.
 * We combine these two data streams in one single pipeline.
 * All self closeable components subscribe to this data stream.
 * When a click is detected each component checks if it was triggered by it's own children.
 * If not, it self closes.
 *
 * A simpler solution (with significant drawbacks) would be:
 * https://www.jaygould.co.uk/2019-05-09-detecting-tap-outside-element-react-native/
 */

/** Combines both screen touches on mobile and clicks on web. */
export const selfCloseEvents$ = new Subject<SelfCloseEvent>();

export const screenTouched = (e: GestureResponderEvent) => {
    selfCloseEvents$.next(e);
};

export const screenClicked = (e: React.MouseEvent) => {
    selfCloseEvents$.next(e);
};

/**
 * If the current host component ancestors set contains the clicked element,
 * the click is inside of the currently verified component.
 */
export const detectClickIsOutside = (event: SelfCloseEvent, host: React.Component): boolean => {
    let hostTrace = getNodeSummary((host as any)._reactInternalFiber);
    let ancestorsTrace = traceNodeAncestors(event);
    let ancestorsTraceIds = ancestorsTrace.map(trace => trace.id);

    let clickIsOutside: boolean = !ancestorsTraceIds.includes(hostTrace.id);
    return clickIsOutside;
};

// ====== PRIVATE ======

/**
 * Tracing the ancestors of a component is VITAL to understand
 * if the click originates from within the component.
 */
const traceNodeAncestors = (event: SelfCloseEvent): AncestorNodeTrace[] => {
    let ancestorNodes: AncestorNodeTrace[] = [];
    let targetNode: DebugOwner = (event as any)._targetInst; // <!WARNING> Private props

    // Failsafe
    if (!targetNode) { return; }

    traceAncestor(targetNode);

    function traceAncestor(node: DebugOwner) {
        node && ancestorNodes.push(getNodeSummary(node));
        let parent = node._debugOwner;
        parent && traceAncestor(parent);
    }

    return ancestorNodes;
};

const getNodeSummary = (node: DebugOwner): AncestorNodeTrace => {
    let trace: AncestorNodeTrace = {
        id: node._debugID,
        type: node.type && node.type.name,
        file: node._debugSource && node._debugSource.fileName,
    };

    return trace;
};

interfaces/self-close.ts - Some boring typescript interfaces to help with project maintenance.

import { NativeSyntheticEvent } from 'react-native';

/** Self Close events are all the taps or clicks anywhere in the UI. */
export type SelfCloseEvent = React.SyntheticEvent | NativeSyntheticEvent<any>;

/**
 * Interface representing some of the internal information used by React.
 * All these fields are private, and they should never be touched or read.
 * Unfortunately, there is no public way to trace parents of a component.
 * Most developers will advise against this pattern and for good reason.
 * Our current exception is an extremely rare exception.
 *
 * <!> WARNING
 * This is internal information used by React.
 * It might be possible that React changes implementation without warning.
 */
export interface DebugOwner {
    /** Debug ids are used to uniquely identify React components in the components tree */
    _debugID: number;
    type: {
        /** Component class name */
        name: string;
    };
    _debugSource: {
        /** Source code file from where the class originates */
        fileName: string;
    };
    _debugOwner: DebugOwner;
}

/**
 * Debug information used to trace the ancestors of a component.
 * This information is VITAL to detect click outside of component.
 * Without this script it would be impossible to self close menus.
 * Alternative "clean" solutions require polluting ALL components with additional custom triggers.
 * Luckily the same information is available in both React Web and React Native.
 */
export interface AncestorNodeTrace {
    id: number;
    type: string;
    file: string;
}

And now the interesting part. dots-menu.tsx - Trimmed down to the essentials for the example

import * as div from './dots-menu.style';
import { detectClickIsOutside, selfCloseEvents$ } from '../../services/self-close-signal.service';
import { Subject } from 'rxjs';
// ... other imports

export class DotsMenu extends React.Component<Props, State> {

    private destroyed$ = new Subject<void>();

    constructor(props: Props) {
        // ...
    }

    public render() {
        const { isExpanded } = this.state;

        return (
            <div.DotsMenu ...['more props here'] >

                {/* Trigger */}
                <DotsMenuItem expandMenu={() => this.toggleMenu()} ...['more props here'] />

                {/* Items */}
                {
                    isExpanded &&
                    // ... expanded option here
                }

            </div.DotsMenu>
        );
    }

    public componentDidMount() {
        this.subscribeToSelfClose();
    }

    public componentWillUnmount() {
        this.destroyed$.next();
    }

    private subscribeToSelfClose() {
        selfCloseEvents$.pipe(
            takeUntil(this.destroyed$),
            filter(() => this.state.isExpanded)
        )
            .subscribe(event => {
                let clickOutside = detectClickIsOutside(event, this);

                if (clickOutside) {
                    this.toggleMenu();
                }
            });
    }

    private toggleMenu() {
        // Toggle visibility and animation logic goes here
    }

}

Hope it works for you as well. P.S. I'm the owner, feel free to use these code samples. Hope you will enjoy this answer and check Visual School for future React Native tutorials.

Shemeka

Hi Adrian. Could you, please, tell me what the dropdown did you use in this demo? – Arsenical

Hi Adrian, this is looking good! This said, does it work with nested TouchableOpacity? It seems that they would swallow the event? – Turki

@Arsenical The dropdown is a custom build from my project. – Shemeka

@Turki I don't recall. It's been a while since I worked on this issue. – Shemeka

Looking back, I'd say it's a contrieved workaround that I would not use once again given how complex it is to debug by a new dev in the project. Though I'm not sure what would be a better solution to solve this exact issue. – Shemeka

Sry to bother, but supposedly you had Touchables within your dropdown, so I would assume that it worked, at least on web. Maybe the Touchables needed to explicitly bubble the event, though. Not sure React Native behaves the same way as web for this. I'll try to implement this without rxjs, too. – Turki

Answer 3

Put your View inside of TouchableWithoutFeedback, expand TouchableWithoutFeedback fullscreen and add onPress handler to it.

<TouchableWithoutFeedback 
  onPress={ /*handle tap outside of view*/ }
  style={ /* fullscreen styles */}
>
    <View>
     ...
    </View
</TouchableWithoutFeedback>

Kayak

Answer 4

you can use

   <View>
       <TouchableWithoutFeedback
           onPress={()=>{
                 //do something
             }}
        style={{position:'absolute',top:0 , right:0 , bottom:0 ,left:0}}/>
       <YourComp></YourComp>
    </View>

Zacheryzack

Answer 5

You could try to use a Modal to create this behavior.

When you click the input field you show the Modal containing the multiple texts inputs. If you click outside the Modal it hides.

Serrate

Answer 6

An easier solution, as stated here, is to detect the start of a touch action outside of the menu and close the menu in this case.

Keep in mind that for this to work, the first View that will catch the touch should take the full screen height, and that the app content as well as the menu should be inside. This allow the touch event to cascade correctly.

eg:

    const [isOverflowMenuDisplayed, setOverflowMenuDisplayed] = useState(false)
    const [childrenIds, setChildrenIds] = useState([])

    const handleTouchShouldSetResponder = (event) => {
        // To be able to close the overflow menu, the content of the screen need to be inside this top view, and detect if the pressed view if the menu item or the app content
        if (childrenIds.length) {
            if (childrenIds.includes(event.target)) {
                return true
            }
            setOverflowMenuDisplayed(false)
            return false
        }
        return false
    }
    

     
     return  <View
                onStartShouldSetResponder={handleTouchShouldSetResponder}
                onMoveShouldSetResponder={handleTouchShouldSetResponder}>
                <AppBar title={title} onLeftIconPress={onLeftIconPress} isCloseLeftIcon={isCloseLeftIcon}>
                    {actions}
                    {overflowAction && <AppBarActionOverflow onOpen={() => setOverflowMenuDisplayed(true)} />}
                </AppBar>

                <AppBarOverflowMenu
                    overflowAction={overflowAction}
                    isOpen={isOverflowMenuDisplayed}
                    childrenIds={childrenIds}
                    setChildrenIds={setChildrenIds}
                    onPress={() => setOverflowMenuDisplayed(false)}
                />

                {children}
            </View>

And the Overflow menu:

export const AppBarOverflowMenu = ({ isOpen, setChildrenIds, childrenIds, onPress, overflowAction }) => {
    if (!isOpen) {
        return null
    }

    return (
        <View
            style={thisStyles.menuContainer}
            ref={(component) => {
                if (component) {
                    const ids = component._children[0]._children.map((el) => el._nativeTag)
                    if (ids.length > 0 && (childrenIds.length !== ids.length || !childrenIds.includes(ids[0]))) {
                        setChildrenIds(ids)
                    }
                }
            }}>
            <View style={thisStyles.menu}>
                {React.cloneElement(overflowAction, {
                    onPress: () => {
                        onPress(false)
                        overflowAction.props.onPress()
                    },
                })}
            </View>
        </View>
    )
}

Prokopyevsk