TypeScript

<script setup lang="ts">
import type { ViewStyle, TextStyle } from '@thelacanians/vue-native-runtime'
import { VView, VText } from '@thelacanians/vue-native-runtime'

// TypeScript will error if you use an invalid property
const card: ViewStyle = {
  padding: 16,
  backgroundColor: '#fff',
  borderRadius: 12,
  shadowColor: '#000',
  shadowOpacity: 0.1,
  shadowRadius: 8,
  shadowOffset: { width: 0, height: 2 },
}

const title: TextStyle = {
  fontSize: 20,
  fontWeight: '600',
  color: '#333',
  marginBottom: 8,
}

const subtitle: TextStyle = {
  fontSize: 14,
  color: '#888',
}
</script>

<template>
  <VView :style="card">
    <VText :style="title">Card Title</VText>
    <VText :style="subtitle">A short description</VText>
  </VView>
</template>

<template>
  <VView :style="styles.container">
    <VImage source="avatar.png" :style="styles.avatar" />
    <VText :style="styles.title">Hello, Vue Native</VText>
    <VButton :onPress="handlePress" :style="styles.button">
      <VText :style="styles.buttonText">Get Started</VText>
    </VButton>
  </VView>
</template>

<script setup lang="ts">
import {
  ref,
  VView,
  VText,
  VInput,
  VButton,
  VSwitch,
  VImage,
  VSlider,
} from '@thelacanians/vue-native-runtime'

const text = ref('')
const isEnabled = ref(false)
const sliderValue = ref(0.5)
</script>

<template>
  <!-- VInput: modelValue (v-model), placeholder, secureTextEntry, keyboardType,
       returnKeyType, autoCapitalize, autoCorrect, maxLength, multiline -->
  <VInput
    v-model="text"
    placeholder="Type here..."
    :maxLength="100"
    keyboardType="email-address"
  />

  <!-- VSwitch: modelValue (v-model), disabled, onTintColor, thumbTintColor -->
  <VSwitch
    v-model="isEnabled"
    onTintColor="#007AFF"
    thumbTintColor="#fff"
  />

  <!-- VImage: source is an object — { uri } for remote, { asset } for bundled -->
  <VImage
    :source="{ asset: 'logo' }"
    resizeMode="contain"
    :style="{ width: 120, height: 120 }"
  />

  <!-- VSlider: modelValue (v-model), min, max -->
  <VSlider
    v-model="sliderValue"
    :min="0"
    :max="1"
  />
</template>

<script setup lang="ts">
import { useDeviceInfo, usePlatform } from '@thelacanians/vue-native-runtime'
import { useRouter, useRoute } from '@thelacanians/vue-native-navigation'

// useDeviceInfo returns typed refs. Values are empty/0 until the native
// DeviceInfo module resolves on mount — gate on `isLoaded`.
const {
  model,          // Ref<string>  — e.g. "iPhone15,2", "Pixel 7"
  systemName,     // Ref<string>  — e.g. "iOS", "Android", "macOS"
  systemVersion,  // Ref<string>  — e.g. "17.4"
  name,           // Ref<string>  — user-assigned device name
  screenWidth,    // Ref<number>
  screenHeight,   // Ref<number>
  scale,          // Ref<number>  — pixel density (3 for @3x Retina)
  isLoaded,       // Ref<boolean>
  fetchInfo,      // () => Promise<void>
} = useDeviceInfo()

// Platform detection lives in usePlatform(), not useDeviceInfo().
const {
  platform,  // 'ios' | 'android' | 'macos'
  isIOS,
  isAndroid,
  isMacOS,
  isApple,   // iOS or macOS
  isDesktop, // macOS
  isMobile,  // iOS or Android
} = usePlatform()

// useRouter returns the RouterInstance. Routes are addressed by NAME — there is
// no path/URL string form. Every navigation method returns a Promise.
const router = useRouter()
// router.push(name: string, params?: RouteParams, options?: NavigateOptions): Promise<void>
// router.navigate(...) — same signature; `push` is the preferred alias
// router.replace(name: string, params?: RouteParams): Promise<void>
// router.reset(name: string, params?: RouteParams): Promise<void>
// router.goBack(): Promise<void>   — `pop()` is the preferred alias
// router.canGoBack: ComputedRef<boolean>

// useRoute returns a ComputedRef<RouteLocation>.
const route = useRoute()
// route.value.name: string
// route.value.params: RouteParams      // Record<string, unknown>
// route.value.options: RouteOptions    // { title?, headerShown?, animation?, ... }
// There is no `path` and no `query` — deep links are mapped to route names by
// the router's `linking` config, and any values they carry arrive in `params`.
</script>

<script setup lang="ts">
import { ref } from '@thelacanians/vue-native-runtime'
import { VButton, VInput, VList, VText, VView } from '@thelacanians/vue-native-runtime'

interface Item {
  id: string
  name: string
}

const text = ref('')
const items = ref<Item[]>([])

// VButton's onPress receives no arguments
function handlePress(): void {
  console.log('Button pressed')
}

// VInput is v-model based: it emits `update:modelValue` with the new string.
// There is no `onChangeText` prop.
function handleTextChange(next: string): void {
  text.value = next
}

// VList's `endReached` event receives no arguments
function handleEndReached(): void {
  console.log('Load more items')
}
</script>

<template>
  <VButton :onPress="handlePress">
    <VText>Tap Me</VText>
  </VButton>

  <VInput
    :modelValue="text"
    placeholder="Type..."
    @update:modelValue="handleTextChange"
  />

  <!-- VList renders rows through its `#item` scoped slot. It has no
       `renderItem` prop — that is the React Native (and VFlatList) API. -->
  <VList
    :data="items"
    :keyExtractor="(item: Item) => item.id"
    @endReached="handleEndReached"
  >
    <template #item="{ item }">
      <VView :style="{ padding: 12 }">
        <VText>{{ (item as Item).name }}</VText>
      </VView>
    </template>
  </VList>
</template>

<!-- TypedList.vue -->
<script setup lang="ts" generic="T extends { id: string | number }">
import { VList } from '@thelacanians/vue-native-runtime'

defineProps<{
  items: T[]
  keyExtractor?: (item: T, index: number) => string
}>()

function defaultKeyExtractor(item: T): string {
  return String(item.id)
}
</script>

<template>
  <VList
    :data="items"
    :keyExtractor="keyExtractor ?? defaultKeyExtractor"
    :style="{ flex: 1 }"
  >
    <template #item="{ item, index }">
      <slot name="item" :item="item as T" :index="index" />
    </template>
  </VList>
</template>

<script setup lang="ts">
import TypedList from './TypedList.vue'
import { VText, VView } from '@thelacanians/vue-native-runtime'

interface Task {
  id: number
  title: string
  done: boolean
}

const tasks: Task[] = [
  { id: 1, title: 'Learn Vue Native', done: false },
  { id: 2, title: 'Build an app', done: false },
]
</script>

<template>
  <!-- `item` is inferred as Task because TypedList is generic over T -->
  <TypedList :items="tasks">
    <template #item="{ item, index }">
      <VView :style="{ padding: 12, flexDirection: 'row' }">
        <VText>{{ index + 1 }}. {{ item.title }}</VText>
      </VView>
    </template>
  </TypedList>
</template>