How to set the last items not to be transparent in @shoutem/ui DropDownMenu?

Question

im using drop down menu https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu

by default it is set to be transparent last items in the menu, i was wondering if i can disable it since im only using 2 items in the menu and it makes my second item to be transparent and hardly be seen.

when i click my drop down menu and you can see the 2 items there (second is barely seen)

Answer 1

I'm afraid this cannot be disabled by a simple bool prop or similar. This option will likely be something that is added in the future. For now, i would suggest you try to edit the theme for the UI toolkit.

If you're using the Shoutem platform, you could create a custom theme that you could use in your app ( as a new custom extension ). If not, you could define your default UI toolkit theme manually, where you would "disable" this gradient.

In both cases, you would need to override the DropDownModal component theme styles.

This is the default theme style that is passed to the component.

  'shoutem.ui.DropDownModal': {
    modal: {
      'shoutem.ui.Button.close': {
        'shoutem.ui.Icon': {
          color: changeColorAlpha(variables.subtitle.color, 0.5),
          fontSize: 24,
        },

        position: 'absolute',
        bottom: 25,
        left: 0,
        right: 0,
      },

      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 20,
      backgroundColor: changeColorAlpha(variables.backgroundColor, 0.97),
    },

  ....
  },

You could define a new theme for the toolkit that overrides this specific style property. So you could pass in something like

  'shoutem.ui.DropDownModal': {
    modal: {
      backgroundColor: 'transparent',
    },
  },

We're using the backgroundColor property to style the overlay above the actual dropdown.

If you're not using the Shoutem platform, you can make use of getTheme, that is exported from UI toolkit to get the default theme. This will provide you with resolved style object, into which, you can merge your changes from above. Then, just set the new theme as the current one, by making use of @shoutem/theme;

import { Theme } from '@shoutem/theme';

Theme.setDefaultThemeStyle(myCustomTheme);

If you're using Shoutem platform, you could create the same override, by creating a new theme extension, that merges default styles from the Rubicon theme extension.