search

Flipkart / recyclerlistview

High performance listview for React Native and web!
Apache License 2.0
5.19k stars 426 forks source link

How can I add dynamic height ? #465

Open ghost opened 4 years ago

ghost commented 4 years ago

I have a simple chat application and the chat messages are different one message can be one line the other message can be 10 line or 9 line or 5 or 20 line, so How to overcome this situation with this nice package ?? any help.

ghost commented 4 years ago

@naqvitalha the forceNonDeterministicRendering={true} never helped me. I have a chat app, there is dynamic height for any messages item.

naqvitalha commented 4 years ago

Just give approx values. What problem are you facing? Shift animations?

ghost commented 4 years ago

Hi @naqvitalha thank you to reply, Problem is there auto jumping motions and also loads data very slowly and also make the layout bad.

I have chat application one item in right the other in left, but this makes the item from right to left.

ghost commented 4 years ago

Could you please tell me what is the approx value ?? if you mean approximate value then I cant give it, becuae there is image item, video item, messages with different sizes

ghost commented 4 years ago

will this help canChangeSize ??

ghost commented 4 years ago

@naqvitalha, Is still faster this module than react-native flatlist with dynamic height ????

dolphinflow86 commented 4 years ago

Facing the same issue here. @muhammadwafa Did you solve this issue?

I have turn on forceNonDeterministicRendering={true} and it shows chat messages with calculated height correctly but slowly(I can see some blank for a while during scrolling down the chat messages, maybe I can put loading indicator and delay to cover this blank?)

I wish I could know the height of each chat message before we connect data with dataProvider.

ghost commented 4 years ago

Did you check the canChangeSize ?

I left this and I am using flatlist I dont know that this will be faster than flatlist with dynamic hight or not

naqvitalha commented 4 years ago

Non deterministic mode at this point is almost as fast as the regular one. Please make sure you've read the perf guide.

ghost commented 4 years ago

@naqvitalha thank you, please kindly briefly let me know that items with dynamic height can it be still faster than flatlist or not ????

I cant what did you mean sorry as I am not a native English speaker

naqvitalha commented 4 years ago

Yes, simply put it can be faster even with dynamic heights?

ghost commented 4 years ago

Thank you very very much so please tell which of this prop will be use for dynamic height?

  1. forceNonDeterministicRendering={true}
  2. canChangeSize={true}
legion-zver commented 4 years ago

@muhammadwafa if you create react native application - use library for calc text height

ghost commented 4 years ago

Hi @legion-zver, Could you please explain more ?? how can I calculate height ???

davx1992 commented 4 years ago

@muhammadwafa had same issue. Spent lot of time to get fast ui. In the end decided to calculate text height using https://www.npmjs.com/package/react-native-text-size and save this height in db with message. So when I am rendering data, I take this text height and use constants from your ui (paddings, margins e.t.c) to calculate total message height.

ghost commented 4 years ago

@davx1992 thank you, but what about the first time items gets added, and could you please share your code

davx1992 commented 4 years ago

@muhammadwafa when I add new message I save it first and then when it is saved using saved entity to add to list. Do not have public repository for my project but will share you some snippets. https://gist.github.com/davx1992/8f302e96820cee1a09dde82e00e0878c

There I am calculating message height based on Text height.

ghost commented 4 years ago

thank you, and is that helped you as well?

davx1992 commented 4 years ago

Yes, initially I implemented this for Flat List, as in flat list to scroll height is mandatory. However due to performance issues, decided to switch to RecyclerViewList, and now it is much faster.

sinhpn92 commented 3 years ago

Thank you very very much so please tell which of this prop will be use for dynamic height?

  1. forceNonDeterministicRendering={true}
  2. canChangeSize={true}

When I have used this props, the row width and height will be recalculate both :((.

velidan commented 2 years ago 
forceNonDeterministicRendering={true}
canChangeSize={true}

In the case of React Native Web these props cause infinity re-rendering issue so it looks like it's impossible to achieve dynamic items height

fukemy commented 2 years ago

ghost you CAN NOT USE dynamic height because this lib using COLLECTIONVIEW, this always need calculating the view size, the the reason naqvitalha can not answer u

imyanglu commented 1 year ago

@MuhammadWafa had same issue. Spent lot of time to get fast ui. In the end decided to calculate text height using https://www.npmjs.com/package/react-native-text-size and save this height in db with message. So when I am rendering data, I take this text height and use constants from your ui (paddings, margins e.t.c) to calculate total message height.

Does expo have a similar library?