> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# @napps/nodes UI types

This page covers the public UI declarations exported by `@napps/nodes`.

## React component types

```ts theme={null}
interface RootComponentProps<TSettings = Record<string, unknown>> {
  settings?: TSettings;
}

type ComponentArgs<TSettings = Record<string, unknown>> = {
  identifier?: string;
  packageName?: string | null;
  settings?: TSettings;
};

type ComponentContext = {
  setInitialState(state?: unknown): void;
  updateState(state: unknown): void;
  removeComponent(): void;
  setComponentTheme(theme: ComponentTheme): void;
  cards?: ProductCardsBridge;
};

class BaseReactUIComponent {
  constructor(
    context: ComponentContext,
    args: ComponentArgs,
    element: React.ReactNode
  );
}

function createReactUIComponent(
  context: ComponentContext,
  args: ComponentArgs,
  element: React.ReactNode
): BaseReactUIComponent;
```

## Node tree types

```ts theme={null}
type NodeProps = Record<string, unknown> & { text?: string };

interface UIRootConfig {
  concurrentRenderer?: boolean;
  dispatchEvent?: (
    callback: (payload: unknown) => unknown,
    payload: unknown,
    delivery: 0 | 1
  ) => unknown;
}

class UINode {
  clearChildren(): void;
  appendChild(child: UINode): void;
  removeChild(child: UINode): void;
  insertBefore(child: UINode, beforeChild: UINode): void;
  updateProperty(property: string, value: unknown): void;
  removeProperty(property: string): void;
  updateProps(newProps: NodeProps, previousProps?: NodeProps): void;
  setHidden(isHidden: boolean): void;
  resetTextContent(): void;
  commitTextUpdate(oldText: string, newText: string): void;
  dispose(): void;
}

class UIContainer {
  clearChildren(): void;
  appendChild(child: UINode): void;
  removeChild(child: UINode): void;
  insertBefore(child: UINode, beforeChild: UINode): void;
  createNode(type: string, props: NodeProps): UINode;
  shouldSetTextContent(type: string, props: NodeProps): boolean;
  prepareForCommit(): void;
  resetAfterCommit(): void;
}

const RootNode: new (config?: UIRootConfig) => UIContainer;
```

## Styles and gradients

```ts theme={null}
interface GradientStop {
  color: string;
  position?: number | string;
}

interface Gradient {
  type?: "linear" | "radial" | "sweep" | "conic";
  angle?: number;
  centerX?: number | string;
  centerY?: number | string;
  center?: [number | string, number | string];
  radius?: number;
  colors?: string[];
  stops?: number[] | GradientStop[];
  positions?: number[];
}

interface StyleProperties {
  backgroundColor?: string;
  backgroundGradient?: string | Gradient;
  color?: string;
  borderColor?: string;
  borderRadius?: number | string;
  borderRadiusTopStart?: number;
  borderRadiusTopEnd?: number;
  borderRadiusBottomStart?: number;
  borderRadiusBottomEnd?: number;
  borderWidth?: number;
  spacing?: number;
  padding?: number;
  paddingStart?: number;
  paddingEnd?: number;
  paddingTop?: number;
  paddingBottom?: number;
  margin?: number;
  marginStart?: number;
  marginEnd?: number;
  marginTop?: number;
  marginBottom?: number;
  minWidth?: number;
  maxWidth?: number;
  minHeight?: number;
  maxHeight?: number;
  width?: number | string;
  height?: number | string;
  weight?: number;
  aspectRatio?: number;
  clip?: boolean;
  horizontalAlignment?: "start" | "center" | "end";
  verticalAlignment?: "top" | "center" | "bottom";
  fontSize?: number;
  fontWeight?: number;
  fontFamily?: string;
  textAlignment?: "start" | "center" | "end";
  textDecoration?: "none" | "underline" | "strikethrough";
  maxLines?: number;
  minLines?: number;
  alpha?: number;
  rotate?: number;
  scale?: number;
  scaleX?: number;
  scaleY?: number;
  translationX?: number;
  translationY?: number;
  transition?: string;
}

interface StyleRegistry {
  registerStyle(name: string, style: StyleProperties): void;
  removeStyle(name: string): void;
  clearAll(): void;
  mergeStyles(...sources: Array<string | StyleProperties>): StyleProperties | null;
  getStyle(name: string): Uint8Array | null;
}
```

## Reactive animation types

```ts theme={null}
interface SharedValue {
  value: number | string | AnimationHandle;
}

interface DerivedValue {
  readonly value: number;
}

type ReactiveValue = SharedValue | DerivedValue;
type AnimationHandle = { readonly __anim: unique symbol };
type AnimationReason = "completed" | "cancelled" | "replaced" | "overwritten";

interface AnimationResult {
  finished: boolean;
  reason: AnimationReason;
}

interface TimingConfig {
  duration?: number;
  easing?: EasingValue;
  driver?: "cpp" | "native";
}

interface SpringConfig {
  stiffness?: number;
  damping?: number;
  mass?: number;
  velocity?: number;
  response?: number;
  dampingFraction?: number;
  restDisplacement?: number;
  restVelocity?: number;
  driver?: "cpp" | "native";
}

function sv(initial?: number | string): SharedValue;
function sharedValue(initial?: number | string): SharedValue;
function timing(toValue: number | string, config?: TimingConfig, callback?: (result: AnimationResult) => void): AnimationHandle;
function spring(toValue: number | string, config?: SpringConfig, callback?: (result: AnimationResult) => void): AnimationHandle;
function cancelAnimation(value: SharedValue): void;
function interpolate(source: ReactiveValue, inputRange: number[], outputRange: number[]): DerivedValue;
function clamp(source: ReactiveValue, min: number, max: number): DerivedValue;
function add(a: ReactiveValue, b: ReactiveValue): DerivedValue;
function multiply(a: ReactiveValue, b: ReactiveValue): DerivedValue;
function animatedProps(props: object): object;
function mapEvent(map: Record<string, SharedValue>): object;
function event<E = unknown>(handler: (event: E) => void): (event: E) => void;
```

See [React styling](/js-ui/react/styling), [React animations](/js-ui/react/animations), and [React gestures](/js-ui/react/gestures) for behavior and examples.