React guide

The React adapter is the most familiar entry point if you already know React Native. It exposes React components and callback props, but it commits through SymbioteNative’s shared engine instead of React Native’s own Fabric host config.

Minimal component

import './App.css';
import { useState } from 'react';

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

  return (
    <view className="root">
      <pressable
        onPress={() => setCount(value => value + 1)}
        onPressIn={() => setPressed(true)}
        onPressOut={() => setPressed(false)}
      >
        <text className={pressed ? 'pressed' : 'label'}>Count is {count}</text>
      </pressable>
    </view>
  );
}

view, pressable, and text are intrinsic tags — no import needed. Only a composed component (FlatList, SectionList, VirtualizedList, VirtualizedSectionList, KeyboardAvoidingView, hooks, …) still comes from @symbiote-native/react.

App.css

.root {
  flex: 1;
  align-items: center;
  justify-content: center;
}
.label {
  font-size: 24px;
}
.pressed {
  font-size: 24px;
  opacity: 0.6;
}

StyleSheet.create works identically if you’d rather keep style objects inline instead of a CSS file — see the Styling guide for both paths.

React contract

React uses the React Native-style surface:

• events are callback props like onPress and onValueChange (shared by Switch and TextInput, both firing with the native event as a second argument — TextInput’s is (text, event), Switch’s is (value, event));
• press state is not a render prop: pressable is a host tag, so mirror it into local state off onPressIn/onPressOut, or take it from a functional style={({ pressed }) => …};
• render functions stay where a framework element is genuinely the return value, for example FlatList’s renderItem;
• imperative APIs use React refs, for example ref.current?.focus() on TextInput;
• app code imports from @symbiote-native/react, while the consuming app still pins react and react-native at the top level.

What SymbioteNative owns

React still owns hooks, component state, and render scheduling. The adapter owns only the host bridge: it maps React reconciler mutations to @symbiote-native/engine. The engine then translates those mutations into Fabric’s persistent commit model.

Read the exact API surface in the React API reference.