I have a fairly simple RN app with a layout similar to this:
As shown in my image, I have four Touchable columns equally splitting the screen.
Everything works fine. But here is what I'm trying to do now: wherever a user touches the screen, I need to append an element where the touch interaction occured and on top of everything.
First, I naively added a new TouchableWithoutFeedback on top of my other views, but this simply prevented onPress to be fired on those other views.
Then I began to realize that this was not as simple as I thought and took a look to the Gesture Responder System. I think I got the concept but I didn't achieve anything with it yet...
Is it possible to let onPress events to bubble up through every layers ?
Related
I am using React
I want to animate a series of chronological events occurring in network graph.
Requirements as follows;
Network graph displayed is statically drawn (i.e: nodes and edges never change)
Given a dynamic list of chronological events (which come from an api), animation shows the nodes in the network highlighted one after another for the given times
There is a play/pause slider to play/pause and scroll through the animation
The events are shown in a table and table rows can be clicked on to jump to the time in the animation they occured
Would also be nice to be able to play animation at 2x, 4x ... speeds
My questions
How can this be implemented in react?
Is there any library that can help me with this?
Or any similar project which may be a good starting point?
My thoughts
I am totally open to any open source solution as long as it can be implemented using react.
I am thinking of using d3 (though I have no prior experience). The following examples seem somewhat similar to what I want to do.
http://www.claudiobellei.com/2017/02/04/viznetworks/
https://observablehq.com/#stwind/raft-consensus-simulator
I am trying to build a react application that can create a card component and connect them, and they also can pan and zoom the screen also drag those cards. Like the building window in Figma or Adobe XD. Can anyone suggest to me any popular and effective solution or packages for it. I have been doing some research for a few days now and I could not get a proper solution for it.
You can use drag&drop functionality, basically you need to handle callbacks when drag&drop events happen (onDragStart, onDragEnd, onDragEnter ...), you get data from the event parameter. When something is dropped, you update the state accordingly (add/remove item from list), and render them with map function. Some sample: https://codesandbox.io/s/reactdrag-and-drop-iq89y?file=/src/components/TaskList.jsx
I would like some guidance on how to create an action-sheet/bottom-sheet style drawer in React-Native so that I could use a single code base for both iOS and Android.
I've attempted to use the Animated Spring API. However, I'm not able to change to location of the Spring from the original location (while the drawer is closed), to the top location (while it is open). So that if the user doesn't complete the gesture, the menu goes back to its original location in either state, instead of the original position at the bottom.
Furthermore, many of the other answers to similar questions all recommend using their own or some other package on GitHub/NPM.
I'd like to make my own to keep dependencies small. I've also considered using React-Navigation but I can't seem to find anything that fits my use-case.
react-native-action-sheet is great if you're looking to get as close as possible to the native versions of Action Sheets.
https://github.com/expo/react-native-action-sheet
I can find a few thousand examples of creating new windows with electron, and how to change out the current main windows to a new file, But I'm really stumped when it comes to being able to smoothly transition between pages.
I could build all the functionality into the index and swap it out, but that seems overly complex and load heavy.
I could use one of the react bootstraps but this seems rather heavy on learning and counter intuitive to Electron (Plus a massive amount of messing around with multiple package loaders and other such things I've seen).
I've seen some things in the docs for child windows and seem someone suggest the use of those, or hidden windows to pre-load content, append onto the existing page, animate then remove the old. But that just sounds like a nightmare when it comes to adding event listeners.
I just need a way to be able to transition nicely between say a splash page and a load page, then the app page
Then say in the app transition in a modal
Personally I use multiple windows and if the user clicks on the close button for one of them I do not perform a window.close() but a hide(). In addition on every close button press I check if at least one window is left to keep the app alive. If not I exit the application. For ipc calls I introduced a naming convention like: "settings_win-operation1", "splash_win-operation1" and so forth.
I currently have an app that has five components. On the left I have a radio button field and a grid below it, on the right I have a display field, chart, and another grid [top to bottom]. The radio buttons filter every other component by a certain date, and the left grid [when selected] will filter the right components by the selected object.
Currently the app does what is needed, but when I select a few radio buttons in a row OR select a few objects in the grid, the app will eventually totally disappear. I tried running the app externally and internally with a custom HTML app, but the problem does not go away.
Here is a picture of the app before anything crashes:
Interestingly, when I look through the chrome debugger and look at the Elements tab, I see there are lots of masks that have been created and not destroyed. Here is a picture of a slight piece of the HTML that looks fishy and occurs after I select a few objects from the left grid:
Every time I select a new object, one more mask will be added to the DOM. I don't know if this is what breaks my app, but it seems odd so it may be related?
I didn't include any code because I thought it should be some easy fix - plus, the code does exactly what it should [before it disappears]. Any help on how to fix an app that disappears would be great!
In itself a mask sticking around to be reused after data loaded successfully is not an indication of a problem. I see mask being created and not destroyed in a simpler app:
Perhaps what you experience is an issue of timing when elements load asynchronously.