ViewGroup > items > I can't use Conditional as an item

[Mohammad-Al-Refai]

We have a feature and we need to show it for a specific app version and the entry point to the feature is an item in ViewGroup.

ViewGroup:
  BottomNavBar:
    reloadView: true
    styles:
      backgroundColor: white
      color: 0xFF667685
      selectedColor: 0xff4393F1
    items:
      - icon:
          name: home_4_line
          library: remix
        label: "r@home"
        page: Home
        selected: "${selectedIndex == 0 ? true : false}"
      - icon:
          name: user_star_line
          library: remix
        label: "r@reviews"
        page: Reviews 
        selected: "${selectedIndex == 1 ? true : false}"
      - Conditional: # here
          conditions:
            - if: "${isFeatureEnabled}"
              icon:
                name: qr_scan_2_line
                library: remix
              label: "r@checkIns"
              page: QRClaims 
              selected: "${selectedIndex == 2 ? true : false}"
      - icon:
          name: list_check
          library: remix
        label: "r@transactions"
        page: Transactions
        selected: "${selectedIndex == 3 ? true : false}"
      - icon:
          name: account_circle_line
          library: remix
        label: "r@profile"
        page: Profile
        selected: "${selectedIndex == 4 ? true : false}"

Global: |-
  // Javascript code
  var isFeatureEnabled = true

Ensemble studio logs:

Error :  Language Error: Invalid page definition.
Please double check your page syntax.

[kmahmood74]

assigning to @TheNoumanDev Nouman, we can just support visible for each item in the ViewGroup Then the developer can just do -

ViewGroup:
  BottomNavBar:
    reloadView: true
    styles:
      backgroundColor: white
      color: 0xFF667685
      selectedColor: 0xff4393F1
    items:
      - icon:
          name: home_4_line
          library: remix
        label: "r@home"
        page: Home
        selected: "${selectedIndex == 0 ? true : false}"
      - icon:
          name: user_star_line
          library: remix
        label: "r@reviews"
        page: Reviews 
        selected: "${selectedIndex == 1 ? true : false}"
      - icon:
            name: qr_scan_2_line
            library: remix
          label: "r@checkIns"
          page: QRClaims 
          selected: "${selectedIndex == 2 ? true : false}"
          visible: "${isFeatureEnabled}" #<-- this is the change
      - icon:
          name: list_check
          library: remix
        label: "r@transactions"
        page: Transactions
        selected: "${selectedIndex == 3 ? true : false}"
      - icon:
          name: account_circle_line
          library: remix
        label: "r@profile"
        page: Profile
        selected: "${selectedIndex == 4 ? true : false}"

just make sure when an item is marked invisible, it does not take any space.