# React Native's APIs

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

```tsx title="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](/docs/server-components#state-belongs-on-the-phone) 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.