For pages that require show more the 200 height and overflow is applied on second render. So customers can see the actual height of description for a brief second before the box shrinks. Issue is caused because we need to know the height of the event details before deciding whether or not to collapse. If > 200 then collapse and add show more button, if <= then don't collapse and don't add show more button.
Possible solutions I can think of so far:
1) Create a dummy view on first render which is invisible. Update state with height and collapse variables. On second render we now know what the height is so we render normally. We only render dummy view if certain state variable is defined. We may need to render a spinner on first render so that it looks like description is being loaded in (also might have to set height as 200 initially to make it look good).
2) Do similar approach, but with redux. May be overkill though to use redux here as its should used for handling data sent to views and not animations.
For pages that require show more the 200 height and overflow is applied on second render. So customers can see the actual height of description for a brief second before the box shrinks. Issue is caused because we need to know the height of the event details before deciding whether or not to collapse. If > 200 then collapse and add show more button, if <= then don't collapse and don't add show more button.
Possible solutions I can think of so far: 1) Create a dummy view on first render which is invisible. Update state with height and collapse variables. On second render we now know what the height is so we render normally. We only render dummy view if certain state variable is defined. We may need to render a spinner on first render so that it looks like description is being loaded in (also might have to set height as 200 initially to make it look good).
2) Do similar approach, but with redux. May be overkill though to use redux here as its should used for handling data sent to views and not animations.