revery-ui/revery

ScrollView does not work if children are added after initial mount

WhoAteDaCake opened this issue · 0 comments

  • 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