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';
import { Pressable, Text, View } from '@symbiote-native/react';

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

  return (
    <View className="root">
      <Pressable onPress={() => setCount(value => value + 1)}>
        {({ pressed }) => (
          <Text className={pressed ? 'pressed' : 'label'}>Count is {count}</Text>
        )}
      </Pressable>
    </View>
  );
}

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));
• dynamic children use render functions, for example Pressable children can be (state) => ReactNode;
• 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.