Developing Android Widgets

Developing Android Widgets - Voltra

Voltra allows you to build Android Home Screen widgets using JSX and Jetpack Compose Glance primitives.

import { VoltraAndroid } from 'voltra'

const WeatherWidget = ({ temperature, condition }) => (
  <VoltraAndroid.Box
    style={{
      padding: 16,
      backgroundColor: '#f0f0f0',
      borderRadius: 12,
      width: '100%',
      height: '100%'
    }}
  >
    <VoltraAndroid.Column>
      <VoltraAndroid.Text style={{ fontSize: 24, fontWeight: 'bold' }}>
        {temperature}°C
      </VoltraAndroid.Text>
      <VoltraAndroid.Text style={{ color: '#666' }}>
        {condition}
      </VoltraAndroid.Text>
    </VoltraAndroid.Column>
  </VoltraAndroid.Box>
)

Unlike standard React Native or iOS Stacks, Android Glance layouts are more restrictive:

When users browse the widget picker to add your widget to their home screen, they see a preview. You can customize this preview using: