Widget Design

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

• FlexWidget
• OverlapWidget
• ListWidget
• TextWidget
• ImageWidget
• IconWidget
• SvgWidget

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

Hooks

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.

React Compiler

If React Compiler is enabled, it automatically tries to memoize the widget component by adding hook calls. To avoid this, add 'use no memo'; at the top of the file where the widget is defined.

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

HelloWidget.tsx

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

export function HelloWidget() {
  return (
    <FlexWidget
      style={{
        height: 'match_parent',
        width: 'match_parent',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderRadius: 16,
      }}
    >
      <TextWidget
        text="Hello"
        style={{
          fontSize: 32,
          fontFamily: 'Inter',
          color: '#000000',
        }}
      />
    </FlexWidget>
  );
}