I am having a problem with list/scroll views in big screens.
In the application there is a scroll component who queries for more rows when its end is reached. However, when the screen has big enough resolution, the initial query is not enough to generate the scroll bar, and thus, the event is never triggered.
The team agrees that because of the instability of the Dimensions module in React Native, a better solution would involve already implemented abstractions instead of getting the screen's dimension with the mentioned module.
What could be a good solution to the problem? I hope I was clear.
Thanks in advance.
My solution was to query when the 'layout' event was fired. I did this through the 'onLayout' and 'onContentSizeChange' props. They store the heights of the list and the component, which made me able to compare both and query for more data.
Related
I'm having trouble with a graph I'm building with React-ChartJS-2:
I've got two line charts in one canvas, one of them is interactive (the user can activate points and can compare different values on that graph) the other one is just a static graph which should be a orientation for the user. I'm trying to prevent the rerendering of the static graph if the user activates datapoints on the interactive graph (which changes the props and thus the useMemo Hook doesnt work). Is there a way to separate the two datasets in two single components so the props don't change for the static graph without some hacky CSS?
Thank you in advance!
I kinda found a solution by deactivating the animation so the user doesn't see the rerendering, but it's not the nicest I guess. Right now I'm trying to render the two line Charts and try to stack one on top of the other with CSS
Hi There #Lucas2101 it would be easier to answer your question with a code example. What is the reason you need the useMemo hook. And to answer one of your questions the useMemo hook runs when the items in the dependency array update so it might be that you haven't added the correct thing to that array. I can't say for sure as i have no code.
The documentation of React Native describes LayoutAnimation like so:
Automatically animates views to their new positions when the next
layout happens.
I don't understand why this API is needed when the Animation API already can do this.
Why / when should I use the LayoutAnimation API?
I read about it here, and it says that:
LayoutAnimation works by identifying views by their unique key,
computing their expected position, and relying on the underlying
native framework (CoreAnimation on iOS) to animate the change. Frame
changes are animated as long as the view keeps the same key between
state changes. Opacity and Scale are the only additional properties
supported, but it is possible to add a few more such as
backgroundColor and transformations.
ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast.
As said here:
Use the Animated API and handle all the movements ( which in this case
are simple to be fair ) between the two modes in a relatively
complicated way by having one view move off screen when the other
comes in and vica versa. ( I would explain how but this article is not
about Animated ).
Use the LayoutAnimation API to essentially configure how changes in
the layout are to be handled.
LayoutAnimation handles the way layout changes are handled every time the screen ( or part of it ) is re-rendered. What this means is that every time you call setState in your code and that results in your views changing position LayoutAnimation can be used to animate the way your views move to their new positions. For example in the Login/Logout scenario I have a simple function that toggles a flag that decides whether to show the login view or not.
In order to use the browser level scroll instead of grid level scroll I made domLayout = 'autoHeight' which actually did what I wanted but it is crashing the browser is there any solution to this, I searched for this but didn't find any solution, if anyone have solution for this even a reference link would be helpful.
If you do this, you are getting rid of row virtualization, so you are actually loading as many rows you are passing at once, note that this is not an ag-grid limitation, this is just the fact that you are passing too much data and running out of memory
If you have too much data, in ag-grid you are going to have either pagination or scroll, so that the rows are virtualized and then you don't crash the browser
Hope this helps
I have an InfiniteContainer list where each element is a relatively complex container with several different buttons with each their action. Since it's a scrollable list, I use LongPointerPress to activate drag and drop like Shai recommended in another post. To do this I need to set a lead component to handle this. However, when I set it, none of the other buttons get their individual events. I thought I could overwrite the getLeadComponent() of the buttons to have it return null, to ensure those buttons handle their own events, but it's private and haven't been able to think of any other solution for now.
Is there a recommended approach for handling this?
NB. I've been spending a LOT of time piecing together partial advice from different posts, and using trial and error to get this UI to work. It would be useful if the CN1 documentation could contain more explicit advice on the approaches that work for such 'real life' complex UI which combine eg lists, drag&drop, multiple buttons, long press for additional actions, Swipable containers, ... It shouldn't feel like constant hacking ;-)
You can setLeadComponent(null) when you are done with the lead component functionality to "undo" the lead component effect. The lead component behavior is an "all or nothing" approach.
If this doesn't work for you you can override the low level events in the Form and implement the functionality there. You can block components from getting events by not calling super.pointer* methods in Form and thus allow any sort of effect.
I need to setup a quite huge Application with arround >20 main views plus forms. A mainview will at least contain one grid but can contain upto ten grids. There are also some mainviews that contains a Portal-Panel.
Now it comes that it take quite some time till a mainview opens which don't happends as I tested it with just one instead of >20. The Application lays within a Viewport with fit layout which holds a container with Borderlayout. The Mainview always render within the center while the other regions are used for navigation.
My first approach caching things within a tabpanel
My first approach was to got with a Tab-Panel with hidden tabs. Parallel to that I manage a MixedCollection where I make lookups if the View has already been inserted into the tabpanel or has to be created. If it has already been inserted I fetch the positon from the MixedCollection and run the setActiveTab(). But it seems worthless cause it takes all the same time to insert a new mainview or to activate a existing with setActiveTab().
So what I am doing wrong and how can I make this better?
Edit
The problem seems to come from the rendertime and that the component seems to get reredenred each time setActiveTab() is used. It takes up to 2-3 secs to render a view into the center panel. Therefore I thought I can be speed it up by caching a already created view so that the rendering and sizing didn't need to be done. I guess I should mention that in the north region a menu is also rendered each time, which not get's chached but that shouldn't matter, shouldn't it?
How the views are switched
I have a extra controller that manages the menue-view and the main-view changes. For that the menue gets removed from the container and the new menue is added and for the main-view a lookup is done in the mentioned mixed-collection if the view has already been created and if so the tab-index is received and the tab activated. If not the view get added as new tab and is afterwards added with it's ident and index to the mixed collection.
It may help you to take a look at suspendLayouts() and resumeLayouts()
You run Ext.suspendLayouts(); before you begin changing the views and Ext.resumeLayouts(true) after you are done with all views.
You should also check for overnesting, meaning you have nested to much components into each other.
Example:
If a grid is the only component within a tabpanel then it would be overnesting if you place that grid in a extra panel and then into the tabpanel.
Firstly what I found that non active tabs will be populated anyway. I don't know why. But my stores for not active tabs loaded anyway.
Second, it is really doesn't matter the size of your app. We have a lot of views and everything works pretty fast.
In most cases it is depends:
First is nesting - review your code. Less nesting more speed. For example instead of panel if you dont need all stuff that panel provide- use container. Because all this stuff is add more divs to your dom.
Depends how you create your view. Without your code it is really hard to say, why it is slow. Maybe you create your view every time when you open tab, or go to another view.
As mention #sra try to use suspendLayouts - it means that your browser will render your stuff only resumeLayouts, instead of rerender everything everytime when you add any component.
If you use windows - use closeAction:hide instead of destroy.
Not use Ext.getCmp(). I also hear that refs can slow down application because they start searching your component from the body. But it not proved info :) Use component.down('id'), component.up('xtype') it will search only from your component not from the body.
Not create your view from controller everytime when you do something using Ext.create('Panel'). It means it will created everytime.
Use less global events because this is also slowdown your app.
It is really hard to say what is the issue in your case without code. This is only few point that can help you. But my suggestion to looking to nesting and how and where you create a view.