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
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
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://stackoverflow.com/questions/40572499/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.
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>
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.
you can use
<View>
<TouchableWithoutFeedback
onPress={()=>{
//do something
}}
style={{position:'absolute',top:0 , right:0 , bottom:0 ,left:0}}/>
<YourComp></YourComp>
</View>
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>
)
}
Related
What I am basically trying to create is a navbar that has two completely different html hierarchy based on the window size. I want it to be different for mobile than for a desktop version. eg a nav bar that is on the right on desktop and one that is on the top for mobile.
A simply state of what was doing. I created a const that would use a state of the screen size. I had used the useState() to get a default for now but I know that if I was first loading on desktop and it it was defaulted to mobile. I would have to resize first to get the desktop version instead.
const [sizeState, setSizeState] = useState("mobile");
const changeNavbar = () => {
if (window.innerWidth <= 900) {
setSizeState("mobile");
} else {
setSizeState("desktop");
}
};
window.addEventListener('resize', changeNavbar);
the sizeState would then call an if function determin what state it curently is set to.
if (sizeState === "mobile") {
return ( //some code for mobile) }
else {
// return some code for desktop
}
for now it always returns the mobile version even if loading upon a innderwidth that is above 900 abd only on resize it would do something.
I have been trying to use a onload stuff and an eventlistener that would listen to load. but i cant manage to call the changeNavbar function on the first load of the page.
I saw people recomending usein useMediaQuerry but i dont know how to get it to work based on my if (mediaquery is set to md) { return( mobile navbar) }
if someone could help me use the useMediaQuerry in this instead of my previous attempt, so that i can have two seperated returns i would also be soooooo thankful for the help!
You can simply implement it using styled-components and styled-breakpoints packages and its hooks API.
Here is an example: https://codesandbox.io/s/styled-breakpoints-n8csvf
import { down } from "styled-breakpoints";
import { useBreakpoint } from "styled-breakpoints/react-styled";
export default function App() {
const isMobile = useBreakpoint(down("sm"));
return (
<div className="App">
{isMobile ? "Mobile View" : "Desktop View"}
</div>
);
}
Or you can create custom hooks like this: https://github.com/jasonjin220/use-window-size-v2
import useWindowSize from "use-window-size-v2";
export default function App() {
const { width, height } = useWindowSize();
return (
<div className="box">
<h1>useWindowSize Hook</h1>
<p>
height: {height}
<br />
width: {width}
</p>
</div>
);
}
I am developing an UI framework based on antd (I call it Yooooo UI)
The design is a little different with the default style of antd and I did something to set the different color, size, margin and blablabla with setting less variables - follow the official solution.
Also, there is something new, such as I extend the type of Buttons - add 'atype', 'btype', 'ctype' to Button Component. That means I can use it like
import { Button } from 'yooooo-ui';
<Button type="atype" />
The solution for supporting this is here below
import { ButtonType } from 'antd/lib/button';
import { BaseButtonProps } from 'antd/lib/button/button';
const ExtendedButtonTypes = tuple(
'atype',
'btype',
'ctype'
);
type ExtendButtonType = typeof ExtendedButtonTypes[number];
type MyButtonType = ButtonType | ExtendButtonType;
interface MyBaseButtonProps extends Omit<BaseButtonProps, 'type'> {
type?: MyButtonType;
}
// ...something else codes
But there is a condition that Modal component used the Button component with a relative path in antd.
// codes in antd
import { ButtonProps } from './button'
// ...something else
that means, if I do nothing in Yoooo UI and use the Modal component, the button type 'atype' is invalid since Modal component doesn't use my customized Button component
import { Modal } from 'yoooo-ui';
const buttonProps = {
type: 'atype' // <-- error happened
}
<Modal
okButtonProps={buttonProps}
/>
I wanna figure out a way to handle this condition with a commonly way.
Hello I have table component taken from ant design's table and I want to change what happens when you change your current page.
function DefaultTable<T extends Entity>(props: TableProps<T>): JSX.Element {
const { pagination } = props;
const [currentPage, setCurrentPage] = useState(1);
const [currentPageSize, setCurrentPageSize] = useState<number>();
return (
<Form>
<Table
{...props}
pagination={
pagination !== false && {
onChange: e => setCurrentPage(e),
defaultCurrent: currentPage,
onShowSizeChange: (_current, newSize) => setCurrentPageSize(newSize),
pageSize: currentPageSize,
...pagination
}
}
/>
</Form>
);
}
However, when I change the page, the filters, sorters and some other configurations are also gone. I think it is because of this onChange function onChange: e => setCurrentPage(e), the default behaviour is ignored. Is there a way to extend the default onChange, and then add my current setCurrentPage(e) to it?
I've been looking on Table and Pagination implementation on antd and there is no evidence which explains why adding onChange would prevent the default behavior.
https://codesandbox.io/s/customized-filter-panel-antd4123-forked-1nwro?file=/index.js
I also have been playing around the Table example provided by antd docs, where I add a onChange handle and the filtering behavior remains the same.
Try to isolate the code and provide more info - this way we could help you better.
I'm attempting to do an animation with React and CSS classes. I have created a live demo, if you visit it and click the Start button you will see the text fade in and up one by one. This is the desired animation that I am after.
However, there seems to be issues of consistency when you hit Start multiple times and I cannot pinpoint why.
The Issue: Below is a recording of the issue, you can see the number 1 is not behaving as expected.
live demo
The process: Clicking Start will cancel any previous requestAnimationFrame' and will reset the state to it's initial form. It then calls the showSegments() function with a clean state that has no classNames attached to it.
This function then maps through the state adding a isActive to each segment in the state. We then render out the dom with a map and apply the new state.
This should create a smooth segmented animation as each class gets dropped one by one. However when i test this in Chrome (Version 56.0.2924.87 (64-bit)) and also on iOS, it is very inconsistent, sometimes it works perfectly, other times the first DOM element won't animate, it will just stay in up and visible it's completed transitioned state with "isActive".
I tried to replicate this issue in safari but it worked perfectly fine, I'm quite new to react so i am not sure if this is the best way to go about things, hopefully someone can offer some insight as to why this is behaving quite erratic!
/* MotionText.js */
import React, { Component } from 'react';
import shortid from 'shortid';
class MotionText extends Component {
constructor(props) {
super(props);
this.showSegments = this.showSegments.bind(this);
this.handleClickStart = this.handleClickStart.bind(this);
this.handleClickStop = this.handleClickStop.bind(this);
this.initialState = () => { return {
curIndex: 0,
textSegments: [
...'123456789123456789123456789123456789'
].map(segment => ({
segment,
id: shortid.generate(),
className: null
}))
}};
this.state = this.initialState();
}
handleClickStop() {
cancelAnimationFrame(this.rafId);
}
handleClickStart(){
cancelAnimationFrame(this.rafId);
this.setState(this.initialState(), () => {
this.rafId = requestAnimationFrame(this.showSegments);
});
}
showSegments() {
this.rafId = requestAnimationFrame(this.showSegments);
const newState = Object.assign({}, this.state);
newState.textSegments[this.state.curIndex].className = 'isActive';
this.setState(
{
...newState,
curIndex: this.state.curIndex + 1
},
() => {
if (this.state.curIndex >= this.state.textSegments.length) {
cancelAnimationFrame(this.rafId);
}
}
);
}
render(){
const innerTree = this.state.textSegments.map((obj, key) => (
<span key={obj.id} className={obj.className}>{obj.segment}</span>
));
return (
<div>
<button onClick={this.handleClickStart}>Start</button>
<button onClick={this.handleClickStop}>Stop</button>
<hr />
<div className="MotionText">{innerTree}..</div>
</div>
)
}
}
export default MotionText;
Thank you for your time, If there any questions please ask
WebpackBin Demo
Changing the method to something like this works
render(){
let d = new Date();
const innerTree = this.state.textSegments.map((obj, key) => (
<span key={d.getMilliseconds() + obj.id} className={obj.className}>{obj.segment}</span>
));
return (
<div>
<button onClick={this.handleClickStart}>Start</button>
<button onClick={this.handleClickStop}>Stop</button>
<hr />
<div className="MotionText">{innerTree}..</div>
</div>
)
}
How this helps is that, the key becomes different than previously assigned key to first span being rendered. Any way by which you can make the key different than previous will help you have this animation. Otherwise React will not render it again and hence you will never see this in animation.
Given the very simple page (having assumed React and react-router#4 have been imported):
// Current location: example.com/about
<Link to="/about/#the-team">See the team</Link>
// ... loads of content ... //
<a id="the-team"></a>
I would expect the above, upon clicking "See the team" would scroll down to the id'ed team anchor. The url correctly updates to: example.com/about#the-team, but it doesn't scroll down.
I have tried alternatives such as <a name="the-team"></a> but I believe this is no longer spec (nor does it work).
There are plenty of work arounds on github for react-router#v2 but they rely on the update callback present on BrowserRouter that is no longer present in v4.
Given a <ScrollIntoView> component which takes the id of the element to scroll to:
class ScrollIntoView extends React.Component {
componentDidMount() {
this.scroll()
}
componentDidUpdate() {
this.scroll()
}
scroll() {
const { id } = this.props
if (!id) {
return
}
const element = document.querySelector(id)
if (element) {
element.scrollIntoView()
}
}
render() {
return this.props.children
}
}
You could either wrap the contents of your view component in it:
const About = (props) => (
<ScrollIntoView id={props.location.hash}>
// ...
</ScrollIntoView>
)
Or you could create a match wrapper:
const MatchWithHash = ({ component:Component, ...props }) => (
<Match {...props} render={(props) => (
<ScrollIntoView id={props.location.hash}>
<Component {...props} />
</ScrollIntoView>
)} />
)
The usage would be:
<MatchWithHash pattern='/about' component={About} />
A fully fleshed out solution might need to consider edge cases, but I did a quick test with the above and it seemed to work.
Edit:
This component is now available through npm. GitHub: https://github.com/pshrmn/rrc
npm install --save rrc
import { ScrollIntoView } from 'rrc'
The react-router team seem to be actively tracking this issue (at the time of writing v4 isn't even fully released).
As a temporary solution, the following works fine.
EDIT 3 This answer can now be safely ignored with the accepted answer in place. Left as it tackles the question slightly differently.
EDIT2 The following method causes other issues, including but not limited to, clicking Section A, then clicking Section A again doesn't work. Also doesn't appear to work with any kind of animation (have a feeling with animation starts, but is overwritten by a later state change)
EDIT Note the following does screw up the Miss component. Still looking for a more robust solution
// App
<Router>
<div>
<Match pattern="*" component={HashWatcher} />
<ul>
<li><Link to="/#section-a">Section A</Link></li>
<li><Link to="/#section-b">Section B</Link></li>
</ul>
<Match pattern="/" component={Home} />
</div>
</Router>
// Home
// Stock standard mark up
<div id="section-a">
Section A content
</div>
<div id="section-b">
Section B content
</div>
Then, the HashWatcher component would look like the following. It is the temp component that "listens" for all route changes
import { Component } from 'react';
export default class HashWatcher extends Component {
componentDidMount() {
if(this.props.location.hash !== "") {
this.scrollToId(this.hashToId(this.props.location.hash));
}
}
componentDidUpdate(prevProps) {
// Reset the position to the top on each location change. This can be followed up by the
// following hash check.
// Note, react-router correctly sets the hash and path, even if using HashHistory
if(prevProps.location.pathname !== this.props.location.pathname) {
this.scrollToTop();
}
// Initially checked if hash changed, but wasn't enough, if the user clicked the same hash
// twice - for example, clicking contact us, scroll to top, then contact us again
if(this.props.location.hash !== "") {
this.scrollToId(this.hashToId(this.props.location.hash));
}
}
/**
* Remove the leading # on the hash value
* #param string hash
* #return string
*/
hashToId(hash) {
return hash.substring(1);
}
/**
* Scroll back to the top of the given window
* #return undefined
*/
scrollToTop() {
window.scrollTo(0, 0);
}
/**
* Scroll to a given id on the page
* #param string id The id to scroll to
* #return undefined
*/
scrollToId(id) {
document.getElementById(id).scrollIntoView();
}
/**
* Intentionally return null, as we never want this component actually visible.
* #return {[type]} [description]
*/
render() {
return null;
}
}
I've created a library called react-scroll-manager that addresses this issue and the other issues around scroll position with React Router. It uses this technique to navigate to hash links anywhere in the document without the need to wrap them individually. Simply wrap your Router component in a ScrollManager component:
class App extends React.Component {
constructor() {
super();
this.history = createHistory();
}
render() {
return (
<ScrollManager history={this.history}>
<Router history={this.history}>
...
</Router>
</ScrollManager>
);
}
}
You can link to any component with an id property:
<MyComponent id="mycomp">...</MyComponent>
Just include the id as a fragment in your Link target:
<Link to="#mycomp">...</Link>
The library is based on HTML5 and React 16, and it supports React Router 4 (and possibly earlier versions).