Skip to main content

Interface: CastButtonProps

Defined in: packages/cast/src/cast-button.tsx:24

Props of CastButton.

Properties​

style?​

optional style?: StyleProp<Readonly<Omit<Readonly<Omit<Readonly<{
  alignContent?: ... | ... | ... | ... | ... | ... | ... | ...;
  alignItems?: ... | ... | ... | ... | ... | ...;
  alignSelf?: ... | ... | ... | ... | ... | ... | ...;
  aspectRatio?: ... | ... | ...;
  borderBottomWidth?: ... | ...;
  borderEndWidth?: ... | ...;
  borderLeftWidth?: ... | ...;
  borderRightWidth?: ... | ...;
  borderStartWidth?: ... | ...;
  borderTopWidth?: ... | ...;
  borderWidth?: ... | ...;
  bottom?: DimensionValue | undefined;
  boxSizing?: ... | ... | ...;
  columnGap?: ... | ... | ...;
  direction?: ... | ... | ... | ...;
  display?: ... | ... | ... | ...;
  end?: DimensionValue | undefined;
  flex?: ... | ...;
  flexBasis?: ... | ... | ...;
  flexDirection?: ... | ... | ... | ... | ...;
  flexGrow?: ... | ...;
  flexShrink?: ... | ...;
  flexWrap?: ... | ... | ... | ...;
  gap?: ... | ... | ...;
  height?: DimensionValue | undefined;
  inset?: DimensionValue | undefined;
  insetBlock?: DimensionValue | undefined;
  insetBlockEnd?: DimensionValue | undefined;
  insetBlockStart?: DimensionValue | undefined;
  insetInline?: DimensionValue | undefined;
  insetInlineEnd?: DimensionValue | undefined;
  insetInlineStart?: DimensionValue | undefined;
  justifyContent?: ... | ... | ... | ... | ... | ... | ...;
  left?: DimensionValue | undefined;
  margin?: DimensionValue | undefined;
  marginBlock?: DimensionValue | undefined;
  marginBlockEnd?: DimensionValue | undefined;
  marginBlockStart?: DimensionValue | undefined;
  marginBottom?: DimensionValue | undefined;
  marginEnd?: DimensionValue | undefined;
  marginHorizontal?: DimensionValue | undefined;
  marginInline?: DimensionValue | undefined;
  marginInlineEnd?: DimensionValue | undefined;
  marginInlineStart?: DimensionValue | undefined;
  marginLeft?: DimensionValue | undefined;
  marginRight?: DimensionValue | undefined;
  marginStart?: DimensionValue | undefined;
  marginTop?: DimensionValue | undefined;
  marginVertical?: DimensionValue | undefined;
  maxHeight?: DimensionValue | undefined;
  maxWidth?: DimensionValue | undefined;
  minHeight?: DimensionValue | undefined;
  minWidth?: DimensionValue | undefined;
  overflow?: ... | ... | ... | ...;
  padding?: DimensionValue | undefined;
  paddingBlock?: DimensionValue | undefined;
  paddingBlockEnd?: DimensionValue | undefined;
  paddingBlockStart?: DimensionValue | undefined;
  paddingBottom?: DimensionValue | undefined;
  paddingEnd?: DimensionValue | undefined;
  paddingHorizontal?: DimensionValue | undefined;
  paddingInline?: DimensionValue | undefined;
  paddingInlineEnd?: DimensionValue | undefined;
  paddingInlineStart?: DimensionValue | undefined;
  paddingLeft?: DimensionValue | undefined;
  paddingRight?: DimensionValue | undefined;
  paddingStart?: DimensionValue | undefined;
  paddingTop?: DimensionValue | undefined;
  paddingVertical?: DimensionValue | undefined;
  position?: ... | ... | ... | ...;
  right?: DimensionValue | undefined;
  rowGap?: ... | ... | ...;
  start?: DimensionValue | undefined;
  top?: DimensionValue | undefined;
  width?: DimensionValue | undefined;
  zIndex?: ... | ...;
}>, 
  | "filter"
  | "shadowColor"
  | "shadowOffset"
  | "shadowOpacity"
  | "shadowRadius"
  | "transform"
  | "transformOrigin"
  | "backfaceVisibility"
  | "backgroundColor"
  | "borderColor"
  | "borderCurve"
  | "borderBottomColor"
  | "borderEndColor"
  | "borderLeftColor"
  | "borderRightColor"
  | "borderStartColor"
  | "borderTopColor"
  | "borderBlockColor"
  | "borderBlockEndColor"
  | "borderBlockStartColor"
  | "borderRadius"
  | "borderBottomEndRadius"
  | "borderBottomLeftRadius"
  | "borderBottomRightRadius"
  | "borderBottomStartRadius"
  | "borderEndEndRadius"
  | "borderEndStartRadius"
  | "borderStartEndRadius"
  | "borderStartStartRadius"
  | "borderTopEndRadius"
  | "borderTopLeftRadius"
  | "borderTopRightRadius"
  | "borderTopStartRadius"
  | "borderStyle"
  | "borderWidth"
  | "borderBottomWidth"
  | "borderEndWidth"
  | "borderLeftWidth"
  | "borderRightWidth"
  | "borderStartWidth"
  | "borderTopWidth"
  | "opacity"
  | "outlineColor"
  | "outlineOffset"
  | "outlineStyle"
  | "outlineWidth"
  | "elevation"
  | "pointerEvents"
  | "cursor"
  | "boxShadow"
  | "mixBlendMode"
  | "backgroundImage"
  | "experimental_backgroundImage"
  | "experimental_backgroundSize"
  | "experimental_backgroundPosition"
  | "experimental_backgroundRepeat"
  | "isolation"> & Omit<Readonly<Omit<..., ...> & Omit<..., ...>>, 
  | "filter"
  | "transform"
  | "transformOrigin"
  | "backfaceVisibility"
  | "backgroundColor"
  | "borderColor"
  | "borderCurve"
  | "borderBottomColor"
  | "borderEndColor"
  | "borderLeftColor"
  | "borderRightColor"
  | "borderStartColor"
  | "borderTopColor"
  | "borderBlockColor"
  | "borderBlockEndColor"
  | "borderBlockStartColor"
  | "borderRadius"
  | "borderBottomEndRadius"
  | "borderBottomLeftRadius"
  | "borderBottomRightRadius"
  | "borderBottomStartRadius"
  | "borderEndEndRadius"
  | "borderEndStartRadius"
  | "borderStartEndRadius"
  | "borderStartStartRadius"
  | "borderTopEndRadius"
  | "borderTopLeftRadius"
  | "borderTopRightRadius"
  | "borderTopStartRadius"
  | "borderStyle"
  | "borderWidth"
  | "borderBottomWidth"
  | "borderEndWidth"
  | "borderLeftWidth"
  | "borderRightWidth"
  | "borderStartWidth"
  | "borderTopWidth"
  | "opacity"
  | "outlineColor"
  | "outlineOffset"
  | "outlineStyle"
  | "outlineWidth"
  | "elevation"
  | "pointerEvents"
  | "cursor"
  | "boxShadow"
  | "mixBlendMode"
  | "backgroundImage"
  | "experimental_backgroundImage"
  | "experimental_backgroundSize"
  | "experimental_backgroundPosition"
  | "experimental_backgroundRepeat"
  | "isolation"> & Omit<Readonly<{
  transform?: ... | ... | ...;
  transformOrigin?: ... | ... | ...;
}>, 
  | "filter"
  | "backfaceVisibility"
  | "backgroundColor"
  | "borderColor"
  | "borderCurve"
  | "borderBottomColor"
  | "borderEndColor"
  | "borderLeftColor"
  | "borderRightColor"
  | "borderStartColor"
  | "borderTopColor"
  | "borderBlockColor"
  | "borderBlockEndColor"
  | "borderBlockStartColor"
  | "borderRadius"
  | "borderBottomEndRadius"
  | "borderBottomLeftRadius"
  | "borderBottomRightRadius"
  | "borderBottomStartRadius"
  | "borderEndEndRadius"
  | "borderEndStartRadius"
  | "borderStartEndRadius"
  | "borderStartStartRadius"
  | "borderTopEndRadius"
  | "borderTopLeftRadius"
  | "borderTopRightRadius"
  | "borderTopStartRadius"
  | "borderStyle"
  | "borderWidth"
  | "borderBottomWidth"
  | "borderEndWidth"
  | "borderLeftWidth"
  | "borderRightWidth"
  | "borderStartWidth"
  | "borderTopWidth"
  | "opacity"
  | "outlineColor"
  | "outlineOffset"
  | "outlineStyle"
  | "outlineWidth"
  | "elevation"
  | "pointerEvents"
  | "cursor"
  | "boxShadow"
  | "mixBlendMode"
  | "backgroundImage"
  | "experimental_backgroundImage"
  | "experimental_backgroundSize"
  | "experimental_backgroundPosition"
  | "experimental_backgroundRepeat"
  | "isolation"> & Omit<Readonly<{
  backfaceVisibility?: ... | ... | ...;
  backgroundColor?: ____ColorValue_Internal | undefined;
  backgroundImage?: ... | ... | ...;
  borderBlockColor?: ____ColorValue_Internal | undefined;
  borderBlockEndColor?: ____ColorValue_Internal | undefined;
  borderBlockStartColor?: ____ColorValue_Internal | undefined;
  borderBottomColor?: ____ColorValue_Internal | undefined;
  borderBottomEndRadius?: ... | ... | ...;
  borderBottomLeftRadius?: ... | ... | ...;
  borderBottomRightRadius?: ... | ... | ...;
  borderBottomStartRadius?: ... | ... | ...;
  borderBottomWidth?: ... | ...;
  borderColor?: ____ColorValue_Internal | undefined;
  borderCurve?: ... | ... | ...;
  borderEndColor?: ____ColorValue_Internal | undefined;
  borderEndEndRadius?: ... | ... | ...;
  borderEndStartRadius?: ... | ... | ...;
  borderEndWidth?: ... | ...;
  borderLeftColor?: ____ColorValue_Internal | undefined;
  borderLeftWidth?: ... | ...;
  borderRadius?: ... | ... | ...;
  borderRightColor?: ____ColorValue_Internal | undefined;
  borderRightWidth?: ... | ...;
  borderStartColor?: ____ColorValue_Internal | undefined;
  borderStartEndRadius?: ... | ... | ...;
  borderStartStartRadius?: ... | ... | ...;
  borderStartWidth?: ... | ...;
  borderStyle?: ... | ... | ... | ...;
  borderTopColor?: ____ColorValue_Internal | undefined;
  borderTopEndRadius?: ... | ... | ...;
  borderTopLeftRadius?: ... | ... | ...;
  borderTopRightRadius?: ... | ... | ...;
  borderTopStartRadius?: ... | ... | ...;
  borderTopWidth?: ... | ...;
  borderWidth?: ... | ...;
  boxShadow?: ... | ... | ...;
  cursor?: CursorValue | undefined;
  elevation?: ... | ...;
  experimental_backgroundImage?: ... | ... | ...;
  experimental_backgroundPosition?: ... | ... | ...;
  experimental_backgroundRepeat?: ... | ... | ...;
  experimental_backgroundSize?: ... | ... | ...;
  filter?: ... | ... | ...;
  isolation?: ... | ... | ...;
  mixBlendMode?: ____BlendMode_Internal | undefined;
  opacity?: ... | ...;
  outlineColor?: ____ColorValue_Internal | undefined;
  outlineOffset?: ... | ...;
  outlineStyle?: ... | ... | ... | ...;
  outlineWidth?: ... | ...;
  pointerEvents?: ... | ... | ... | ... | ...;
}>, never>>, never> & Omit<Readonly<{
}>, never>>>;

Defined in: packages/cast/src/cast-button.tsx:34

Standard React Native view style.

A Nitro view has no intrinsic size in the RN layout tree, so the button is exactly as big as its style says; it defaults to 40×40 (a comfortable touch target around the platform's own 24 pt/dp cast icon, which is drawn centred at its own size and never scaled). Anything you pass is merged over that default.

tintColor?​

optional tintColor?: ____ColorValue_Internal;

Defined in: packages/cast/src/cast-button.tsx:47

Colour of the cast icon. Any React Native colour value; omit to inherit the platform default.

Honoured on both platforms, by different means: iOS sets the GCKUICastButton's tintColor (the SDK renders its single-colour icons through it); Android recolours the drawn icon, because MediaRouteButton reads its tint from the theme attribute mediaRouteButtonTint once at construction and exposes no per-instance setter. Both keep the framework's own icon, including the connecting animation and the connected state.