Skip to main content

Widget Design

This library provides a few primitives that we can use to create widgets.

You can read more about them and their props in their respective pages.


Widgets must not use any hooks. They must be functions that return some of the primitives.

We can create custom components, but at the end they must use only the primitives, not View, Text, or any other React Native component.

We can also use conditions, for/map, standard jsx. They cannot be async.

We'll start with a Basic widget that says "Hello".

import React from 'react';
import { FlexWidget, TextWidget } from 'react-native-android-widget';

export function HelloWidget() {
return (
height: 'match_parent',
width: 'match_parent',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
borderRadius: 16,
fontSize: 32,
fontFamily: 'Inter',
color: '#000000',