Skip to content

ScrollView does not work if children are added after initial mount #1054

@WhoAteDaCake

Description

@WhoAteDaCake
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions