Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
WhoAteDaCake opened this issue Mar 27, 2021 · 0 comments
Open

Comments

@WhoAteDaCake
Copy link
Contributor

  • 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant