Native: How to Hide Scrollbar for Horizontal List View in Mendix Native App?

0
I'm using a horizontal list view in a Mendix Native mobile application to display a scrollable list of items. By default, the scrollbar appears while scrolling, but I want to hide the horizontal scrollbar. Has anyone successfully done this in Mendix Native? Is there a way to apply custom styling or override the default behavior
asked
4 answers
0

Hello Mohamed

I don't think this is possible with Mendix native styling.

My best bet would be to create a custom flatlist widget and set the props like so

<ScrollView
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
 />
answered
0

Yes, this can be handled using a custom widget.


I’ve published a Marketplace widget called Native Custom Scroll that allows rendering components in a horizontal direction in Mendix Native. One of its key features is the ability to control the scrollbar visibility — you can hide or unhide the scroll indicator based on your requirement.

You can check it here : Native Custom Scroll


It’s specifically useful when you want horizontal scrolling behavior without showing the default scrollbar.

I’ve been using this widget successfully for over 2 years, and it meets all relevant use cases. It is now available on the Mendix Marketplace for others to use.

answered
0

hi,


In Mendix Native, you cannot hide the horizontal scrollbar via CSS, because Native apps do not use CSS for layout rendering. The scrollbar behavior comes from the underlying React Native ScrollView.

Correct Way

In Mendix Native:

  • A horizontal List View internally uses React Native ScrollView
  • Scroll indicators are controlled via:
    • showsHorizontalScrollIndicator
    • showsVerticalScrollIndicator

However:

Mendix does not expose this property in Studio Pro for the default List View widget.

So there is no built-in configuration option to hide the scrollbar.

Working Solutions

Option 1 ( Clean Solution)

Create a custom native widget and:

Wrap the list in a ScrollView like this:


<ScrollView
  horizontal
  showsHorizontalScrollIndicator={false}
>

This is the correct and supported React Native way.

Option 2 (Workaround)

Use a Container with horizontal layout + custom widget logic instead of default List View.

What Will NOT Work

  • CSS (Native does not use browser CSS)
  • Atlas styling
  • Theme overrides
  • SCSS changes

These only apply to Web apps, not Native.

Final Expert Conclusion

Mendix Native does not provide a built-in setting to hide the horizontal scrollbar of a List View.

To fully control scrollbar visibility, you must create a custom native widget and set showsHorizontalScrollIndicator={false} in the underlying ScrollView.


answered
-2

Hello Mohamed ElNady,

 

You can add a class to the ListView "overflow-x: hidden;".

image.png

 

Please let me know if that helps.

 

Édrien

answered