ScrollView does not work if children are added after initial mount
WhoAteDaCake opened this issue · 0 comments
WhoAteDaCake commented
-
Operating System: Ubuntu 20.04
-
Revery Version: revery-ui/revery#2d936c67cd31153a547087c6743e244a3fdccf3b
-
OCaml version:4.11.2
-
Native, Bytecode, or JS build: Native (was just makinga dev build)
-
Steps to reproduce:
open Revery;
open Revery.UI;
open Revery.UI.Components;
let containerStyle =
Style.[
position(`Absolute),
top(0),
bottom(0),
left(0),
right(0),
alignItems(`Center),
justifyContent(`Center),
flexDirection(`Column),
];
let outerBox =
Style.[width(200), height(200), backgroundColor(Colors.black)];
let innerBox =
Style.[
width(450),
height(450),
backgroundColor(Color.rgba(0., 1., 0., 0.5)),
];
let rec seq = (n, acc) => {
if (n == 0) {
acc
} else {
seq(n - 1, [n, ...acc])
}
}
let allItems = seq(100, []);
module Sample = {
let%component make = () => {
let%hook (bounce, setBounce) = Hooks.state(true);
let%hook (items, setItems) = Hooks.state([]);
let%hook _ = Hooks.effect(OnMount,() => {
setItems(_ => allItems)
None
});
let rows = List.map(text => {
<View style=Style.[height(30)]>
<Text fontSize=16.0 text={Int.to_string(text)} />
</View>
}, items) |> React.listToElement;
<View style=containerStyle>
<Text text="Bounce" fontSize=20. style=Style.[marginBottom(10)] />
<Checkbox
onChange={() => setBounce(isBounce => !isBounce)}
checked=bounce
style=Style.[marginBottom(10)]
/>
<ScrollView style=outerBox bounce>
rows
</ScrollView>
<Text
text="To scroll horizontally use Mouse Wheel while holding Shift Key"
fontSize=20.
style=Style.[marginTop(10)]
/>
</View>;
};
};
let make = () => <Sample />;If you replace let%hook (items, setItems) = Hooks.state([]); with let%hook (items, setItems) = Hooks.state(allItems); the scrollbar will render correctly
-
Actual Result:
- No scroll bar
-
Expected Result:
- Ability to scroll the items
-
Search terms used:
ScrollView, no scrollbar