#Styling

You can style Voltra components on Android using React Native-style style props. These properties are automatically converted to Jetpack Compose Glance modifiers.

For Android system-aware colors, use AndroidDynamicColors from voltra/android instead of snapshotting palette values in JavaScript.

#Supported Properties

The following React Native style properties are supported on Android:

#Layout

• width, height - Fixed dimensions (number values in dp) or "100%" to fill available space.
• flex, flexGrow - Flex weight. When > 0, the component will take up a proportional amount of space in its parent container (maps to .defaultWeight() in Glance).
• padding - Uniform padding on all edges.
• paddingTop, paddingBottom, paddingLeft, paddingRight - Individual edge padding.
• paddingHorizontal, paddingVertical - Horizontal and vertical padding.
• visibility - Controls component visibility ("visible", "hidden", or "invisible").

#Visual Style

• backgroundColor - Background color (hex strings, color names, or AndroidDynamicColors.* tokens).
• borderRadius - Corner radius value. Note: Requires Android 12+ (API 31). On older versions, this property is ignored.

#Text

• fontSize - Font size in sp.
• fontWeight - Supports "normal" and "bold".
• fontFamily - Font family name. Built-in values: "monospace", "serif", "sans-serif", "cursive". For custom fonts, see Custom Fonts.
• color - Text color (literal colors or AndroidDynamicColors.*).
• textDecorationLine - Supports "underline" and "line-through".
• textAlign - Alignment of text within the component ("left", "center", "right").
• numberOfLines - Limits the number of lines displayed.

#Image Specific

In addition to general styles, Image components support:

• resizeMode (or contentScale) - "cover", "contain", "stretch", or "center".
• alpha - Opacity of the image (0.0 to 1.0).
• tintColor - Applies a color filter to the image.

#Dynamic colors

Android widgets can use semantic Material color roles that resolve through native GlanceTheme.colors.* values during rendering.

import { AndroidDynamicColors, VoltraAndroid } from 'voltra/android'

const element = (
  <VoltraAndroid.Box
    style={{
      padding: 16,
      backgroundColor: AndroidDynamicColors.widgetBackground,
    }}
  >
    <VoltraAndroid.Text
      style={{
        color: AndroidDynamicColors.onSurface,
        fontSize: 18,
        fontWeight: 'bold',
      }}
    >
      Android Widget Text
    </VoltraAndroid.Text>
  </VoltraAndroid.Box>
)

This is the preferred approach when you want widgets to follow Android's dynamic palette even when the app is not running. See Dynamic Colors for the full role list and server-rendering behavior.

#Limitations

The following properties are NOT supported on Android due to Glance limitations:

• Margins: margin, marginTop, etc. are currently ignored. Use padding on parent containers or Spacer components instead.
• Borders: borderWidth and borderColor are not yet implemented.
• Shadows: shadowColor, shadowOffset, shadowOpacity, and shadowRadius are not supported.
• Positioning: Absolute positioning (top, left, zIndex) is not supported. Use stack alignments and spacers.
• Transforms: transform (rotate, scale, etc.) is not supported.
• Opacity: The general style.opacity property is not supported (except for the alpha prop on Image).
• Dimensions: minWidth, maxWidth, minHeight, maxHeight, and aspectRatio are not supported.
• Text Effects: letterSpacing, fontVariant, and custom lineHeight are not supported.

#Example

import { Voltra } from 'voltra'

const element = (
  <Voltra.VStack
    style={{
      padding: 16,
      backgroundColor: '#101828',
    }}
  >
    <Voltra.Text
      style={{
        color: '#F8FAFC',
        fontSize: 18,
        fontWeight: 'bold',
      }}
    >
      Android Widget Text
    </Voltra.Text>
  </Voltra.VStack>
)