Constants
Theme Constants
Theme constants including colors, fonts, and sizes for consistent styling in Expo React Native. Learn how to use the theme constants in your project.
Installation
npx expo-app-ui add theme:::note This will automatically add required dependencies: normalizeSize. :::
Usage
import { colors, fonts, size } from "@/constants/theme";Exports
Colors
| Color | Value |
|---|---|
| primary | #007AFF |
| secondary | #5856D6 |
| success | #34C759 |
| warning | #FF9500 |
| error | #FF3B30 |
| white | #FFFFFF |
| black | #000000 |
| gray | #8E8E93 |
| lightGray | #F2F2F7 |
| darkGray | #1C1C1E |
| forest_green | #228B22 |
Sizes
| Size | Value |
|---|---|
| xs | 12 |
| sm | 14 |
| base | 16 |
| md | 18 |
| lg | 20 |
| lg2 | 24 |
| xl | 26 |
| xl2 | 28 |
| xxl | 32 |
| txl | 40 |
Examples
Using Colors
<View style={{ backgroundColor: colors.primary }} />Using Fonts
<Text style={{ fontFamily: fonts.inter }} />Using Sizes
<Text style={{ fontSize: size.md }} />Features
- Comprehensive color palette
- Normalized font sizes
- Easy to customize
- Consistent design system
Auto Scroll Cards
A carousel component with auto-scrolling, manual swipe, and indicator support for Expo React Native. Learn how to use AutoScrollCards with examples and API documentation.
normalizeSize
A utility function to normalize font sizes based on device font scale for Expo React Native. Learn how to use normalizeSize to handle accessibility settings.