React Native's APIs

Every component, API and hook of React Native and React, spliced into scripts with their own names and types.

server/Store.tsx

import { cs } from "@backtickjs/core";
import { useEffect, useRef } from "@backtickjs/react";
import {
  Animated,
  Linking,
  Platform,
  Pressable,
  Text,
  useWindowDimensions,
  View,
} from "@backtickjs/react-native";
import type { ReactNode } from "react";
// Fades its children in when it appears.
const FadeIn = cs`(props: { children: ReactNode }) => {
  const opacity = $useRef(new $Animated.Value(0)).current;
  $useEffect(() => {
    $Animated
      .timing(opacity, { toValue: 1, duration: 400, useNativeDriver: true })
      .start();
  }, []);
  return <$Animated.View style={{ opacity }}>{props.children}</$Animated.View>;
}`;
type StoreInfo = { name: string; phone: string; address: string };
const StoreCard = cs`(props: StoreInfo) => {
  const { width } = $useWindowDimensions();
  const maps =
    $Platform.OS === "ios"
      ? { label: "Open in Maps", url: "https://maps.apple.com/?q=" }
      : {
          label: "Open in Google Maps",
          url: "https://www.google.com/maps/search/?api=1&query=",
        };
  return (
    <$FadeIn>
      <$View
        style={{
          padding: 24,
          gap: 12,
          flexDirection: width > 600 ? "row" : "column",
        }}
      >
        <$Text style={{ fontSize: 24, fontWeight: "bold" }}>{props.name}</$Text>
        <$Pressable onPress={() => $Linking.openURL("tel:" + props.phone)}>
          <$Text>Call {props.phone}</$Text>
        </$Pressable>
        <$Pressable
          onPress={() =>
            $Linking.openURL(maps.url + encodeURIComponent(props.address))
          }
        >
          <$Text>{maps.label}</$Text>
        </$Pressable>
      </$View>
    </$FadeIn>
  );
}`;
export async function Store() {
  const store: StoreInfo = {
    name: "Backtick Coffee",
    phone: "+15550100",
    address: "1 Main St, Portland",
  };
  return cs`<$StoreCard {...$store} />`;
}

@backtickjs/react-native and @backtickjs/react export every component, API and hook of React Native and React, with the same names and types. In a script, splice them with $.

Components, APIs and hooks

Components are tags: <$View>, <$Pressable>, <$ScrollView>.
Members are tags too: <$Animated.View> reads View off Animated.
APIs are values: $Platform.OS, $Linking.openURL(…), $StyleSheet.create(…).
Hooks are called in client components, as in any React component: $useState, $useEffect, $useRef, $useWindowDimensions.

The phone runs them with the React Native your app ships, so a screen uses the same version as the rest of your app.

Hooks belong to client components

A hook keeps state for one instance of a component, so it's called in a client component, cs`(props) => …`, never on your server, and never in a block or an expression read outside a component. Server components shows the error for one called on your server.

The platform is the phone's

$Platform.OS and $useWindowDimensions() run on the phone, so they describe the device the screen is drawn on. A server component can't know them; ask in a client component, as StoreCard does.