Prove every class.
A codemod that rewrites React Native StyleSheet.create styles as className, and writes a class only when Tailwind gives back the exact same style. Agents run it in one command instead of editing file by file, so a migration costs about half the tokens.
npx react-native-stylesheet-to-tailwindDry run first. Shows the diff, writes nothing.
{ "mode": "dry-run", "libraries": ["uniwind"], "files": { "scanned": 9115, "changed": 520 }, "styles": { "moved": 258, "split": 721, "stayed": 2049, "arbitrary": 232 }, "stays": [ { "file": "apps/web/app-frame.tsx", "line": 29, "reason": "no-exact-class" } ] }
Each style ends one of three ways
style prop is gone.className. The rest stays in style.StyleSheet.create, listed with a reason so a person or agent can decide.None of the guessing.
Two agents, same model and goal, converted the same 10 StyleSheet files from a real Uniwind monorepo. One edited by hand. The other ran the codemod.
49%
fewer tokens
50,326 to 25,568
67%
less time
55.2 s to 18.0 s
63%
fewer tool calls
8 to 3
0
guessed classes
manual agent 4, codemod 0
The manual agent moved more styles, 11 to 3. Four of its classes were guesses: a radius each app sets at runtime, and theme colors it never checked. The codemod left those in place with a reason.
The saving grows with the file count. Most of the codemod agent's cost is fixed starting context. This is one run, not a study: run your own with --json.
Watch the proof run.
This is the real codemod, running in your browser. Nothing is sent anywhere. Both sides render below and every element's computed style is compared.
@theme { }on a guess.
It loads your CSS entry with @tailwindcss/node, so your own tokens like text-brand and rounded-card are known.
@import "tailwindcss";
@theme { --color-brand: #0a84ff; }For each style it picks a candidate class, asks Tailwind for its CSS, and reads that CSS back as a React Native style.
bg-brand
-> background-color: #0a84ff
-> { backgroundColor: "#0a84ff" }The class is written only when both styles are equal. Otherwise the property stays in StyleSheet.create.
{ backgroundColor: "#0a84ff" }
{ backgroundColor: "#0a84ff" } equal, writecomes with a reason.
With --json they arrive in the stays list, so an agent spends its tokens only where a decision is needed.
component-has-no-class-nameThe component does not take a className.
dynamic-valueThe value is worked out at runtime.
used-outside-style-propThe style is also read outside a style prop.
conditional-without-class-mergeThe style is conditional and no class-merge function was found.
family-conflictThe classes would fight over the same property.
style-order-would-flipMoving it would change which style wins.
no-exact-classNo Tailwind class gives the exact same value.
scheme-wrapperThe styles are built by a function that reads the color scheme.
no-css-entry-covers-fileNo working CSS entry of a Uniwind or NativeWind app covers this file.
No. A class is written only when the style Tailwind makes from it equals the original style exactly. Anything else stays in StyleSheet.create.
Each style that stays is listed with a reason. With --json they come in the stays list.
--write refuses to run on a git tree with uncommitted changes unless you pass --allow-dirty, so the run is one clean diff. Review it with git diff and undo it with git restore ..
Yes, with --include <glob> and --exclude <glob>, as many times as needed.
When no theme class gives the exact value, an arbitrary value class is the only exact match. --no-arbitrary-values keeps those styles in StyleSheet.create instead.
style={[styles.base, isActive && styles.active]} needs a class-merge function such as cn. The codemod uses the one your files import most, or the one you pass with --class-merge. Without one the style stays with the reason conditional-without-class-merge.
Yes. Each file is checked against its own package and the Tailwind CSS entry that covers it.
Not yet. NativeWind 4 runs on Tailwind 3, which is not supported. Styles built inside a function that reads the color scheme stay with the reason scheme-wrapper.
No. Everything runs on your machine and the codemod makes no network calls. The playground on this page runs in your browser.
Yes. --json prints one JSON object with no colors or prompts, and --write --yes writes without a terminal.
Edge cases
Each case is real codemod output. Both versions render in this page with Tailwind's own CSS, and every element's computed style is compared. A green dot means they render the same.
Cases that use theme tokens are checked against the token shown on their card, inside @theme { }. Class sizes use 16px per rem, as Uniwind does.
Pressable styles that read pressed or hovered. 3 cases.
Moved to className.
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ button: { padding: 16 }, pressed: { opacity: 0.5 },}); export const Button = () => <Pressable style={({ pressed }) => [styles.button, pressed && styles.pressed]} />;
import { Pressable, View } from 'react-native'; export const Button = () => <Pressable className="p-4 active:opacity-50" />;
Left as StyleSheet, on purpose.
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ button: { padding: 16 }, pressed: { opacity: 0.5 },}); export const Button = () => <Pressable style={({ pressed, hovered }) => [styles.button, pressed && styles.pressed, hovered && styles.pressed]} />;
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ button: { padding: 16 }, pressed: { opacity: 0.5 },}); export const Button = () => <Pressable style={({ pressed, hovered }) => [styles.button, pressed && styles.pressed, hovered && styles.pressed]} />;
Moved to className.
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ idle: { opacity: 1 }, pressed: { opacity: 0.5 },}); export const Button = () => <Pressable style={({ pressed }) => (pressed ? styles.pressed : styles.idle)} />;
import { Pressable, View } from 'react-native'; export const Button = () => <Pressable className="opacity-100 active:opacity-50" />;
Ternaries, && parts and arrays, with and without a class merge function. 10 cases.
Moved to className.
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ base: { padding: 16 }, on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={[styles.base, isOn && styles.on]} />;
import { View } from 'react-native';import { cn } from '@/lib/cn'; export const Box = ({ isOn }) => <View className={cn('p-4', isOn && 'opacity-50')} />;
Moved to className.
import { View, StyleSheet } from 'react-native';import { cn } from '@/lib/cn'; const styles = StyleSheet.create({ base: { padding: 16 }, on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={[styles.base, isOn && styles.on]} />;
import { View } from 'react-native';import { cn } from '@/lib/cn'; export const Box = ({ isOn }) => <View className={cn('p-4', isOn && 'opacity-50')} />;
Moved to className.
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ base: { padding: 16 }, on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={[styles.base, isOn && styles.on]} />;
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View className="p-4" style={isOn && styles.on} />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from 'react-native'; const cn = (flag) => flag; const styles = StyleSheet.create({ on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={isOn ? styles.on : null} />;
import { View, StyleSheet } from 'react-native'; const cn = (flag) => flag; const styles = StyleSheet.create({ on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={isOn ? styles.on : null} />;
Moved to className.
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = () => <View style={styles.box} />;
import { View } from 'react-native'; export const Box = () => <View className="p-4" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ row: { flexDirection: "row" }, gap: { gap: 8 },}); export const Row = () => <View style={[styles.row, styles.gap]} />;
import { View } from "react-native"; export const Row = () => <View className="flex-row gap-2" />;
Moved to className.
import { Pressable, View, StyleSheet } from 'react-native';import { cn } from '@/lib/cn'; const styles = StyleSheet.create({ card: { padding: 16 }, active: { opacity: 0.5 },}); export const Card = ({ isActive }) => { const cardStyle = [styles.card, isActive && styles.active]; return <View style={cardStyle} />;};
import { Pressable, View } from 'react-native';import { cn } from '@/lib/cn'; export const Card = ({ isActive }) => { const cardClassName = cn('p-4', isActive && 'opacity-50'); return <View className={cardClassName} />;};
Moved to className.
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ on: { opacity: 1 }, off: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={isOn ? styles.on : styles.off} />;
import { View } from 'react-native';import { cn } from '@/lib/cn'; export const Box = ({ isOn }) => <View className={cn(isOn ? 'opacity-100' : 'opacity-50')} />;
Moved to className.
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ on: { opacity: 0.5 },}); export const Box = ({ isOn }) => <View style={isOn ? styles.on : null} />;
import { View } from 'react-native';import { cn } from '@/lib/cn'; export const Box = ({ isOn }) => <View className={cn(isOn ? 'opacity-50' : '')} />;
Moved to className.
import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ base: { padding: 16 }, on: { opacity: 0.5 }, big: { margin: 8 },}); export const Box = ({ isOn, isBig }) => <View style={[styles.base, isOn && styles.on, isBig && styles.big]} />;
import { View } from 'react-native';import { cn } from '@/lib/cn'; export const Box = ({ isOn, isBig }) => <View className={cn('p-4', isOn && 'opacity-50', isBig && 'm-2')} />;
Your own components, Reanimated, gradients and content container styles. 11 cases.
Left as StyleSheet, on purpose.
import { ActivityIndicator, StyleSheet } from "react-native"; const styles = StyleSheet.create({ spinner: { padding: 8 },}); export const Spinner = () => <ActivityIndicator color="#6d28d9" size="small" />;
import { ActivityIndicator, StyleSheet } from "react-native"; const styles = StyleSheet.create({ spinner: { padding: 8 },}); export const Spinner = () => <ActivityIndicator color="#6d28d9" size="small" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); // the main boxexport const Box = () => <View style={styles.box} />;
import { View } from "react-native"; // the main boxexport const Box = () => <View className="p-4" />;
Moved to className.
import { ScrollView, StyleSheet } from "react-native"; const styles = StyleSheet.create({ list: { padding: 16 },}); export const List = () => <ScrollView contentContainerStyle={styles.list} />;
import { ScrollView } from "react-native"; export const List = () => <ScrollView contentContainerClassName="p-4" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = () => <View className="flex-1" style={styles.box} />;
import { View } from "react-native"; export const Box = () => <View className="flex-1 p-4" />;
Left as StyleSheet, on purpose.
import { StyleSheet } from "react-native";import { Card } from "./card"; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Card style={styles.box} />;
import { StyleSheet } from "react-native";import { Card } from "./card"; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Card style={styles.box} />;
Moved to className.
import { StyleSheet } from "react-native";import { Card } from "./card"; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Card style={styles.box} />;
import { Card } from "./card"; export const Screen = () => <Card className="flex-1" />;
Left as StyleSheet, on purpose.
import { StyleSheet } from "react-native";import { Card } from "./card"; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Card style={styles.box} />;
import { StyleSheet } from "react-native";import { Card } from "./card"; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Card style={styles.box} />;
Left as StyleSheet, on purpose.
import { StyleSheet } from "react-native";import { LinearGradient } from "expo-linear-gradient"; const styles = StyleSheet.create({ fill: { padding: 16 },}); export const Fill = () => <LinearGradient colors={["#000", "#fff"]} style={styles.fill} />;
import { StyleSheet } from "react-native";import { LinearGradient } from "expo-linear-gradient"; const styles = StyleSheet.create({ fill: { padding: 16 },}); export const Fill = () => <LinearGradient colors={["#000", "#fff"]} style={styles.fill} />;
Moved to className.
import { StyleSheet } from "react-native"; interface FancyProps { className?: string;} const Fancy = (props: FancyProps) => null; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Fancy style={styles.box} />;
interface FancyProps { className?: string;} const Fancy = (props: FancyProps) => null; export const Screen = () => <Fancy className="flex-1" />;
Left as StyleSheet, on purpose.
import { StyleSheet } from "react-native"; interface FancyProps { title: string;} const Fancy = (props: FancyProps) => null; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Fancy title="a" style={styles.box} />;
import { StyleSheet } from "react-native"; interface FancyProps { title: string;} const Fancy = (props: FancyProps) => null; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Screen = () => <Fancy title="a" style={styles.box} />;
Moved to className.
import { StyleSheet } from "react-native";import Animated from "react-native-reanimated"; const styles = StyleSheet.create({ box: { flex: 1 },}); export const Box = () => <Animated.View style={styles.box} />;
import Animated from "react-native-reanimated"; export const Box = () => <Animated.View className="flex-1" />;
Caller styles, spread props and element shapes. 5 cases.
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ fixed: { padding: 16 },}); export const Box = (props) => <View style={[props.style, styles.fixed]} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ fixed: { padding: 16 },}); export const Box = (props) => <View style={[props.style, styles.fixed]} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ card: { padding: 16 },}); export const Card = ({ style }) => <View style={[styles.card, style]} />;
import { View } from "react-native"; export const Card = ({ style }) => <View className="p-4" style={style} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = () => <View style={styles.box} testID="box" />;
import { View } from "react-native"; export const Box = () => <View className="p-4" testID="box" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = () => <View testID="box" style={styles.box} />;
import { View } from "react-native"; export const Box = () => <View testID="box" className="p-4" />;
Moved to className.
import { View, Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ title: { fontSize: 18, lineHeight: 28 },}); export const Title = () => <Text style={styles.title}>hello</Text>;
import { View, Text } from "react-native"; export const Title = () => <Text className="text-lg">hello</Text>;
Each style value and the class it becomes. 29 cases.
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; export const Cover = () => <View style={StyleSheet.absoluteFill} />;
import { View, StyleSheet } from "react-native"; export const Cover = () => <View style={StyleSheet.absoluteFill} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ badge: { position: "absolute", top: 0, right: 0 },}); export const Badge = () => <View style={styles.badge} />;
import { View } from "react-native"; export const Badge = () => <View className="absolute top-0 right-0" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { borderWidth: 1, borderColor: "#000" },}); export const Box = () => <View style={styles.box} />;
import { View } from "react-native"; export const Box = () => <View className="border border-black" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ card: { borderRadius: 12, backgroundColor: "#fff", padding: 16 },}); export const Card = () => <View style={styles.card} />;
import { View } from "react-native"; export const Card = () => <View className="rounded-xl bg-white p-4" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ center: { flex: 1, alignItems: "center", justifyContent: "center" },}); export const Center = () => <View style={styles.center} />;
import { View } from "react-native"; export const Center = () => <View className="flex-1 items-center justify-center" />;
Moved to className.
import { View, StyleSheet } from "react-native";import { colors } from "@/theme/colors"; const styles = StyleSheet.create({ card: { backgroundColor: colors.card, borderColor: colors.border, borderWidth: 1, },}); export const Card = () => <View style={styles.card} />;
import { View } from "react-native"; export const Card = () => <View className="bg-surface border-line border" />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { elevation: 4 },}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { elevation: 4 },}); export const Box = () => <View style={styles.box} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ row: { flexDirection: "row", gap: 8 },}); export const Row = () => <View style={styles.row} />;
import { View } from "react-native"; export const Row = () => <View className="flex-row gap-2" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ wrap: { flexWrap: "wrap", alignSelf: "flex-start" },}); export const Wrap = () => <View style={styles.wrap} />;
import { View } from "react-native"; export const Wrap = () => <View className="flex-wrap self-start" />;
Left as StyleSheet, on purpose.
import { Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ label: { fontSize: 17 },}); export const Label = () => <Text style={styles.label} />;
import { Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ label: { fontSize: 17 },}); export const Label = () => <Text style={styles.label} />;
Moved to className.
import { Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ label: { fontSize: 18 },}); export const Label = () => <Text style={styles.label} />;
import { Text } from "react-native"; export const Label = () => <Text className="text-[18px]" />;
Moved to className.
import { Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ label: { fontSize: 18, lineHeight: 28 },}); export const Label = () => <Text style={styles.label} />;
import { Text } from "react-native"; export const Label = () => <Text className="text-lg" />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ line: { borderBottomWidth: StyleSheet.hairlineWidth },}); export const Line = () => <View style={styles.line} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ line: { borderBottomWidth: StyleSheet.hairlineWidth },}); export const Line = () => <View style={styles.line} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { marginLeft: 8, paddingRight: 16 },}); export const Box = () => <View style={styles.box} />;
import { View } from "react-native"; export const Box = () => <View className="ms-2 pe-4" />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { margin: 16, marginHorizontal: 8 },}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { margin: 16, marginHorizontal: 8 },}); export const Box = () => <View style={styles.box} />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const SIZE = getSize(); const styles = StyleSheet.create({ box: { width: SIZE },}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const SIZE = getSize(); const styles = StyleSheet.create({ box: { width: SIZE },}); export const Box = () => <View style={styles.box} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ pull: { marginTop: -8 },}); export const Pull = () => <View style={styles.pull} />;
import { View } from "react-native"; export const Pull = () => <View className="-mt-2" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ faded: { opacity: 0.5 },}); export const Faded = () => <View style={styles.faded} />;
import { View } from "react-native"; export const Faded = () => <View className="opacity-50" />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16, paddingTop: 8 },}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16, paddingTop: 8 },}); export const Box = () => <View style={styles.box} />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ row: { paddingLeft: 4, paddingRight: 8 },}); export const Row = () => <View style={styles.row} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ row: { paddingLeft: 4, paddingRight: 8 },}); export const Row = () => <View style={styles.row} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ half: { width: "50%" },}); export const Half = () => <View style={styles.half} />;
import { View } from "react-native"; export const Half = () => <View className="w-1/2" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ dot: { width: 8, height: 8, borderRadius: 9999 },}); export const Dot = () => <View style={styles.dot} />;
import { View } from "react-native"; export const Dot = () => <View className="w-2 h-2 rounded-full" />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { shadowOffset: { width: 0, height: 2 } },}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { shadowOffset: { width: 0, height: 2 } },}); export const Box = () => <View style={styles.box} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = ({ size }) => <View style={[styles.box, { width: size }]} />;
import { View } from "react-native"; export const Box = ({ size }) => <View className="p-4" style={{ width: size }} />;
Moved to className.
import { View, Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ label: { textAlign: "center" },}); export const Label = () => <Text style={styles.label} />;
import { View, Text } from "react-native"; export const Label = () => <Text className="text-center" />;
Moved to className.
import { View, Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ title: { fontWeight: "bold", color: "#000" },}); export const Title = () => <Text style={styles.title} />;
import { View, Text } from "react-native"; export const Title = () => <Text className="font-bold text-black" />;
Moved to className.
import { Text, StyleSheet } from "react-native"; const styles = StyleSheet.create({ label: { color: "#6d28d9" },}); export const Label = () => <Text style={styles.label} />;
import { Text } from "react-native"; export const Label = () => <Text className="text-brand" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ flush: { padding: 0 },}); export const Flush = () => <View style={styles.flush} />;
import { View } from "react-native"; export const Flush = () => <View className="p-0" />;
Sheets shared across files, style constants and what stays. 21 cases.
Moved to className.
import { Text, StyleSheet } from "react-native";import { colors } from "@/theme/colors"; const styles = StyleSheet.create({ caption: { color: colors.mutedForeground },}); export const Caption = () => <Text style={styles.caption} />;
import { Text } from "react-native"; export const Caption = () => <Text className="text-ink-soft" />;
Left as StyleSheet, on purpose.
import { Text, StyleSheet } from "react-native";import { colors } from "@/theme/colors"; const styles = StyleSheet.create({ caption: { color: colors.mutedForeground },}); export const Caption = () => <Text style={styles.caption} />;
import { Text, StyleSheet } from "react-native";import { colors } from "@/theme/colors"; const styles = StyleSheet.create({ caption: { color: colors.mutedForeground },}); export const Caption = () => <Text style={styles.caption} />;
Moved to className.
import { View, StyleSheet } from "react-native";import { useTheme } from "./theme"; const createStyles = (theme) => StyleSheet.create({ box: { flex: 1 }, }); export const Screen = () => { const theme = useTheme(); const styles = createStyles(theme); return <View style={styles.box} />;};
import { View } from "react-native"; export const Screen = () => { return <View className="flex-1" />;};
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: {},}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: {},}); export const Box = () => <View style={styles.box} />;
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; export const styles = StyleSheet.create({ card: { padding: 16 },}); export const Card = () => <View style={styles.card} />;
import { View, StyleSheet } from "react-native"; export const styles = StyleSheet.create({ card: { padding: 16 },}); export const Card = () => <View style={styles.card} />;
Left as StyleSheet, on purpose.
export const Screen = () => null;export const Screen = () => null;Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ card: { padding: 16 },}); const flatCard = StyleSheet.flatten(styles.card); export const size = flatCard;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ card: { padding: 16 },}); const flatCard = StyleSheet.flatten(styles.card); export const size = flatCard;
Left as StyleSheet, on purpose.
import { View } from "react-native"; export const Gap = () => <View style={{ marginTop: 8 }} />;
import { View } from "react-native"; export const Gap = () => <View style={{ marginTop: 8 }} />;
Moved to className.
import { Text, StyleSheet } from "react-native";import { palette } from "@/theme/palette"; const styles = StyleSheet.create({ label: { color: palette.brand.main },}); export const Label = () => <Text style={styles.label} />;
import { Text } from "react-native"; export const Label = () => <Text className="text-brand" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Pair = () => ( <View> <View style={styles.box} /> <View style={styles.box} /> </View>);
import { View } from "react-native"; export const Pair = () => ( <View> <View className="p-4" /> <View className="p-4" /> </View>);
Left as StyleSheet, on purpose.
import { View, Platform, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { ...Platform.select({ ios: { padding: 8 }, android: { padding: 4 } }) },}); export const Box = () => <View style={styles.box} />;
import { View, Platform, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { ...Platform.select({ ios: { padding: 8 }, android: { padding: 4 } }) },}); export const Box = () => <View style={styles.box} />;
Left as StyleSheet, on purpose.
import { Text, View } from "react-native";import { createSchemeStyleSets } from "@/theme/scheme-styles"; const schemeStyleSets = createSchemeStyleSets((colors) => ({ card: { flex: 1, padding: 16, backgroundColor: colors.surface, },})); export const Card = () => { const styles = useSchemeStyles(schemeStyleSets); return ( <View style={styles.card}> <Text>Hello</Text> </View> );};
import { Text, View } from "react-native";import { createSchemeStyleSets } from "@/theme/scheme-styles"; const schemeStyleSets = createSchemeStyleSets((colors) => ({ card: { flex: 1, padding: 16, backgroundColor: colors.surface, },})); export const Card = () => { const styles = useSchemeStyles(schemeStyleSets); return ( <View style={styles.card}> <Text>Hello</Text> </View> );};
Left as StyleSheet, on purpose.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = () => <View />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); export const Box = () => <View />;
Left as StyleSheet, on purpose.
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ card: { padding: 16 },}); const cardStyle = styles.card; export const Card = () => <View style={cardStyle} accessibilityHint={String(cardStyle)} />;
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ card: { padding: 16 },}); const cardStyle = styles.card; export const Card = () => <View style={cardStyle} accessibilityHint={String(cardStyle)} />;
Moved to className.
import { Pressable, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ card: { padding: 16 },}); const cardStyle = styles.card; export const Card = () => <View style={cardStyle} />;
import { Pressable, View } from 'react-native'; const cardClassName = "p-4"; export const Card = () => <View className={cardClassName} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ card: { padding: 16 },}); const cardPadding = styles.card.padding; export const Card = () => <View style={styles.card} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ card: { padding: 16 },}); const cardPadding = styles.card.padding; export const Card = () => <View className="p-4" />;
Left as StyleSheet, on purpose.
import { View } from "react-native"; export const Box = (props) => <View style={props.style} />;
import { View } from "react-native"; export const Box = (props) => <View style={props.style} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ outer: { padding: 16 }, inner: { margin: 8 },}); export const Nested = () => ( <View style={styles.outer}> <View style={styles.inner} /> </View>);
import { View } from "react-native"; export const Nested = () => ( <View className="p-4"> <View className="m-2" /> </View>);
Moved to className.
import { Text, StyleSheet } from "react-native";import { colors } from "@/theme/colors"; const styles = StyleSheet.create({ title: { color: colors.foreground }, warning: { color: colors.warning },}); export const Title = () => <Text style={styles.title} />;export const Warning = () => <Text style={styles.warning} />;
import { Text, StyleSheet } from "react-native";import { colors } from "@/theme/colors"; const styles = StyleSheet.create({ warning: { color: colors.warning },}); export const Title = () => <Text className="text-ink" />;export const Warning = () => <Text style={styles.warning} />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 },}); const spaced = 1; export const Box = () => <View style={styles.box} />;
import { View } from "react-native"; const spaced = 1; export const Box = () => <View className="p-4" />;
Moved to className.
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ box: { padding: 16 }, unused: { margin: 8 },}); export const Box = () => <View style={styles.box} />;
import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ unused: { margin: 8 },}); export const Box = () => <View className="p-4" />;