Horizontally Scrolling Image Gallery

Is there a way to create a horizontally scrolling image gallery? I tried the following:

  1. ScrollView -> Horizontal Scroll set to true
  2. Place a Row layout within the ScrollView
  3. Place Images within the cells of the Row. (The more cells I add, the smaller the cell height becomes and i see all the images in the viewport )

Any help to create a horizontally scrolling component (not just for images) would be great as many modern designs demand them.

You need to change the ScrollView’s layout direction to horizontal in the Style tab, in addition to setting horizontal scroll to true in the Properties tab – this can be a bit confusing, sorry for that. Then, you can simply add Containers (or even image components) inside the ScrollView, and they’ll stack from left to right.

Sorry but I am unable to find out the option where I can set the ScrollView’s layout to horizontal. In the Styles tab of ScrollView, I can find the following options:

image

  1. Dimension and Position -
  2. Background - Background color.
  3. Advanced Properties - image

Can you pinpoint which is the option that you are pointing out? I have already set the horizontal scroll in Properties tab to true

@Harri_Sarsa only the “Container” component has a Layout section in Styles tab. The ScrollView component doesn’t have a Layout section in Styles Tab. Is this some bug?

Sorry, I remembered incorrectly – if you add a horizontal layout Container inside the Scroll View, it’ll work correctly.

That said, the available style properties for Scroll View should be reviewed and expanded if possible, AFAIK there’s no reason why it couldn’t have the ability to switch to horizontal layout. Made a ticket to follow: https://tracker.appgyver.com/feature-requests/p/expand-scroll-view-style-properties

1 Like

Hello,

I’m having trouble doing something similar.
I want to have a gallery horizontal scrollable.

I created a scroll view (horizontal) > container (repeated) > image.
image

The container looks good.

The scroll view works on the web.


But using the ScrollView is not working on AppGyver App (live update).

Can you help me what I am missing?

The horizontal scroll for scroll view can be found in the properties pane:

image

Just setting that to true and placing a repeated container inside should get you the desired result. Make sure you specify valid dimensions for the image container if your images aren’t showing.