Widget Styling Guide

// A custom styling class
export const customClassName = {
  container: {
    // ViewStyle properties
    paddingTop: 5
  },
  text: {
    // TextStyle properties
    fontWeight: "bold"
  }
}

export const ActionButton = {
  container: {
    // ViewStyle properties
    borderWidth: 3
  },
  caption: {
    // TextStyle properties
    fontSize: 20
  }
};

export const com_mendix_widget_native_badge_Badge = (Badge = {
  caption: {
    // TextStyle properties
    color: "#00FF00",
  }
});

export const ListView = {
  container: {
    // All ViewStyle properties
    numColumns: 1 // This is the number of columns that the list should render.
  },
  listItem: {
    // All ViewStyle properties
    rippleColor: 'rgba(0, 0, 0, 0.2))', // This is the color of the ripple on Android, and will be applied only when the item has an on click action set, otherwise it will be ignored.
    underlayColor: null, // This is the color while pressing the item on iOS, and will be applied only when the item has an on click action set, otherwise it will be ignored and defaulted to opacity only.
  },
  listItemDisabled: {
    // Same properties as `listItem`. Overrides `listItem` styles if the item has an on click action and the action cannot be executed or is disabled during action.
  }
};

export const Text = {
  container: {
    // All ViewStyle properties
  },
  text: {
    // All TextStyle properties
  },
};

export const PageTitle = {
  container: {
    // All ViewStyle properties
  },
  text: {
    // All TextStyle properties
  },
};

export const Container = {
  container: {
    // All ViewStyle properties
    rippleColor: 'rgba(0, 0, 0, 0.2)', // This is the color of the ripple on Android, and will be applied only when the container has an on click action set, otherwise it will be ignored.
    underlayColor: null, // This is the color while pressing the container on iOS, and will be applied only when the container has an on click action set, otherwise it will be ignored and defaulted to opacity only.      
  },
  containerDisabled: {
    // Same properties as `container`. This overrides `container` styles if the there is an on click action set and the action cannot be executed or is disabled during action.
  },
};

export const TabContainer = {
  container: {
    // All ViewStyle properties   
  },
  tabBar: {
    // All ViewStyle properties
    bounces: null, // This is a Boolean value indicating whether the tab bar bounces when scrolling.
    pressColor: null, // This is a color for material ripple (Android only).
    pressOpacity: null, // This is opacity for a pressed tab.
    scrollEnabled: null, // This is a Boolean value enabling scrollable tabs.
    tabBarPosition: 'top' // This is the position of the tab bar in the tab view, and possible values are `top` and `bottom`. 
  },
  indicator: {
    // All ViewStyle properties   
  },
  tab: {
    // All ViewStyle properties   
  },
  label: {
    // All TextStyle properties   
  },  
  activeLabel: {
    // All TextStyle properties   
  },
  badgeContainer: {
    // All ViewStyle properties   
  },
  badgeCaption: {
    // All TextStyle properties   
  },
};

export const ScrollContainer = {
  container: {
    // All ViewStyle properties
  },
};

export const TextBox = {
  container: {
    // All ViewStyle properties   
  },
  containerDisabled: {
    // Same properties as `container`. Overrides `container` styles if the text box is non-editable.   
  },
  input: {
    // All TextStyle properties
    autoCapitalize: 'sentences', // This is a Boolean value indicating whether the tab bar bounces when scrolling. This automatically capitalizes certain characters when the user types: 
    // 'characters': capitalizes all characters 
    // 'words': capitalizes the first letter of each word 
    // 'sentences': capitalizes the first letter of each sentence (default) 
    // 'none': capitalizes nothing
    placeholderTextColor: null, // This is the text color of the placeholder string.
    selectionColor: null, // This is the highlight and cursor color of the text input.
    underlineColorAndroid: null, // This is the color of the `input` underline.
  },  
  inputFocused: {
    // Same properties as `input`. Overrides `input` styles if the text box is focused (with Studio Pro v8.15).
  },
  inputError: {
    // Same properties as `input`. Overrides `input` styles if there are validation errors.  
  },
  inputDisabled: {
    // Same properties as `input`. Overrides `input` styles if the text box is non-editable.
  },
  label: {
    // All TextStyle properties
    numberOfLines: 1 // This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis.  
  },
  labelDisabled: {
    // Same properties as `label`. Overrides `label` styles if the text box is non-editable.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },  
};

export const DropDown = {
  container: {
    // All ViewStyle properties   
  },
  containerDisabled: {
    // Same properties as `container`. Overrides `container` styles if the text box is non-editable.   
  },
  iconStyle: {
    // This has all TextStyle properties. Styles the arrow down icon next to the value (with Studio Pro v8.15).
  },  
  item: {
    // This has all TextStyle properties. Styles all the items in dropdown menu including selected item (with Studio Pro v8.11)
  }, 
  itemContainer: {
    // This has all ViewStyle properties. Styles all the item containers in dropdown menu including selected item container (with Studio Pro v8.11).
  },   
  label: {
    // This has all TextStyle properties.
    numberOfLines: 1 // The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis.  
  },
  labelDisabled: {
    // Same properties as `label`. Overrides `label` styles if the drop-down is non-editable.
  },
  menuWrapper: {
    // This has all ViewStyle properties. Styles the wrapper view surrounding all the menu items (with Studio Pro v8.11).
  }, 
  pickerIOS: {
    // This has all ViewStyle properties.
  },
  pickerBackdropIOS: {
    // This has all ViewStyle properties.
  },
  pickerTopIOS: {
    // This has all ViewStyle properties.
  },
  selectedItem: {
    // This has all TextStyle properties. Styles the selected item in dropdown menu (with Studio Pro v8.11).
  }, 
  selectedItemContainer: {
    // This has all ViewStyle properties. Styles the selected item's container in dropdown menu (with Studio Pro v8.11).
  }, 
  useUniformDesign: null, // Enables new uniformDesign (with Studio Pro v8.11).
  validationMessage: {
    // This has all TextStyle properties. Styles the validation message (with Studio Pro v8.11).
  },
  value: {
    // This has all TextStyle properties. Styles the value button which toggle's dropdown and PickerIOS items. If placeholder is selected, placeholderTextColor will be applied
    placeholderTextColor: null, // If placeholder is selected, placeholderTextColor will be applied (with Studio Pro v8.11).
  },
  valueFocused: {
    // Same properties as `value`. Overrides `value` styles if the dropdown box is focused. (with Studio Pro v8.15).
  },  
  valueContainer: {
    // This has all ViewStyle properties and rippleColor. Styles the value button's container (with Studio Pro v8.11).
  },  
  valueContainerFocused: {
    // Same properties as `valueContainer`. Overrides `valueContainer` styles if the dropdown box is focused (with Studio Pro v8.15).
  },  
  valueContainerError: {
    // Same properties as `valueContainer`. Overrides `valueContainer` styles if the dropdown has a validation error (with Studio Pro v9.19.0).
  }, 
};

export const Checkbox = {
  container: {
    // All ViewStyle properties
  },
  containerDisabled: {
    // All ViewStyle properties. Same properties as `container`. Overrides `container` styles if the text box is non-editable.
  },
  label: {
    // This has all TextStyle properties.
    numberOfLines: 1 // The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis.
  },
  labelDisabled: {
    // Same properties as `label`. Overrides `label` styles if the checkbox is non-editable.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },

  // The following properties are only used for the render mode: Switch
  input: {
    // All ViewStyle properties.
    trackColorOn: null, // Custom color for the switch track when turned on.
    trackColorOff: null, // Custom color for the switch track when turned off.
    thumbColorOn: null, // Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow.
    thumbColorOff: null, // Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow.
  },
  inputError: {
    // This has the same properties as `input`. Overrides `input` styles if there are validation errors.
  },
  inputDisabled: {
    // This has the same properties as `input`. Overrides `input` styles if the checkbox is non-editable.
  },
  
  // The following properties are only used for the render mode: Checkbox
  checkboxInput: {
    // This has all ViewStyle properties.
    // Render mode: Checkbox.
    color: null, // Custom color for the tick icon.
    size: null, // Custom size for the tick icon.
  },
  checkboxInputDisabled: {
    // This has the same properties as `checkboxInput`. Overrides `checkboxInput` styles if the checkbox is non-editable.
  },
  checkboxInputError: {
    // This has the same properties as `checkboxInput`. Overrides `input` styles if there are validation errors.
  },
};

export const DatePicker = {
  container: {
    // All ViewStyle properties
  },
  containerDisabled: {
    // All ViewStyle properties. Same properties as `container`. Overrides `container` styles if the text box is non-editable.
  },
  label: {
    // This has all TextStyle properties.
    // Render mode: Both.
    numberOfLines: 1 // The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Render mode: Both.
  },
  labelDisabled: {
    // Same properties as `label`. Overrides `label` styles if the checkbox is non-editable.
    // Render mode: Both.
  },
  value: {
    // This has all TextStyle properties.
    rippleColor: 'rgba(0, 0, 0, 0.2)', // This is the color of the ripple on Android, and will be applied only when the date picker is pressed.
    underlayColor: null, // This is the color while pressing the date picker on iOS, if not set it will be defaulted to opacity only.
  },
  valueDisabled: {
    // This has all TextStyle properties. Overrides `value` styles if the date picker is non-editable.
  },
  valueContainerError: {
    // This has all TextStyle properties. Overrides `value` styles if the date picker has a validation error.
  }, 
  placeholder: {
    // This has all TextStyle properties.
  },
  placeholderDisabled: {
    // This has all TextStyle properties.  Overrides `placeholder` styles if the date picker is non-editable.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },
  pickerBackdropIOS: {
    // This has all Viewstyle properties.
  },
  pickerIOS: {
    // This has all Viewstyle properties.
    color: null,
  },
  pickerTopIOS: {
    // This has all Viewstyle properties.
  },
};

export const com_mendix_widget_native_image_Image = {
  container: {
    // All ViewStyle properties
  },
  image: {
    // This has all ImageStyle properties.
  },
  backdrop: {
    // All ViewStyle properties
  }
};

export const Image = {
  container: {
    // All ViewStyle properties
    rippleColor: 'rgba(0, 0, 0, 0.2)', // This is the color of the ripple on Android, and will be applied only when the container has an on click action set, otherwise it will be ignored.
    underlayColor: null, // This is the color while pressing the container on iOS, and will be applied only when the container has an on click action set, otherwise it will be ignored and defaulted to opacity only.
  },
  containerDisabled: {
    // Same properties as `container`. Overrides `container` styles if the image has an on click action and the action cannot be executed or is disabled during action.
  },
  image: {
    // This has all ImageStyle properties.
  },
  imageDisabled: {
    // Same properties as `image`. Overrides `image` styles if the image has an on click action and the action cannot be executed or is disabled during action.
  },
};

export const ActionButton = {
  container: {
    // All ViewStyle properties
    rippleColor: 'rgba(0, 0, 0, 0.2)', // This is the color of the ripple on Android, and will be applied only when the container has an on click action set, otherwise it will be ignored.
    underlayColor: null, // This is the color while pressing the container on iOS, and will be applied only when the container has an on click action set, otherwise it will be ignored and defaulted to opacity only.
  },
  containerDisabled: {
    // Same properties as `container`. Overrides `container` styles if the button has on click action set and it cannot be executed or is set with `Disable during action`.
  },

  caption: {
    // This has all TextStyle properties.
  },
  captionDisabled: {
    // Same properties as `caption`. Overrides `caption` styles if the button has on click action set and it cannot be executed or is set with `Disable during action`.
  },
  icon: {
    // This has all ViewStyle properties.
    size: 12, // This is the size of the button icon.
    color: null, // This is the color of the button icon.
  },
  iconDisabled: {
    // Same properties as `icon`. Overrides `icon` styles if the button has on click action set and it cannot be executed or is set with `Disable during action`.
  },
};

export const Page = {
  statusBar: {
    barStyle: null, // The style of the status bar, which can be either `dark-content` (black text) or `light-content` (white text).
    backgroundColor: null, // The background color of the status bar (Android only).
  },
  header: {
    container: {
      // This has all ViewStyle properties.
    },
    title: {
      // This has all TextStyle properties.
    },
    backButtonText: {
      // This has all TextStyle properties.
    },
    backButtonIcon: {
      // This has all ImageStyle properties.
    }
  },
  container: {
    // This has all ImageStyle properties.
  }
};

export const navigationStyle = {
  bottomBar: {
    container: {
      // This has all ViewStyle properties.
    },
    label: {
      // This has all TextStyle properties.
    },
    selectedLabel: {
      // This has all TextStyle properties.
    },
    icon: {
      // This has all TextStyle properties.
    },
    selectedIcon: {
      // This has all ViewStyle properties.
    }
  },
  progressOverlay: {
    background: {
      // This has all ViewStyle properties.
    },
    container: {
      // This has all ViewStyle properties.
    },
    activityIndicator: {
      // This is the same as the `activity indicator` widget.
    },
    text: {
      // This has all TextStyle properties.
    }
  },    
};

export const com_mendix_widget_native_activityindicator_ActivityIndicator = {
  container: {
    // This has all ViewStyle properties.
  },
  indicator: {
    color: 'gray', // This is the color of the indicator.
    size: 'large' // Possible values for indicator are `large` and `small`.
  }
};

export const com_mendix_widget_native_backgroundimage_BackgroundImage = {
  container: {
    // This has all ViewStyle properties.
  },
  image: {
    // This has all ImageStyle properties.
    svgColor: 'black', // Property to set the color of an SVG image.
  }
};

export const com_mendix_widget_native_badge_Badge = {
  container: {
    // This has all ViewStyle properties.
  },
  caption: {
    // This has all TextStyle properties.
  }
};

export const com_mendix_widget_native_barcodescanner_BarcodeScanner = {
  container: {
    // This has all ViewStyle properties.
  },
  mask: {
    color: '#62B1F6', // Property to set the color of the mask border indicators.
    width: null, // Property to set the width of the barcode reader.
    height: null, // Property to set the height of the barcode reader.
    backgroundColor: 'rgba(0, 0, 0, 0.6)' // Property to set the background color of the mask.
  }
};

export const com_mendix_widget_native_feedback_Feedback = {
  floatingButton: {
    // This has all ViewStyle properties.
  },
  dialog: {
    // This has all ViewStyle properties.
  },
  title: {
    // This has all TextStyle properties.
  },
  textAreaInput: {
    // This has all TextStyle properties.
    placeholderTextColor: null, // This is the text color of the placeholder string.
    selectionColor: null, // This is the highlight and cursor color of the text input.
    underlineColorAndroid: null, // This is the underline color for Android devices.
    numberOfLines: null, // This is the height of the text area is based on this number of text lines.
  },
  switchLabel: {
    // This has all TextStyle properties.
  },
  switchInput: {
    // This has all TextStyle properties.
    trackColorOn: null, // This is the custom color for the switch track when turned on.
    trackColorOff: null, // This is the custom color for the switch track when turned off.
    thumbColorOn: null, // This is the color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow.
    thumbColorOff: null, // This is the color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow.
  },
  button: {
    borderColor: null, // This is the color of dialog button borders.
    borderWidth: null, // This is the width of dialog button borders.
    color: null, // This is the color of dialog button text.
  },
  buttonDisabled: {
    color: null, // This is the color of dialog button text when disabled.
  },
  activityIndicator: {
    color: null, // This is the color of the activity indicator that is shown while feedback is being submitted.
  },
};

export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton = {
  container: {
    // This has all ViewStyle properties.
  },
  button: {
    // This has all ViewStyle properties.
    size: null, // This is the radius of the button.
    rippleColor: null, // This is the color of the ripple on Android.
  },
  buttonIcon: {
    // This has all ImageStyle properties.
  },
  secondaryButton: {
    // This has all ViewStyle properties.
    size: null, // This is the radius of the secondary buttons.
  },
  secondaryButtonIcon: {
    // This has all ImageStyle properties.
  },
  secondaryButtonCaption: {
    // This has all TextStyle properties.
  },
  secondaryButtonCaptionContainer: {
    // This has all ViewStyle properties.
  },
};

export const com_mendix_widget_native_maps_Maps = {
  container: {
    // This has all ViewStyle properties.
  },
  loadingOverlay: {
    // This has all ViewStyle properties.
  },
  loadingIndicator: {
    color: null, // This is the color of the loading indicator.
  },
  marker: {
    color: null, // This is the color of the location marker.
    opacity: null, // This is the opacity of the location marker.
  },
};

export const com_mendix_widget_native_progressbar_ProgressBar = {
  container: {
    // This has all ViewStyle properties.
  },
  bar: {
    // This has all ViewStyle properties.
  },
  fill: {
    backgroundColor: null, // This is the background color of the filled progress bar portion.
  },
  marker: {
    // This has all TextStyle properties.
  },
};

export const com_mendix_widget_native_progresscircle_ProgressCircle = {
  container: {
    // This has all ViewStyle properties.
  },
  circle: {
    size: null, // This is the radius of the progress circle.
    borderWidth: null, // This is the border width of the progress circle.
    borderColor: null, // This is the color of the progress circle border.
  },
  fill: {
    backgroundColor: null, // This is the color of the circle’s filled portion.
    width: null, // This is the width of the progress circle.
    lineCapRounded: null, // This determines if the rotating line’s front tip is rounded off or not.
  },
  text: {
    // This has all TextStyle properties.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },
};

export const com_mendix_widget_native_qrcode_QRCode = {
  container: {
    // This has all ViewStyle properties.
  },
  qrcode: {
    size: null, // The size of the QR code.
    color: null, // The color of the QR code. 
    borderColor: null, // The background color behind the QR code.
  },
};

export const com_mendix_widget_native_rangeslider_RangeSlider = {
  container: {
    // This has all ViewStyle properties.
  },
  track: {
    // This has all ViewStyle properties.
  },
  trackDisabled: {
    // This has all ViewStyle properties.
  },
  highlight: {
    // This has all ViewStyle properties.
  },
  highlightDisabled: {
    // This has all ViewStyle properties.
  },
  marker: {
    // This has all ViewStyle properties.
  },
  markerActive: {
    // This has all ViewStyle properties.
  },
  markerDisabled: {
    // This has all ViewStyle properties.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },
};

export const com_mendix_widget_native_safeareaview_SafeAreaView = {
  container: {
    // This has all ViewStyle properties.
  },
};

export const com_mendix_widget_native_rating_Rating = {
  container: {
    // This has all ViewStyle properties.
  },
  containerDisabled: {
    // This has all ViewStyle properties.
  },
  icon: {
    // This has all ViewStyle properties.
    size: null, // The size of the icon.
    color: null, // The color of the icon.
    selectedColor: null, // The color of the icon when selected.
  },
};

export const com_mendix_widget_native_togglebuttons_ToggleButtons = {
  container: {
    // This has all ViewStyle properties.
  },
  containerDisabled: {
    // This has all ViewStyle properties.
  },
  button: {
    // This has all ViewStyle properties.
  },
  text: {
    // This has all TextStyle properties.
  },
  activeButton: {
    // This has all ViewStyle properties.
  },
  activeButtonText: {
    // This has all TextStyle properties.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },
};

export const com_mendix_widget_native_videoplayer_VideoPlayer = {
  container: {
    // This has all ViewStyle properties.
  },
  indicator: {
    color: null, // The loading indicator color.
  },
  video: {
    // This has all ViewStyle properties.
  },
  errorMessage: {
    // This has all TextStyle properties.
  },
  fullScreenVideoPlayer: {
    // This has all ViewStyle properties. Android only.
  },
  controlBtnContainerStyle: {
    // This has all ViewStyle properties. Android only.
  },
  fullScreenVideoStyle: {
    // This has all ViewStyle properties. Android only. 
  },
  fullScreenActivityIndicatorStyle: {
    // This has all ViewStyle properties. Android only.
  },
};

export const com_mendix_widget_native_webview_WebView = {
  container: {
    // This has all ViewStyle properties.
  },
  errorContainer: {
    // This has all ViewStyle properties.
  },
  errorText: {
    // This has all TextSTyle properties.
  },
};

export const com_mendix_widget_native_animation_Animation = {
  container: {
    // This has all ViewStyle properties.
  },
};

export const com_mendix_widget_native_animation_Animation = {
  fullscreenContainer: {
    // This has all ViewStyle properties.
  },
  popupContainer: {
    // This has all ViewStyle properties.
  },
  paginationContainer: {
    // This has all ViewStyle properties.
  },
  paginationText: {
    // This has all TextStyle properties.
  },
  dotStyle: {
    // This has all ViewStyle properties.
  },
  activeDotStyle: {
    // This has all ViewStyle properties.
  },
  buttonsContainer: {
    // This has all ViewStyle properties.
  },
  container: {
    // This has all ViewStyle properties. Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext.
  },
  caption: {
    // This has all ViewStyle properties.
  },
  icon: {
    size: null, // The size of the icon.
    color: null, // The color of the icon.
  },
};

export const com_mendix_widget_native_listviewswipe_ListViewSwipe = {
  container: {
    // This has all ViewStyle properties.
  },
  leftAction: {
    // This has all ViewStyle properties.
    panelSize: null, // The number of pixels and the combined size of the background buttons.
    threshold: null, // The number of pixels to accept the swipe action.
  },
  rightAction: {
    // This has all ViewStyle properties.
    panelSize: null, // The number of pixels and the combined size of the background buttons.
    threshold: null, // The number of pixels to accept the swipe action.
  },
};

export const com_mendix_widget_native_bottomsheet_BottomSheet = {
  container: {
    // This has all ViewStyle properties.
  },
  containerWhenExpandedFullscreen: {
    // This has all ViewStyle properties. This has all ViewStyle properties. Only available if `Expading` and `Enable full screen` are enabled.
  },
  modal: {
    // This has all ViewStyle properties. 
  },
  defaultStyle: {
    // This has all TextStyle properties. Available when `Default` is selected as style for basic items.
  },
  primaryStyle: {
    // This has all TextStyle properties. Available when `Primary` is selected as style for basic items.
  },
  dangerStyle: {
    // This has all TextStyle properties. Available when `Danger` is selected as style for basic items.
  },
  customStyle: {
    // This has all TextStyle properties. Available when `Custom` is selected as style for basic items.
  },
};

export const com_mendix_widget_native_popupmenu_PopupMenu = {
  basic: {
  // BasicItemStyle. Styles basic items.
    containerStyle: {
      // This has all ViewStyle properties. Styles the wrapper container around a basic item. 
    },
    itemStyle: {
      ellipsizeMode: null, // 'head', 'middle', 'tail', or 'clip'. Styles how the text will be clipped if its too long.
      rippleColor: null, // Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms.
      defaultStyle: {
        // This has all TextStyle properties. Styles all basic menu items which have the `default` style selected.
      },
      primaryStyle: {
        // This has all TextStyle properties. Styles all basic menu items which have the `primary` style selected.
      },
      dangerStyle: {
        // This has all TextStyle properties. Styles all basic menu items which have the `danger` style selected.
      },
      customStyle: {
        // This has all TextStyle properties. Styles all basic menu items which have the `custom` style selected.
      },
    },
    dividerColor: null, // Styles the divider color. 
  },

  custom: {
    // CustomItemStyle. Styles custom items.
    // This has the same properties as BasicItemStyle.
  },

  buttonContainer: {
    // This has all ViewStyle properties. Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. 
  },
  container: {
    // This has all ViewStyle properties. Styles the wrapper view around the whole menu.
  },
};

export const com_mendix_widget_native_carousel_Carousel = {
  container: {
    // This has all ViewStyle properties. Styles the view surrounding the carousel widget. For best results, make sure to give a fixed `height`
  },
  cardLayout: {
    // Styles the carousel when the layout is set to card.     
    slideItem: {
      // This has all ViewStyle properties. Styles the view surrounding each slide, including inactive slides.
    },
    inactiveSlideItem: {
      opacity: null, // Allows inactive slides to become more smaller and faded.   
      scale: null, // Allows inactive slides to become more smaller and faded.   
    },
    indicator: {
      color: null, // Styles the loading indicator which will be shown while the carousel is loading.
    },
    pagination: {
      container: {
        // This has all ViewStyle properties. Styles the main view around pagination, regardless of text or dot.
      },
      dotStyle: {
        // This has all ViewStyle properties. Styles all the pagination dots.   
  color: null, 
      },
      inactiveDotStyle: {
        // This has all ViewStyle properties. Additional styles for inactive dots. Will be merged with `dotStyle`.
  opacity: null,
  scale: null,
  color: null,
      },
      dotContainerStyle: {
        // This has all ViewStyle properties. Styles the view around individual pagination dots.  
      },
      text: {
        // This has all TextStyle properties. Will be applied when there are more than five elements in carousel, in which case pagination buttons become text like **1/5**.
      },
    },
  },

  fullWidthLayout: {
    // Styles the carousel when the layout is set to full width.
    // Same properties as cardLayout.
  },
};

export const com_mendix_widget_native_signature_Signature = {
  container: {
    // This has all ViewStyle properties. 
    penColor: null, // This will change the color of the stroke.
  },
  buttonWrapper: {
    // This has all ViewStyle properties. 
  },
  buttonClearContainer: {
    // This has all ViewStyle properties. 
    rippleColor: null, // This will change the color of the ripple on Android.
    activeOpacity: null, // This will change the opacity when touch is active on iOS.
    underlayColor: null, // This will change the underlay color when touch is active on iOS.
  },
  buttonClearCaption: {
    // This has all TextStyle properties. 
  },
  buttonSaveContainer: {
    // This has all ViewStyle properties.
  },
  buttonSaveContainer: {
    // This has all ViewStyle properties. 
    rippleColor: null, // This will change the color of the ripple on Android.
    activeOpacity: null, // This will change the opacity when touch is active on iOS.
    underlayColor: null, // This will change the underlay color when touch is active on iOS.
  }, 
  buttonSaveCaption: {
    // This has all TextStyle properties.
  },
};

export const com_mendix_widget_native_linechart_LineChart = {
  container: {
    // This has all ViewStyle properties. 
  },
  errorMessage: {
    // This has all TextStyle properties. 
  },
  chart: {
    // This has all ViewStyle properties. 
  },
  grid: {
    backgroundColor: null, // Applies a color to the grid background (string).
    dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty).
    lineColor: null, // Applies a color to the grid lines (string).
    lineWidth: null, // Applies a width to the grid lines (number).
    padding: null, // Applies padding to all sides of the grid (number). Use it to make axis value labels visible.
    paddingBottom: null, // Applies padding to the bottom side of the grid (number). Use it to make axis value labels visible.
    paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). Use it to make axis value labels visible.
    paddingLeft: null, // Applies padding to the left side of the grid (number). Use it to make axis value labels visible.
    paddingRight: null, // Applies padding to the right side of the grid (number). Use it to make axis value labels visible.
    paddingTop: null, // Applies padding to the top side of the grid (number). Use it to make axis value labels visible.
    paddingVertical: null, // Applies padding to the vertical sides of the grid (number). Use it to make axis value labels visible.
  },
  xAxis: {
    color: null, // Applies a color to the axis value labels (string).
    dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)).
    fontFamily: null, // Applies fonts to the axis value labels (string).
    fontSize: null, // Applies a size to the axis value labels (number).
    fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic").
    fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900").
    lineColor: null, // Applies a color to the axis line (string).
    lineWidth: null, // Applies a width to the axis line (number).
    label: { 
      // All TextStyle properties.
      relativePositionGrid: null, // Positions the axis label at the bottom or right side of the grid ("bottom" or "right").
    },
  },
  yAxis: {
    // All `xAxis` element styles.
  },
  legend: {
    container: {
      // All ViewStyle properties.
    },
    item: {
      // All ViewStyle properties. 
    },
    indicator: {
      // All ViewStyle properties. 
    },
    label: {
      // All ViewStyle properties. 
    }
  },
  lines: {
    lineColorPalette: null, // Provides colors to lines that do not have a line color configured (string with list of colors separated by ';').
    customLineStyles: {
      any_custom_line_style_name: {
        line: {
          dashArray: null, // Applies a pattern of dashes and gaps to the graph line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)).
          ending: null, // Applies a flat or rounded line end to the graph line ("flat" or "round").
          lineColor: null, // Applies a color to the graph line (string).
          lineWidth: null, // Applies a width to the graph line (number).
        },
        markers: {
          backgroundColor: null, // Applies a background color to the markers of the graph line (string).
          borderColor: null, // Applies a border color to the markers of the graph line (string).
          borderWidth: null, // Applies a border width to the markers of the graph line (string).
          display: null, // Influences whether markers are displayed. When displayed, it positions the markers of the graph line on top or underneath the line ("false" or "underneath" or "onTop").
          size: null, // Applies a size to the markers of the graph line (number).
          symbol: null, // Applies a symbol to the markers of the graph line ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp").
        }
      }
    }
  }
};

export const com_mendix_widget_native_barchart_BarChart = {
  container: {
    // This has all ViewStyle properties. 
  },
  errorMessage: {
    // This has all TextStyle properties. 
  },
  chart: {
    // This has all ViewStyle properties. 
  },
  grid: {
    backgroundcolor: null, // Applies a color to the grid background (string).
    dashArray: null, //  Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)).
    lineColor: null, // Applies a color to the grid lines (string).
    width: null, // Applies a width to the grid lines (number).
    padding: null, // Applies padding to all sides of the grid (number). This makes axis value labels visible.
    paddingBottom: null, // Applies padding to the bottom side of the grid (number). This makes axis value labels visible.
    paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible.
    paddingLeft: null, // Applies padding to the left side of the grid (number). This makes axis value labels visible.
    paddingRight: null, // Applies padding to the right side of the grid (number). This makes axis value labels visible.
    paddingTop: null, // Applies padding to the top side of the grid (number). This makes axis value labels visible.
    paddingVertical: null, // Applies padding to the vertical sides of the grid (number). This makes axis value labels visible.
  },
  xAxis: {
    color: null, // Applies a color to the grid background (string).
    dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)).
    fontFamily: null, // Applies a font type to the axis value labels (string).
    fontSize: null, // Applies a size to the axis value labels (number).
    fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic").
    fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900").
    lineColor: null, // Applies a color to the axis line (string).
    width: null, // Applies a width to the axis line (number).
    label: {
      // All TextStyle properties.
      relativePositionGrid: null, // Positions the axis label at the **bottom** or **right** side of the grid.
    }
  },
  yAxis: {
    // All `xAxis` element styles.
  },
  legend: {
    container: {
      // All ViewStyle properties.
    },
    item: {
      // All ViewStyle properties.
    },
    indicator: {
      // All ViewStyle properties.
    },
    label: {
      // All TextStyle properties.
    }
  },
  domain: {
    padding: {
      x: null, // Applies a number of pixels of padding to add the beginning and end of the X axis domain (number).
      y: null, // Applies a number of pixels of padding to add the beginning and end of the y axis domain (number).
    },
  },
  bars: {
    barColorPalette: null, // Provides colors to bars that do not have a bar color configured (string with list of colors separated by ';', one color for each series).
    barsoffset: null, // Determines the number of pixels each bar in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**.
    customBarStyles: {
      any_custom_bar_style_name: {
        bar: {
          ending: null, // Specifies a radius to apply to each bar.
          barcolor: null, // Applies a color to the bar (string). If bars are configured to have labels, the labels will be the same color as the bar.
          width: null, // Applies a width to the bar (number).
        },
        label: {
          fontFamily: null, // Applies a font type to the bar label (string).
          fontSize: null, // Applies a size to the bar label (number).
          fontStyle: null, // Applies a font style to the bar label (**normal** or **italic**).
          fontWeight: null, // Applies a font weight to the bar label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900").
        }
      }
    }
  }
};

export const com_mendix_widget_native_piedoughnutchart_PieDoughnutChart = {
  container: {
    // This has all ViewStyle properties. 
  },
  slices: {
    customStyles: {
      any_custom_key: {
        slice: {
          color: null, // Applies a color to the slice (string). If labels are configured to be shown, each label will be the same color as its corresponding slice.
          fontFamily: null, // Applies a font type to the slice label (string).
          fontSize: null, //  Applies a size to the slice label (number).
          fontStyle: null, // Applies a font style to the slice label (**normal** or **italic**).
          fontWeight: null, // Applies a font weight to the slice label ("normal" or "bold" or "100"-"900" ascending by increments of 100).
        },
      },
    },
    colorPalette: null, // Provides colors to slices that do not have a slice color configured (string with list of colors separated by a ';').
    innerRadius: null, //  Applies an inner radius to the chart when in doughnut presentation mode (number).
    padding: null, // Applies padding to all sides of the chart (number).
    paddingBottom: null, // Applies padding to the bottom side of the chart (number).
    paddingHorizontal: null, // Applies padding to the horizontal sides of the chart (number).
    paddingLeft: null, // Applies padding to the left side of the chart (number).
    paddingRight: null, // Applies padding to the right side of the chart (number).
    paddingTop: null, // Applies padding to the top side of the chart (number).
    paddingVertical: null, // Applies padding to the vertical sides of the chart (number).
  },
};

export const com_mendix_widget_native_switch_Switch = {
  container: {
    // This has all ViewStyle properties. 
  },
  containerDisabled: {
    // Same properties as `container`. Overrides `container` styles if the text box is non-editable.
  },
  input: {
    // This has all TextStyle properties. 
    trackColorOn: null, // Custom color for the switch track when turned on.
    trackColorOff: null, // Custom color for the switch track when turned off.
    thumbColorOn: null, // Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow.
    thumbColorOff: null, // Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow.
  },
  inputError: {
    // This has the same properties as `input`. Overrides `input` styles if there are validation errors.
  },
  inputDisabled: {
    // This has the same properties as `input`. Overrides `input` styles if the checkbox is non-editable.
  },
  label: {
    // This has all TextStyle properties 
    numberOfLines: 1, // The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis.
  },
  labelDisabled: {
    // Same properties as `label`. Overrides `label` styles if the checkbox is non-editable.
  },
  validationMessage: {
    // This has all TextStyle properties.
  },
};

export const com_mendix_widget_native_backgroundgradient_BackgroundGradient = {
  container: {
    // This has all ViewStyle properties. 
  },
  colorList: {
    color: null, // Colors can be passed in different formats. Valid color value formats are #d0d0d0, rgb(115,155,155), or rgba(195,226,226,0.5)
    offset: null, // A color-stop's value, followed by one or more optional stop positions (should be between 0.0 and 1.0)
  },
  angle: null, // Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise.
  opacity: null, // Takes a value from `0` to `100`. The lower the value, the more transparent.
};

export const com_mendix_widget_native_columnchart_ColumnChart = {
  container: {
    // All ViewStyle properties.
  },
  errorMessage: {
    // All TextStyle properties.
  },
  chart: {
    // All ViewStyle properties.
  },
  grid: {
    backgroundColor: null, // Applies a color to the grid background (string).
    dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)).
    lineColor: null, // Applies a color to the grid lines (string).
    width: null, // Applies a width to the grid lines (number).
    padding: null, // Applies padding to all sides of the grid (number). This makes axis value labels visible.
    paddingBottom: null, // Applies padding to the bottom side of the grid (number). This makes axis value labels visible.
    paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible.
    paddingLeft: null, // Applies padding to the left side of the grid (number). This makes axis value labels visible.
    paddingRight: null, // Applies padding to the right side of the grid (number). This makes axis value labels visible.
    paddingTop: null, // Applies padding to the top side of the grid (number). This makes axis value labels visible.
    paddingVertical: null, // Applies padding to the vertical sides of the grid (number). This makes axis value labels visible.
  },
  xAxis: {
    color: null, // Applies a color to the axis value labels (string).
    dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)).
    fontFamily: null, // Applies a font type to the axis value labels (string).
    fontSize: null, // Applies a size to the axis value labels (number).
    fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic").
    fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900").
    lineColor: null, // Applies a color to the axis line (string).
    width: null, // Applies a width to the axis line (number).
    label: {
      // All TextStyle properties.
      relativePositionGrid: null, //P ositions the axis label at the **bottom** or **right** side of the grid.
    }
  },
  yAxis: {
    // All xAxis properties
  },
  legend: {
    container: {
      // All ViewStyle properties.
    },
    item: {
      // All ViewStyle properties.
    },
    indicator: {
      // All ViewStyle properties.
    },
    label: {
      // All TextStyle properties.
    },
  },
  domain: {
    padding: {
      x: null, // Applies a number of pixels of padding to add the beginning and end of the X axis domain (number).
      y: null, // Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number).
    }
  },
  columns: {
    columnColorPalette: null, // Provides colors to columns that do not have a column color configured (string with list of colors separated by ';', one color for each series).
    columnsOffset: null, // Determines the number of pixels each column in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**.
    customColumnStyles: {
      any_custom_column_style_name: {
        column: {
          ending: null, // Specifies a radius to apply to each column.
          columnColor: null, // Applies a color to the column (string). If columns are configured to have labels, the labels will be the same color as the column.
          width: null, // Applies a width to the column (number).
        },
        label: {
          fontFamily: null, // Applies a font type to the column label (string).
          fontSize: null, // Applies a size to the column label (number).
          fontStyle: null, // Applies a font style to the column label (**normal** or **italic**).
          fontWeight: null, // Applies a font weight to the column label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900").
        }
      }
    }
  }
};

export const com_mendix_widget_native_gallery_Gallery = {
  container: {
    // This has all ViewStyle properties. 
  },
  emptyPlaceholder: {
    // This has all ViewStyle properties. Applies a view style to the empty placeholder.
  },
  firstItem: {
    // This has all ViewStyle properties. Applies a view style to the first item of the list.
  },
  lastItem: {
    // This has all ViewStyle properties. Applies a view style to the last item of the list.
  },
  list: {
    // This has all ViewStyle properties. Applies a view style to the list container.
  },
  listitem: {
    // This has all ViewStyle properties. Applies a view style to each item container in the list.
  },
  loadMoreButtonContainer: {
    // This has all ViewStyle properties. Applies a view style to the load more button container.
  },
  loadMoreButtonPressableContainer: {
    // This has all ViewStyle properties. Applies a view style to the load more button container.
    rippleColor: null, // Defines the color of the ripple effect. ([color](https://reactnative.dev/docs/colors)) (Android only)
    borderless: null, // Defines if ripple effect should not include border. (Boolean) (Android only)
    radius: null, // Defines the radius of the ripple effect. (number) (Android only)
    foreground: null, // Set to true to add the ripple effect to the foreground of the view, instead of the background. (Boolean) (Android only)
  },
};