The mobile UI kit for
React Native.

import { StyleSheet } from 'react-native';import { Text } from 'react-native';import { Tappable } from '@/components/core/tappable';import { useTheme } from '@/theme'; export function Button({ label, variant = 'solid', ...props }: ButtonProps) {  const { components } = useTheme();  return (    <Tappable style={[styles.base, components.button[variant].container]} {...props}>      <Text style={[styles.label, components.button[variant].label]}>{label}</Text>    </Tappable>  );} const styles = StyleSheet.create({  base: { minHeight: 44, paddingHorizontal: 16, borderRadius: 12 },  label: { fontSize: 16, fontWeight: '600' },});

No dependency. Theme through useTheme().

import { StyleSheet } from 'react-native-unistyles';import { Text } from 'react-native';import { Tappable } from '@/components/core/tappable'; export function Button({ label, variant = 'solid', ...props }: ButtonProps) {  styles.useVariants({ variant });  return (    <Tappable style={styles.base} {...props}>      <Text style={styles.label}>{label}</Text>    </Tappable>  );} const styles = StyleSheet.create((theme) => ({  base: {    minHeight: 44, paddingHorizontal: theme.space[4], borderRadius: theme.radius.md,    variants: { variant: theme.components.button.container },  },  label: { ...theme.type.label, variants: { variant: theme.components.button.label } },}));

Adaptive themes and native variants.

import { tv } from 'tailwind-variants';import { Text } from 'react-native';import { Tappable } from '@/components/core/tappable'; const button = tv({  slots: { base: 'min-h-11 rounded-xl px-4', label: 'text-base font-semibold' },  variants: { variant: { solid: { base: 'bg-primary', label: 'text-on-primary' } } },}); export function Button({ label, variant = 'solid', ...props }: ButtonProps) {  const styles = button({ variant });  return (    <Tappable className={styles.base()} {...props}>      <Text className={styles.label()}>{label}</Text>    </Tappable>  );}

Tokens exposed to your Tailwind config.

import { tv } from 'tailwind-variants';import { Text } from 'react-native';import { Tappable } from '@/components/core/tappable'; const button = tv({  slots: { base: 'min-h-11 rounded-xl px-4', label: 'text-base font-semibold' },  variants: { variant: { solid: { base: 'bg-primary', label: 'text-on-primary' } } },}); export function Button({ label, variant = 'solid', ...props }: ButtonProps) {  const styles = button({ variant });  return (    <Tappable className={styles.base()} {...props}>      <Text className={styles.label()}>{label}</Text>    </Tappable>  );}

The same classes with a different setup.