Counter example

This example shows state, native layout, text, and a press event.

React

import './App.css';
import { useState } from 'react';
import { Text, View } from '@symbiote-native/react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View className="root" onPress={() => setCount(value => value + 1)}>
      <Text className="text">Count is {count}</Text>
    </View>
  );
}

App.css

.root { flex: 1; align-items: center; justify-content: center; }
.text { font-size: 24px; }

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { Text, View } from '@symbiote-native/vue';

const count = ref(0);
</script>

<template>
  <View class="root" @press="count += 1">
    <Text class="text">Count is {{ count }}</Text>
  </View>
</template>

<style scoped>
.root { flex: 1; align-items: center; justify-content: center; }
.text { font-size: 24px; }
</style>

Angular

import { Component } from '@angular/core';
import { Pressable, Text, View } from '@symbiote-native/angular';
import './app.css';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Pressable, Text, View],
  template: `
    <View class="root">
      <Pressable (press)="count = count + 1">
        <Text class="text">Count is {{ count }}</Text>
      </Pressable>
    </View>
  `,
})
export class App {
  count = 0;
}

app.css

.root { flex: 1; align-items: center; justify-content: center; }
.text { font-size: 24px; }

Svelte

<script lang="ts">
  import { Text, View } from '@symbiote-native/svelte';

  let count = $state(0);
</script>

<View class="root" onPress={() => (count += 1)}><Text class="text">Count is {count}</Text></View>

<style>
  .root { flex: 1; align-items: center; justify-content: center; }
  .text { font-size: 24px; }
</style>

What changed

Concern	React	Vue	Angular	Svelte
State	useState()	ref()	plain class field	$state() rune
Press event	onPress directly on View	@press directly on View	(press) on a Pressable wrapper	onPress directly on View
Styling	className="root" + App.css	class="root" + SFC <style>	class="root" + app.css	class="root" + component <style>
Native path	shared engine	shared engine	shared engine	shared engine

View itself carries onPress/onPressIn/onPressOut — React, Vue, and Svelte’s simplest counter reaches for it directly rather than wrapping in Pressable. Angular’s counter uses Pressable here since its non-function-children form is the idiomatic starting point on that adapter; either works on every adapter (see the Pressable example). StyleSheet.create works identically to a CSS class if you’d rather keep style objects inline — see the Styling guide.