Skip to content

Examples

Examples stay intentionally small. Each one shows the same native behavior in React, Vue, Angular, Svelte, and Solid so you can see which parts are shared and which parts are framework-specific.

  • Counter — state, view, text, and pressable.
  • Pressable — pressed state as a React render prop, or mirrored into local state on the other adapters.
  • TextInput — controlled text input and event naming differences.

The native route is the same in every example:

framework state → adapter component → @symbiote-native/engine → Fabric → native view

The code shape differs by adapter. React, Svelte, and Solid use camelCase callback props (onPress) and children render functions. Svelte also adds bind:value two-way binding on controlled inputs. Vue uses emits, v-model, and slots. Angular uses @Output() (event) bindings everywhere, except the permanent scroll-family exception (onScroll and friends), which stays a callback @Input() since it can carry an Animated.event(...) marker.