View

View is the fundamental container in Zynth, mapping directly to UIView on iOS and ViewGroup on Android. It is the core building block for layouts and supports high-performance native styles, integrated gestures, and motion transitions.

Basic Usage

View behaves like a standard container with flexbox layout support powered by Yoga.

import { View, Text } from "@zynthjs/components";

function Layout() {
  return (
    <View style={{ flex: 1, padding: 20, backgroundColor: "#f5f5f5" }}>
      <Text>Hello Zynth</Text>
    </View>
  );
}

Motion & Transitions

One of the most powerful features of View is its native support for entry, exit, and layout animations without requiring extra wrappers.

import { View } from "@zynthjs/components";
import { FadeIn, FadeOut, LinearTransition } from "@zynthjs/core/motion";

function AnimatedList({ items }) {
  return (
    <View style={{ gap: 8 }}>
      <For each={items}>
        {(item) => (
          <View 
            entering={FadeIn} 
            exiting={FadeOut}
            layout={LinearTransition}
            style={{ height: 50, backgroundColor: "#fff" }}
          >
            <Text>{item.text}</Text>
          </View>
        )}
      </For>
    </View>
  );
}

Integrated Gestures

Gestures can be attached directly to a View using the gesture prop. This wires native recognizers to the view’s host node on the UI thread.

import { View } from "@zynthjs/components";
import { createPanGesture } from "@zynthjs/core/gesture";

function Draggable() {
  const pan = createPanGesture({
    onUpdate: (e) => {
      // Worklet-driven update
      offset.value = e.translationX;
    }
  });

  return (
    <View 
      gesture={pan}
      style={{ width: 100, height: 100, borderRadius: 12 }} 
    />
  );
}

Props