Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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