{"library":"react-native-unistyles","title":"React Native Unistyles","description":"react-native-unistyles is a high-performance, universal styling solution for React Native, designed to enhance developer experience and application performance across iOS, Android, Web, and Expo environments. It leverages a shared C++ core and JSI bindings, powered by Nitro Modules, to achieve styling without triggering unnecessary re-renders in the React tree. The library is currently stable at version 3.2.3, with a rapid release cadence addressing features and bug fixes. Key differentiators include its unique custom web parser supporting CSS classes and pseudo-classes, tight integration with React Native's Fabric and Shadow Tree for optimal rendering, and significant performance benefits, adding under 0.1ms to StyleSheet processing. It allows developers to share nearly 100% of styles across platforms in a monorepo setup, register multiple themes, and dynamically switch them with a single function call, all without introducing new components into the view hierarchy. This approach ensures a clean and efficient component tree.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-native-unistyles"],"cli":null},"imports":["import { UnistylesRegistry } from 'react-native-unistyles'","import { createStyleSheet } from 'react-native-unistyles'","import { useStyles } from 'react-native-unistyles'","import { UnistylesRuntime } from 'react-native-unistyles'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { View, Text, Pressable } from 'react-native';\nimport {\n  UnistylesRegistry,\n  createStyleSheet,\n  useStyles,\n  UnistylesRuntime\n} from 'react-native-unistyles';\n\n// 1. Define your themes\nconst lightTheme = {\n  colors: {\n    background: '#FFFFFF',\n    text: '#000000',\n    primary: '#6200EE'\n  }\n} as const; // 'as const' helps with type inference\n\nconst darkTheme = {\n  colors: {\n    background: '#121212',\n    text: '#FFFFFF',\n    primary: '#BB86FC'\n  }\n} as const;\n\n// 2. Define your breakpoints (optional, but powerful)\nconst breakpoints = {\n  sm: 0,\n  md: 768,\n  lg: 1024\n} as const;\n\n// 3. Register themes and breakpoints - crucial for TypeScript type inference\ntype AppBreakpoints = typeof breakpoints;\ntype AppThemes = {\n  light: typeof lightTheme;\n  dark: typeof darkTheme;\n};\n\ndeclare module 'react-native-unistyles' {\n  export interface UnistylesBreakpoints extends AppBreakpoints {}\n  export interface UnistylesThemes extends AppThemes {}\n}\n\nUnistylesRegistry.addBreakpoints(breakpoints)\n  .addThemes({\n    light: lightTheme,\n    dark: darkTheme\n  })\n  .setInitialTheme('light'); // Set initial theme\n\n// 4. Create your stylesheet\nconst stylesheet = createStyleSheet((theme) => ({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: theme.colors.background\n  },\n  text: {\n    color: theme.colors.text,\n    fontSize: 20,\n    marginBottom: 20,\n    // Responsive styling using breakpoints\n    $$container: {\n      lg: { fontSize: 30 },\n      md: { fontSize: 24 }\n    }\n  },\n  button: {\n    backgroundColor: theme.colors.primary,\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8\n  },\n  buttonText: {\n    color: theme.colors.text === '#000000' ? '#FFFFFF' : '#000000', // Ensure contrast\n    fontSize: 16,\n    fontWeight: 'bold'\n  }\n}));\n\n// 5. Use the stylesheet in your component\nexport default function App() {\n  const { styles, theme } = useStyles(stylesheet);\n\n  const toggleTheme = () => {\n    UnistylesRuntime.setTheme(theme.name === 'light' ? 'dark' : 'light');\n  };\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.text}>\n        Current Theme: {theme.name}\n      </Text>\n      <Pressable onPress={toggleTheme} style={styles.button}>\n        <Text style={styles.buttonText}>Toggle Theme</Text>\n      </Pressable>\n    </View>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to set up Unistyles by defining multiple themes and responsive breakpoints. It shows how to register them with `UnistylesRegistry`, create a stylesheet using `createStyleSheet`, apply styles to components using `useStyles`, and dynamically toggle between themes at runtime using `UnistylesRuntime`. This setup provides type-safe, performant, and responsive styling for React Native applications.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}