Getting Started

pnpm add @servicetitan/anvil2-rn react-native-svg react-native-reanimated

npm install --save @servicetitan/anvil2-rn react-native-svg react-native-reanimated

import { CartoThemeProvider } from "@servicetitan/anvil2-rn";

export function Root({ children }) {
  return <CartoThemeProvider appearance="auto">{children}</CartoThemeProvider>;
}

import { useCartoTheme } from "@servicetitan/anvil2-rn";

function Surface() {
  const { theme, appearance } = useCartoTheme();
  return null;
}

import { Button, CartoThemeProvider, Text } from "@servicetitan/anvil2-rn";
import { IconPencil } from "@servicetitan/anvil2-icons/react-native";

export function App() {
  return (
    <CartoThemeProvider>
      <Text text="Anvil2 RN" />
      <Button label="Edit" icon={<IconPencil />} onPress={() => {}} />
    </CartoThemeProvider>
  );
}

import { IconPencil, IconPlus } from "@servicetitan/anvil2-icons/react-native";

import { Anvil2RNTelemetryProvider, Button } from "@servicetitan/anvil2-rn";

export function App() {
  return (
    <Anvil2RNTelemetryProvider
      onInteraction={(event) => {
        analytics.track(event);
      }}
    >
      <Button label="Save" analyticsId="save" onPress={() => {}} />
    </Anvil2RNTelemetryProvider>
  );
}